Best practices

To ensure the best possible experience for your form designers and end-users, we recommend the following best practices:

  • If creating a plugin with multiple form controls, export each control into a separate JavaScript file for faster loading times.
  • Use minified JavaScript.
  • Avoid building plugins using JQuery. Form plugins uses the Shadow DOM, which JQuery does not support.

    • See youmightnotneedjquery.com for help on migrating existing functionality away from JQuery.

  • 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.

Note:  Plugins using different versions of React may cause unexpected behavior when they are loaded together in a form. For a React-like framework that offers .jsx and hooks, see Atomico.

Standards and accessibility

Follow established best practices for creating accessible web components. We recommend your plugins meet the following checklist, at minimum:

Code structure:

  • Your plugin renders clear, semantic HTML.
  • Your plugin uses ARIA tags and localizes them where appropriate.
  • Any images or icons your plugin uses either:
    • Are hidden from screen readers.
    • Have appropriate metadata such as an ‘alt’ attribute.

Interactions:

  • Your plugin's interactions work with mouse, touch, and keyboard events.
  • If your plugin contains multiple controls, the navigation order when using keyboard navigation is logical.
  • Your plugin highlights a component's focus state when using keyboard navigation.
  • Your plugin clearly notifies the user of error states.
  • Your plugin applies reasonable defaults when it benefits accessibility.
  • If your plugin provides a sortable table, at least one column is always sorted by default.

    • If no column is sorted, the aria-sort attribute may not announce a table is sortable to screen readers.

Visual presentation:

  • Your plugin is usable at zoom levels of 50%, 100%, and 200%.
  • Your plugin's color contrast meets an AAA rating.

    • You can test your contrast levels using WebAIM's Contrast Checker.

  • Your plugin supports CSS media features such as high-contrast and dark or light modes.
  • Your plugin will disable animations when requested by a CSS media feature.

For more information, see the Accessibility page in the Nintex Automation Cloud help documentation.

Test your plugin using tools such as Lighthouse or the Dom Accessibility Inspector.

For more resources on web standards and accessibility, see:

CSS variables

Use the Nintex forms CSS variables to ensure your plugins blend seamlessly with Nintex forms. See Style plugins with CSS.

Plugin icons

The plugin icon is displayed in several sizes (28px, 48px, and 55px) in the Form designer. To keep your icons clear and easy to understand:

  • Use SVG format.
  • Use a square icon with a non-transparent background.
  • Create a simple design that is readable at 28px, 48px, and 55px.
  • Avoid drop-shadows, three-dimensional affects, or similar decorative elements.