Introduction
Required module
Required module: App engine - UI Components. Check your modules at Admin > Licenses. To obtain this module, contact your IXON account manager or IXON distributor.
In its most basic form, a UI Component consists of two files:
- A JavaScript file that defines a Web Component
- A Manifest file named
manifest.json
which contains:
- Reference to said JavaScript file
- Version number
- Settings object for at least one application type (sheet, card, or report)
- Input properties (if any)
- Optional An SVG file named
icon.svg
Component SDK
The Component SDK has been created to support the development of UI Components. The Component SDK makes the development of UI Components easy and secure as it has the following advantages:
- It has an integrated versioning system
- Components can be tested before they are deployed. This can also be done locally
- The UI Components themselves are hosted in IXON Cloud
- Working locally makes the development of UI Components quicker
The Component SDK consists of the following elements:
- Project workspace boilerplate
- Built-in support for frameworks (component wrapping)
- Component starter templates
- Simulator app (ComponentContext with mock-data)
- Deployment and publishing tools for automation
The SDK is described in the section Component SDK.
Hello world example
Below is a code example of a hello-world UI Component:
const template = document.createElement('template');
template.innerHTML = '<h1>Hello, World!</h1>';
class HelloWorld extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hello-world', HelloWorld);
{
"main": "hello-world.js",
"version": "1",
"sheetSettings": {
"minCols": 3,
"minRows": 2
},
"inputs": []
}
Using a framework
As shown in the hello-world example above, a UI Component can be written in plain JavaScript. However, if you're looking to add more complexity, it may become helpful to use a framework that's focussed on building components which can be wrapped into a custom element. Both Vue and Svelte are good candidates, which happen to be supported by our own Component SDK, but there are many other tools out there. Pick your own flavour!
Embedded components
The Component SDK builders don't support embedded components. This means you can't use a Svelte component in your top-level Svelte component or a Vue component in your top-level Vue component.
Adding functionality
The Component Context API is the entrypoint for providing data and functionality to your UI Component.
Updated 16 days ago