Create an iframe plugin

In this example, we will build an iframe to display web content from a URL. We will create one JavaScript file for the iframe web component and a second JavaScript file to import the Form plugins contract properties.

Inside the contract properties, we will define the configuration fields that the form designer will use to specify the height of the iframe as well as the URL the iframe should load content from.

Jump to:

You can download the source for this example from the repository.

Create the iframe web component

Create a basic iframe web component in your chosen framework. This example uses the Lit 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.


import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { styleMap } from "lit-html/directives/style-map.js";

@customElement("form-plugin-iframe")
export class ZwcIframe extends LitElement {
  // Define scoped styles right with your component, in plain CSS
  static styles = css`
    :host {
      height: 100%;
      width: 100%;
      display: block;
    }
    .frame {
      display: inline-block;
      height: 100%;
      width: 100%;
      background-color: transparent;
      border: none;
    }
  `;

  @property()
  name: string = "Hello";

  @property()
  title: string = "Hello";

  @property()
  src: string = "https://stackoverflow.com/";

  @property({ type: Number})
  height: number = 500;

  // Render the UI as a function of component state
  render() {
    console.log("Props", {
      name: this.name,
      title: this.title,
      src: this.src,
      height: this.height,
    });

    let styles = { height: this.height+'px' };

    return html`<iframe
      class="frame"
      style=${styleMap(styles)}
      .name=${this.name}
      allow="geolocation *; microphone; camera"
      .title=${this.title}
      src=${this.src}
    ></iframe>`;
  }
}

Create the contract

Create another JavaScript file iframe-config.js.
Import the npm package.
Create and export a constant config object.


import './query-assigned-elements-214d6340.js';
import { Z as ZincVersion } from './zinc-api-f0859f9f.js';

const config = {
  
};

export { config };

Define the basic contract configuration

The basic contract configuration defines basic information about your plugin, such as the author and version, and how the plugin should appear in the Form designer.

We will add:

The plugin author and the version of the Forms plugin API it is using.
A title and description for the plugin in the Form designer.
The icon for the plugin and the control group it should be displayed in in the Form designer toolbox.

We will also add a property to define the fallback behavior if the plugin does not load correctly.

Inside the config object:

Add a pluginAuthor property with the value John Citizen .
Add a version property with the value ZincVersion.CurrentVersion .

This uses the version defined in the Form plugin contract.

Add a title property with the value Iframe .
Add a description property with the value Iframe component which renders content from a source URL .
Add an iconUrl property with the value rich-text .

This uses the icon from the standard rich-text form control.

Add a groupName property with the value Visual .

The plugin will appear in a group called Visual in the Forms designer toolbox.

Add a fallbackDisableSubmit property with the value false .

If the plugin does not load correctly, end-users may still submit the form.

For more information on these properties, see Plugin properties reference.

  //...
const config = {
  title: 'Iframe',
  fallbackDisableSubmit: false,
  description: 'Iframe component which renders content from a source URL',
  iconUrl: 'rich-text',
  groupName: 'Visual',
  pluginAuthor: 'John Citizen',
  version: ZincVersion.CurrentVersion,
};
//...

Define the standard configuration fields

Standard fields represent configuration fields that are available to all form controls. You can control which standard fields are available to be configured by form designers by defining the properties here.

Note: Defining a standard field as true does not set the field value to true. For example, setting readOnly to true does not make the plugin read only: it ensures the "read only" configuration field is available to the form designer.

Add an object called standardProperties.
Inside the standardProperties object:

Define a readOnly property as true.

This property allows the plugin to be configured as read-only when used in a form design.

Define a required property as true.

This property allows the form designer to designate the plugin as being required when designing the form.

Define a description property as true.

This property allows the form designer to provide a description below the plugin when the form is rendered to the end-user.

For more information on standard properties, see Standard fields

//...
const config = {
  //...
  standardProperties: {
    readOnly: true,
    required: true,
    description: true
  }
};
//...

Define the custom configuration properties

You can add additional fields that are used to configure your plugin. In this example, we're adding two fields so that the designer can specify the source URL they want to display and the height of the iframe.

Custom fields are added using the properties object.

Inside the config object, add a properties object.
In the properties object, add an object called src with three properties:

type, with a value of string.
title, with a value of Source URL.

The title is displayed as a label for the configuration field.

description, with a value of URL of the content to display. Note that some sites may not allow content to be rendered in an iframe.

The description is displayed below the configuration field.

In the properties object, add an object called height, with three properties:

type, with a value of string.
title, with a value of Height.
description, with a value of Height of the iframe.

For more information on defining custom configuration fields, see Custom fields.

//...
const config = {
  //...
  properties: {
    src: {
      type: 'string',
      title: 'Source URL',
      description: 'URL of the content to display. 
Note that some sites may not allow content to be rendered in an iframe'
    },
    height: {
      type: 'string',
      title: 'Height',
      description: 'Height of the iframe'
    }
  }
};
//...

The complete plugin contract configuration

//...
import './query-assigned-elements-214d6340.js';
import { Z as ZincVersion } from './zinc-api-f0859f9f.js';

const config = {
  title: 'Iframe',
  fallbackDisableSubmit: false,
  description: 'Iframe component which renders content from a source URL',
  iconUrl: 'rich-text',
  groupName: 'Visual',
  pluginAuthor: 'John Citizen',
  version: ZincVersion.CurrentVersion,
  properties: {
    src: {
      type: 'string',
      title: 'Source URL',
      description: 'URL of the content to display. Note that some sites may not allow content to be rendered in an iframe'
    },
    height: {
      type: 'string',
      title: 'Height',
      description: 'Height of the iframe'
    }
  },
  standardProperties: {
    readOnly: true,
    required: true,
    description: true
  }
};

export { config };

Build and register the plugin

Your plugin is ready to upload and test:

Upload your files to your hosting service.
Ensure CORS is enabled where your plugins are hosted.

Note: If you want to add this plugin to your Nintex Automation Cloud tenant, ensure Form plugins are enabled in your tenant by your administrator.

See Add a plugin.