Form ui-form

Adds a form to user interface which helps to collect multiple value from the user on submit button click as an object in msg.payload.

Properties

Prop	Dynamic	Description
Group		Defines which group of the UI Dashboard this widget will render in.
Size		Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
Label	✓	A label shown before the form rows.
Options	✓	A list of the rows presented in the form. Each row has the following properties: Label: A label shown in the form row. Name: The name of the form element, which will be used as the key in the msg.payload object. Type: The type of input to display. Options - text | multiline | password | email | number | checkbox | switch | date | time Required: Whether the form element is required to be filled in before the form can be submitted.
Buttons		The text shown on each of the form's buttons. If "cancel" text is left empty, then no cancel button will be shown.
Two Columns		Will render the form as a two-column layout.
Reset on Submit		If checked, the form will be reset to an empty state after the form is submitted.
Topic		Defines how to compute the topic, included in the `msg` object, when the form is submitted.

Dynamic Properties

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures
Label	msg.ui_update.label	String
Options	msg.ui_update.options	Array<Object>
Class	msg.class	String

Populating Form Data

If you want to set defaults, or pre-fill values in your form, you can do so by passing a msg.payload value. This value should be an object, where each key represents the key of a form element, and the value represents the default value for that element.

Foe example, if you want to pre-fill a form with a "text" field, with a name, "first_name", you can pass the following msg:

msg.payload = {
    "first_name": "John"
}

Defining Form Elements (Options)

If you want to override the configuration for your ui-form, and provide details of your elements after your Node-RED flow has been deployed, you can do so by passing a msg.ui_update.options value. This value should be an array of objects, where each object represents a form element. Each object should have the following properties:

Element: Text

{
    "type": "text",
    "label": "Name",
    "key": "name",
    "required": true
}

Element: Multiline

{
    "type": "multiline",
    "label": "Name",
    "key": "name",
    "required": true,
    "rows": 4
}

Element: Password

{
    "type": "password",
    "label": "Password",
    "key": "password",
    "required": true
}

Element: Email

{
    "type": "email",
    "label": "E-Mail Address",
    "key": "email",
    "required": true
}

Element: Number

{
    "type": "number",
    "label": "Age",
    "key": "age",
    "required": true
}

Element: Checkbox

{
    "type": "checkbox",
    "label": "Subscribe to Newsletter",
    "key": "newsletter"
}

Element: Switch

{
    "type": "switch",
    "label": "Enable Notifications",
    "key": "notifications"
}

Element: Date

{
    "type": "date",
    "label": "Date of Birth",
    "key": "dob",
    "required": true
}

Element: Time

{
    "type": "time",
    "label": "Time of Birth",
    "key": "tob",
    "required": true
}

Example

Example of a rendered form in a Dashboard.