Zyllio SDK is a development kit that allows developers to extend Zyllio Studio by creating Plugins. These plugins contain Components, Actions, Formula functions and Themes
It is the decision of developer to define the granularity of a plugin, it may contain any number of Components, Actions, Functions and Themes altogether
Use these pre-built plugins to experiment Zyllio Plugins within Zyllio Studio
| Plugin | Plugin URL |
|---|---|
| Progress Bar Component | https://zyllio.github.io/zyllio-plugin-progressbar/dist/plugin.js |
| Ionic Slider Component | https://zyllio.github.io/zyllio-plugin-ionic-slider/dist/plugin.js |
| Rating Component | https://zyllio.github.io/zyllio-plugin-rating/src/rating.js |
| Angular Timeline Component | https://zyllio.github.io/zyllio-plugin-angular/dist/plugin.js |
| ReactJS Chart Component | https://zyllio.github.io/zyllio-plugin-reactjs/dist/plugin.js |
| VueJS Counter Component | https://zyllio.github.io/zyllio-plugin-vuejs/public/plugin.js |
| Meme Generator Action | https://zyllio.github.io/zyllio-plugin-meme-generator/src/meme.js |
| Custom Theme | https://zyllio.github.io/zyllio-plugin-theme/src/theme.js |
| Week number formula | https://zyllio.github.io/zyllio-plugin-week-number/src/plugin.js |
| Plugin | GitHub Repository |
|---|---|
| Progress Bar Component | https://github.com/zyllio/zyllio-plugin-progressbar |
| Ionic Slider Component | https://github.com/zyllio/zyllio-plugin-ionic-slider |
| Rating Component | https://github.com/zyllio/zyllio-plugin-rating |
| Angular Timeline Component | https://github.com/zyllio/zyllio-plugin-angular |
| ReactJS Chart Component | https://github.com/zyllio/zyllio-plugin-reactjs |
| VueJS Counter Component | https://github.com/zyllio/zyllio-plugin-rating |
| Meme Generator Action | https://github.com/zyllio/zyllio-plugin-meme-generator |
| Custom Theme | https://github.com/zyllio/zyllio-plugin-theme |
| Week number formula | https://github.com/zyllio/zyllio-plugin-week-number |
Zyllio SDK requires Node.js 20+ installed on any operating system it runs
Zyllio team recommends development tools that support Javascript, Typescript technical stack
These following tools are recommended: VS Code and WebStorm
To install Zyllio SDK run the folowing command
npm install @zyllio/zy-sdk --save-dev
Zyllio SDK is a Typescript Library meant to be consumed from a Typescript project. Using Typescript is the recommended approach even though it is not mandatory and could be used from pure Javascript projects
To use Zyllio SDK, add this statement at the top of your index file
/// <reference types="@zyllio/zy-sdk" />
This statement allows the development tool to discover the services exposed by Zyllio SDK and thus provide completion and inline documentation
This document is an overview of the reference API, please consider the comprehensive Reference API for more information Zyllio SDK Reference API
Zyllio Components have to implement a CustomElement from Web Components standard. Any Javascript frameworks could be used to develop this custom element: Pure JS, Angular, Vue.Js, StencilJS, ReactJS (using react-to-webcomponent)...
Please refer to GitHub examples to review components made with different technologies
Here is fairly simple example based on Pure Javascript
class MyComponent extends HTMLElement {
...
}
In addition, a Metadata is required to describe the component to Zyllio platform, see below for more details. To register a component and its metadata use the following API assuming MyComponentMetadata is a JSON object and MyComponent a custom element Class
registry.registerComponent(MyComponentMetadata, MyComponent)
Component Metadata is a static Javascript object that describes the component, it is required by Zyllio Studio to display its properties and styles from Design Editor.
Click here to see component configuration panels
This metadata is compliant to these specifications
const Icon = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path fill="#cccccc" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
`
const MyComponentMetadata = {
metadataVersion: 2, /* Must be version 2 */
id: 'zyllio-list', /* Unique identifier, must be lower case and contain a dash character */
icon: Icon, /* SVG icon displayed in Zyllio Studio */
label: 'List', /* Label displayed in Zyllio Studio */
category: 'Basics', /* Category in which the component is displayed in Zyllio Studio */
subCategory: 'Lists', /* Sub category in which the component is displayed in Zyllio Studio */
hidden: false, /* Should be false */
properties: [{ /* Properties to configure the component */
id: 'name', /* Unique id of the property, should be lower case */
name: 'Name', /* Name of the property displayed in Zyllio Studio */
type: 'row-variable', /* Type of the property (see Reference API) */
options: [], /* Array of possible options, used only when type is PropertyTypes.Options */
default: '', /* Default value if any, it is assigned at component creation by Zyllio Studio user */
write: true, /* Indicates whether this property is used to save data at runtime (likely when a component allows selections or inputs) */
main: true /* Indicates whether this property is the main one, Zyllio Studio needs it to populate the component panel. One main property must be defined */
}],
styles: [{ /* Styles to configure the component (width and height styles are mandatory) */
id: 'width', /* Unique id of the style, should be lower case */
name: 'Width', /* Name of the style displayed in Zyllio Studio */
type: 'width', /* Any of the folowing: width, height, background-image, background-color, icon, size, font-size, color, font-weight, font-style, border-width, border-color, border-radius, box-shadow */
default: '360px' /* Default value if any, it is assigned at component creation by Zyllio Studio user */
}]
An action is a piece of logic executed by the mobile app. most of the time when a component is pressed
An Action is a Typescript class that implements ActionInterface and implements an execute method as per this example
class MyAction implements ActionInterface {
async execute(properties: PropertyModel[]) {
...
}
}
To register an action to Zyllio platform, use registry service
const myActionInstance = new MyAction()
registry.registerAction(MyActionMetadata, myActionInstance)
Action Metadata is a static Javascript object that describes the action, it is required by Zyllio Studio to display its properties from the Action Editor. This metadata is compliant to these specifications
const Icon = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path fill="#cccccc" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
`
const MyActionMetadata = {
id: 'get-random-meme', /* Unique identifier, must be lower case */
icon: Icon, /* SVG icon displayed in Zyllio Studio */
label: 'Get random meme', /* Label displayed in Zyllio Studio */
category: 'Memes', /* Category in which the action is displayed in Zyllio Studio */
properties: [{ /* Properties to configure the action */
id: 'value', /* Unique id of the property, should be lower case */
name: 'Meme URL', /* Label displayed in Zyllio Studio */
type: 'row-variable', /* Type of the property from PropertyTypes enum (see Reference API) */
options: [], /* Array of possible options, used only when type is PropertyTypes.Options */
default: '', /* Default value if any, it is assigned at component creation by Zyllio Studio user */
main: true, /* Indicates whether this property is the main one */
write: true /* Indicates whether this property is used to save data at runtime (likely when a component allows selections or inputs) */
}]
}
Formula functions are piece of presentation to display complex data (math, substring, unit convertion, distance calculation)
A Function is a Typescript class that implements FunctionInterface and implement an execute method as per this example
class MyFunction implements FunctionInterface {
execute(properties: PropertyModel[]) {
...
}
}
To register a Formula function to Zyllio platform, use registry service
const myFunctionInstance = new Myfunction()
registry.registerFunction(MyFunctionMetadata, myFunctionInstance)
Function Metadata is a static Javascript object that describes the function, it is required by Zyllio Studio to display its properties from the Formula Editor. This metadata is compliant to these specifications
const IconData = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#cccccc">
<path d="M9,10H7V12H9V10M13,10H11V12H13V10M17,10H15V12H17V10M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z" />
</svg>
`
const DateTimeMetadata = {
id: 'date', /* Unique identifier, must be lower case */
icon: IconData, /* SVG icon displayed in Zyllio Studio */
label: 'New date & time', /* Label displayed in Zyllio Studio */
category: 'Date', /* Category in which the function is displayed in Zyllio Studio */
properties: [{ /* Properties to configure the function */
id: 'date', /* Unique id of the property, should be lower case */
name: 'Date', /* Label displayed in Zyllio Studio */
type: 'date', /* Type of the property (see Reference API) */
default: '', /* Default value if any, it is assigned at component creation by Zyllio Studio user */
main: true, /* Indicates whether this property is the main one */
}]
}
Themes are shade of colors to customize the appearance of screens across the whole mobile app
A theme is defined as per these specifications
const theme = {
name: 'MyTheme', /* Name displayed in Zyllio Studio */
theme: {
primaryColor: '#4f7d96', /* Background color used in primary components (header, footer) */
primaryTextColor: '#ffffff', /* Text color used in primary components (header, footer) */
secondaryColor: '#fe844b', /* Background color used in secondary components (button, list, carousel) */
secondaryTextColor: '#ffffff', /* Text color used in secondary components (button, list, carousel) */
tertiaryColor: '#0000000a', /* Background color used in tertiary components (input fields) */
tertiaryTextColor: '#000000', /* Text color used in tertiary components (input fields) */
backgroundColor: '#f0f6f9', /* Screen background color */
textColor: '#474f5b', /* Text color */
rtl: false /* Indicates whether Right To Left alignment should be activated mainly to support Arabic and Asian languages */
}
}
To register a new Theme, use registry service
registry.registerTheme(theme)
Visual components could make use of theme style properties using the following CSS variables
These variables are set at body level automatically by Zyllio SDK at startup
Zyllio team is available for any support, feature requests and questions