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:

1. A JavaScript file that defines a Web Component
2. 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)

3. 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.