Node edit dialog

The edit dialog for a node is the main way a user can configure the node to do what they want.

The dialog should be intuitive to use and be consistent in its design and appearance when compared to other nodes.

The edit dialog is provided in the node’s HTML file, inside a <script> tag:

<script type="text/html" data-template-name="node-type">
    <!-- edit dialog content  -->
</script>

• The <script> tag should have a type of text/html - this will help most text editors to provide proper syntax highlighting. It also prevents the browser from treating it like normal HTML content when the node is loaded into the editor.
• The tag should have its data-template-name set to the type of the node its the edit dialog for. This is how the editor knows what content to show when editing a particular node.

The edit dialog will typically be made up from a series of rows - each containing a label and input for a different property

<div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
</div>

• Each row is created by a <div> with class form-row
• A typical row will have a <label> that contains an icon and the name of the property followed by an <input>. The icon is created using an <i> element with a class taken from those available from Font Awesome 4.7.
• The form element containing the property must have an id of node-input-<propertyname>. In the case of Configuration nodes, the id must be node-config-input-<property-name>.
• The <input> type can be either text for string/number properties, or checkbox for boolean properties. Alternatively, a <select> element can be used if there is a restricted set of choices.

Node-RED provides some standard UI widgets that can be used by nodes to create a richer and more consistent user experience.

Buttons

To add a button to the edit dialog, use the standard <button> HTML element and give it the class red-ui-button.

<button type="button" class="red-ui-button">Button</button>

<button type="button" class="red-ui-button red-ui-button-small">Button</button>

<span class="button-group">
<button type="button" class="red-ui-button toggle selected my-button-group">b1</button><button type="button" class="red-ui-button toggle my-button-group">b2</button><button type="button" class="red-ui-button toggle my-button-group">b3</button>
</span>

$(".my-button-group").on("click", function() {
    $(".my-button-group").removeClass("selected");
    $(this).addClass("selected");
})

Inputs

For simple text entry, the standard <input> element can be used.

In some cases, Node-RED provides the TypedInput widget as an alternative. It allows the user a way to specify the type of the property as well as its value.

For example, if a property could be a String, number or boolean. Or if the property is being used to identify message, flow or global context property.

It is a jQuery widget that requires code to be added to the node’s oneditprepare function in order to add it to the page.

Full API documentation for the TypedInput widget, including a list of the available built-in types is available here.

<input type="text" id="node-input-name">

<input type="text" id="node-input-example1">
<input type="hidden" id="node-input-example1-type">

$("#node-input-example1").typedInput({
    type:"str",
    types:["str","num","bool"],
    typeField: "#node-input-example1-type"
})

<input type="text" id="node-input-example2">

$("#node-input-example2").typedInput({
    type:"json",
    types:["json"]
})

<input type="text" id="node-input-example3">
<input type="hidden" id="node-input-example3-type">

$("#node-input-example3").typedInput({
    type:"msg",
    types:["msg", "flow","global"],
    typeField: "#node-input-example3-type"
})

<input type="text" id="node-input-example4">

$("#node-input-example4").typedInput({
    types: [
        {
            value: "fruit",
            options: [
                { value: "apple", label: "Apple"},
                { value: "banana", label: "Banana"},
                { value: "cherry", label: "Cherry"},
            ]
        }
    ]
})

<input type="text" id="node-input-example5">

$("#node-input-example5").typedInput({
    types: [
        {
            value: "fruit",
            multiple: "true",
            options: [
                { value: "apple", label: "Apple"},
                { value: "banana", label: "Banana"},
                { value: "cherry", label: "Cherry"},
            ]
        }
    ]
})

Multi-line Text Editor

Node-RED includes a multi-line text editor based on the Ace code editor, or if enabled via user settings, the Monaco editor

Multi-line Text Editor

In the following example, the node property that we will edit is called exampleText.

In your HTML, add a <div> placeholder for the editor. This must have the css class node-text-editor. You will also need to set a height on the element.

<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-example-editor"></div>

In the node’s oneditprepare function, the text editor is initialised using the RED.editor.createEditor function:

this.editor = RED.editor.createEditor({
   id: 'node-input-example-editor',
   mode: 'ace/mode/text',
   value: this.exampleText
});

The oneditsave and oneditcancel functions are also needed to get the value back from the editor when the dialog is closed, and ensure the editor is properly removed from the page.

oneditsave: function() {
    this.exampleText = this.editor.getValue();
    this.editor.destroy();
    delete this.editor;
},
oneditcancel: function() {
    this.editor.destroy();
    delete this.editor;
},