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/dist/js/app.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 |
| 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 |
Zyllio SDK requires Node.js 16+ 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
All services are available from the zySdk.services namespace. For instance, dictionary service is accessed through this namespace: zySdk.services.dictionary
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
zySdk.services.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 */
tootip: '', /* Tooltip displayed in Zyllio Studio */
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 zySdk.services.registry service
const myActionInstance = new MyAction()
zySdk.services.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 */
tootip: `The meme image`, /* Tooltip displayed in Zyllio Studio */
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 zySdk.services.registry service
const myFunctionInstance = new Myfunction()
zySdk.services.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) */
tootip: `The date displayed`, /* Tooltip displayed in Zyllio Studio */
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 zySdk.services.registry service
zySdk.services.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
Component and Actions may need to interact with application runtime using zySdk.services.runtime service
zySdk.services.runtime.navigate(screen)
zySdk.services.runtime.reset()
zySdk.services.runtime.navigate(screen)
zySdk.services.runtime.back()
const screenId = zySdk.services.runtime.getCurrentScreenId()
Triggers the flow transition defined by the Zyllio Studio user
zySdk.services.runtime.triggerTransition(element)
A component or an action may need to access the property values. For instance, a component may need to get the Table assigned by the Zyllio Studio user
zySdk.services.component to retrieve property valuesproperties argument passed to execute method// Action use case
const propertyValue = properties.find(p => p.id === 'table')
// Component use case
const propertyValue = zySdk.services.component.getPropertyValue(this, 'table')
// Cast the property accordingly, here it is a Table property value
const tableId = (propertyValue as TablePropertyValueModel).tableId
A mobile appliction uses data to hold user selections accross the screen flow. For example, a product item could be selected or a phone number could be enterered
Accessing data is supported by 2 services
zySdk.services.component to retrieve property valueszySdk.services.dictionary to read / write / monitor data dictionary// Action use case
const propertyValue = properties.find(p => p.id === 'value')
// Component use case
const propertyValue = zySdk.services.component.getPropertyValue(this, 'value')
const value = zySdk.services.dictionary.getValue(propertyValue)
// Action use case
const propertyValue = properties.find(p => p.id === 'value')
// Component use case
const propertyValue = zySdk.services.component.getPropertyValue(this, 'value')
zySdk.services.dictionary.setValue(propertyValue, newValue)
The intent is to get a notification when a data has changed likely from another component or action
// Action use case
const propertyValue = properties.find(p => p.id === 'value')
// Component use case
const propertyValue = zySdk.services.component.getPropertyValue(this, 'value')
zySdk.services.dictionary.onChange(propertyValue, () => {
// Code that updates the component
})
A component has access to Zyllio database, made of tables, through the zySdk.services.storage service. This is an overview, please refer to Zyllio SDK Reference API for more details
await zySdk.services.storage.createRow(tableId, data)
await zySdk.services.storage.updateRow(tableId, rowId, data)
Method 1 High level API : This convenient API supports tables, relations, filters and sorts
const list: ListItemsModel = await zySdk.services.list.retrieveData(propertyValue)
Method 2 Low level API : This API returns raw data not filtered and sorted. Relation table needs to be solved before using it
const rows: TableRowsModel = zySdk.services.storage.retrieveRows(tableId)
await zySdk.services.storage.deleteRow(tableId, rowId)
To inform a user, a component or action could display a message box using zySdk.services.dialog service
zySdk.services.dialog.show({
text: `Field Email is invalid`,
title: 'Error'
})
To inform a user a long process is happening like retrieving remote data, a component or an action could use zySdk.services.loading service
zySdk.services.loading.show()
// Doing long process
zySdk.services.loading.hide()
Zyllio team is available for any support, feature requests and questions