Get started with Form plugins
Form plugins are web components that adhere to the Form plugin contract. You can use any modern framework to build your web component. We recommend Lit as a fast, light-weight framework.
What is Lit?
Lit is a library for building lightweight web components.
To learn more about developing with Lit, see:
The Lit documentation also provides additional tutorials and a development playground.
For resources in choosing your framework, see Choosing a framework.
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.
Form plugins contract
With the Form plugins contract, you can define:
- How the plugin appears in the Form designer, including its name, control group, icon, and what search terms should match in the control toolbox.
- How the plugin appears in the Form canvas, such as its minimum size or whether it requires a full row.
- Which standard form control properties (such as description, visibility, or whether the field is required) can be configured in the Form designer configuration panel or in rules.
- Custom properties that are displayed in the Form designer when configuring the plugin.
- Which of these custom properties are required when configuring the plugin, and which cannot be altered by rules or variables.
Once you have created your web component, add the contract:
-
Download and install the @nintex/form-plugin-contract npm package with the command npm install @nintex/form-plugin-contract.
- Define your contract properties using the PluginContract type.
- controlName, which defines the name used for the plugin in the Form designer.
- version, which defines which version of the Form plugins API your plugin uses.
- Define custom properties using the PluginProperty type.
- Add a static asynchronous function getMetaConfig(), which returns the contract properties.
The only contract properties that are required are:
All other properties are optional.
For more information on contract properties, see Plugin properties reference.
Looking for examples? See our tutorials on some basic Example plugins.
Customize your plugin
If the user submitting your form needs to interact or provide a value to your plugin, you can:
- 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.
See a complete list of properties and how they affect your plugin in the Plugin properties reference.
Add your plugin
Plugins can be:
- Uploaded to your Nintex Automation Cloud tenant.
- Uploaded to an external hosting service and registered in your Nintex Automation Cloud or Nintex Workflow for Office 365 tenant.
If you are using an external hosting provider, make sure CORS is enabled. See Host a plugin.
See Add a plugin.
Note: If you want to add your plugin to your Nintex Automation Cloud tenant, make sure your tenant administrator has enabled Form plugins in your tenant.
Drag-and drop your plugin into a form design to test your plugin. See Designing a form with plugins.
For more information on creating forms, see: