Input field extension

Custom input fields are App Extensions which live inside your App and extend the edit UI. They are plain JavaScript WebComponents which the 2sxc edit dialog can load and talk to.

This page shows how to create a custom input field in JavaScript using a basic number slider as example.

What are input field extensions?

Input Field Extensions let you add your own custom input controls They are small Components that run inside your App and replace or enhance normal fields like text-boxes or dropdowns.

Use them when you want a field, for example sliders, color pickers, tag selectors, or anything the built-in fields cannot do.

1. Folder and Naming

Create the extension in /extensions/ using this pattern:

field-[data-type]-[name]

Examples:

extensions/field-number-slider-basic
extensions/field-string-app-color-picker
extensions/field-boolean-icons

Rules:

Must start with field-
Second part must be the data type (string, number, boolean, ...)
Use only lowercase and dashes

2. Code the Extension Entry

Open App Settings -> App Extensions and edit your extension. In Input Fields Configuration, define which JavaScript files to load - as of now always index.js.

Write code like this in index.js:

(() => {

  // This must match the tag name used in the extension definition, and start with "field-"
  const tagName = "field-string-example-basic";

  // Minimal HTML for the component
  const html = `<input type="text" />`;

  class BasicField extends HTMLElement {
    connectedCallback() {
      
      // Connector given by 2sxc
      const connector = this.connector;
      this.field = connector.field;

      // Get field settings
      const settings = connector.field?.settings || {};
      
      // Render input
      this.innerHTML = html;

      this.input = this.querySelector("input");

      // Forward user input back to the 2sxc field API
      this.onInput = () => {
        this.field?.setValue(this.input.value || null);
      };
      this.input.addEventListener("input", this.onInput);
    }

    disconnectedCallback() {
      // Clean up when component is removed
      this.input.removeEventListener("input", this.onInput);
    }
  }

  customElements.define(tagName, BasicField);
})();