📘

The process steps to use custom components are described in the support article Custom Components.

In its most basic form, a custom component consists of two files:

1. A JavaScript file that defines a custom element
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 or card)
• Input properties (if any)

3. Optional An SVG file named icon.svg

Hello world example

Below is a code example of a hello-world custom 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 custom 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!

Adding functionality

The Component Context API is the entrypoint for providing data and functionality to your custom component.