Introduction
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:
- A JavaScript file that defines a custom element
- 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)
- 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.
Updated 2 months ago