Add placeholder text

Placeholder text is a standard configuration field for most out-of-the-box form controls. Placeholder text allows form designers to include a suggestion, instruction, or example to the user who is submitting the form.

Jump to:

To enable placeholder text for your plugin:

  1. Add the standardProperties.placeholder property to your plugin's getMetaConfig() function.

    2. This enables the Placeholder field in the plugin's configuration panel, so Form designers can add the placeholder text.

  2. Add the static property of placeholder to your plugin's definition.

    3. This will store the value from the Placeholder configuration field when it is passed to your plugin.

  3. Add the implementation of placeholder text to your plugin's code.

    4. This defines how your plugin treats the placeholder text value.

Note: Form plugins does not provide a default behavior for placeholder text. If you do not define an implementation, placeholder text will not appear.

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

Add the standard field property

Add the standardProperties.placeholder property to enable the Placeholder field in the plugin's configuration pane:

  1. In the getMetaConfig() function, add a standardProperties object if one is not already defined.
  2. Inside the standardProperties object, add the property placeholder with a value of true.
static getMetaConfig(): Promise<NintexPlugin> | NintexPlugin {
    return {
      //...					
      standardProperties: {
        placeholder: true,
      },
    };
  }

Add the static placeholder property

Add a static property to your plugin class to store the placeholder value when it is passed from the configuration field.

export class ExampleTextfield extends LitElement {

  static properties = {
    placeholder: {}
  };
   
  //...
}

Add the implementation

In your plugin's code, add the implementation to use the placeholder value provided by the configuration field.

The provided example uses the Lit framework. Your implementation may be different.

render() {
  return html` <input
    id="textfield"
    placeholder=${this.placeholder}
    @change="${() => this.onChange()}"
  />`;
}