Skip to main content
Home  › ... 2sxc Apps
Error Showing Content - please login as admin for details.
Error Showing Content - please login as admin for details.

Customize Edit UI/UX

Tutorial Home

2sxc Custom Input Fields (11.02+)

2sxc 11 makes it very easy to create custom input fields using standard WebComponents. This example shows the most basic case - just a dummy message (so not a real input field).

You can use it to learn about things like:

  1. Naming conventions for where to put the files
  2. Naming conventions for the tagName
  3. Using customElements.define(...) to register your element
  4. How web components use constructor() and making sure you have the super() call there
  5. Using connectedCallback() and disconnectedCallback() to init/destroy your component

So just have a look and discover how simple everything can be 🚀.


Important: The feature "Public Use of Edit Form" is disabled

The feature is needed for anonymous users to use the Edit Form. Register your site here https://patrons.2sxc.org/ to get access to the feature.

Basic Hello-World Custom Field

This example shows a dummy-field which doesn't allow editing, but will just show a message.
Hit this edit button to have a look:

    Important: We opened permissions that you can experience the edit dialog - so you can save, but it will just create draft data 😉.

    Source of [App]/system/field-empty-app-hello-world/index.js

    Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

    /*
      This examples shows a plain JS WebComponent that will just show some messages
      This is just to demonstrate how such a component is built.
    */
    
    // always use an IFFE to ensure you don't put variables in the window scope
    (() => {
      const tagName = 'field-empty-app-hello-world';
    
      class EmptyHelloWorld extends HTMLElement {
        
        /* Constructor for WebComponents - the first line must always be super() */
        constructor() {
          super();
          console.log('FYI: EmptyHelloWorld just constructed!');
        }
    
        /* connectedCallback() is the standard callback when the component has been attached */
        connectedCallback() {
          this.innerHTML = 'Hello <em>world</em>!';
          console.log('FYI: EmptyHelloWorld just got connected!');
        }
    
        /** disconnectedCallback() is a standard callback for clean-up */
        disconnectedCallback() {
          console.log('FYI: EmptyHelloWorld getting disconnected - nothing to clean up');
        }
      }
    
      // Register this web component - if it hasn't been registered yet
      if (!customElements.get(tagName)) customElements.define(tagName, EmptyHelloWorld);
    })();