Create a basic plugin using Lit

You can use any modern web component framework to build Form plugins. In this example, we will build a basic plugin in a single JavaScript file that displays some static HTML. We will build the standard web component first using Lit, and then add the Form plugin contract to convert it to a plugin.

Jump to:

Import the lit library

Create a JavaScript file.
Import the HTML element class we want to use from the Lit library CDN.


import { html,LitElement} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';

Define the web component

Define the web component as an extension of the HTML element we imported.
Add a variable elementName.

The elementName you choose will be used as the HTML tag for the plugin in the DOM, as well as to identify the plugin during the plugin registration. See Add a plugin.

Note: Your plugin element name must contain a hyphen - and must not start with ntx-, nwc-, nac-, or nintex-. These prefixes are reserved to prevent conflicts with Nintex elements. For best practice, use your organization's name as a prefix. For example, acme-custom-textfield.

Define your web component with customElement.define().


export class HelloWorld extends LitElement {

}

const elementName = 'hello-world';
customElements.define(elementName, HelloWorld);

Add the render function

Add a render function to return the HTML the plugin will display in the form.


export class HelloWorld extends LitElement {
  static properties = {
    who: {type: String},
  };
	
  constructor() {
    super();
    this.who = 'World';
  }						
							
  render() {
    return html`<p>Hello ${this.who}<p/>`;
  }
}
//...

Add the contract properties

In the web component class constructor, add an asynchronous static function getMetaConfig().
Return an object with the contract properties for your plugin.

Note: The controlName and version properties must be set for your plugin.

See Plugin properties reference for other properties.


export class CustomInput extends LitElement {
  
  static getMetaConfig() {
    return {
      controlName: 'Hello World',
      fallbackDisableSubmit: false,
      version: '1.2',
      properties: {
        who: {
          type: 'string',
          title: 'Who',
          description: 'Who to say hello to'
        }
      }
    };
  }						
  //...

}

The completed plugin


import { html,LitElement} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';
// define the component
export class HelloWorld extends LitElement {
  
  static properties = {
    who: {type: String},
  };
  
  // return a promise for contract changes.
  static getMetaConfig() {
    return {
      controlName: 'Hello World',
      fallbackDisableSubmit: false,
      version: '1.2',
      properties: {
        who: {
          type: 'string',
          title: 'Who',
          description: 'Who to say hello to'
        }
      }
    };
  }
  
  constructor() {
    super();
    this.who = 'World';
  }

  render() {
    return html`<p>Hello ${this.who}<p/>`;
  }
}

// registering the web component
const elementName = 'hello-world';
customElements.define(elementName, HelloWorld);

Upload and register your plugin

Upload this plugin to your hosting service and register it in your tenant. See:

What's next...

Now that you've completed a basic plugin, explore some more examples:

Create a simple textfield plugin, for a basic plugin that stores a value.
Create a plugin with React, to see the form plugin contract in a familiar framework.

If you want to jump straight in to create your own plugin, see how to:

Create a custom configuration field to allow your form designers to configure your plugin.
Store a value in an output variable to return a value to the form.
Add placeholder text to let your form designers provide guidance to users submitting forms.
Make your plugin read-only to ensure your plugin clearly indicates when its value is not editable.
Style plugins with CSS to control the look of your plugin using.

Or see the Plugin properties reference.