Editor UI widgets¶

This section is largely citing the Node-RED documentation.

A set of jQuery widgets are available that can be used within a node’s edit template.

TypedInput - a replacement for a regular <input> that allows the type of the value to be chosen, including options for string, number and boolean. Used extensively in the core Node-BLUE nodes.
EditableList - an editable list where the elements can be complex forms in their own right. Used by the core Switch and Change nodes.
SearchBox - an enhanced <input> for common usage around Search UX.
TreeList - a list to display tree-structured data.

TypedInput¶

A replacement for a regular <input> that allows the type of the value to be chosen, including options for string, number and boolean types.

Options¶

`default`

Type: String

If defined, sets the default type of the input if typeField is not set.

`types`

Type: Array

The value of the option is an array of string-identifiers for the predefined types and TypeDefinition objects for any custom types.

The predefined types are:

Identifier	Description
`msg`	a `msg.` property expression
`flow`	a `flow.` property expression
`global`	a `global.` property expression
`string`	a String
`re`	a Regular Expression
`int`	a Integer
`float`	a floating point number
`suntime`	time based on sun position (sunrise, sundown, ...)
`date`	the current timestamp
`time`	a `HH:MM[:SS]` input
`array`	a JSON Array with JSON editor
`arraySimple`	a JSON Array without JSON editor
`struct`	a JSON Object with JSON editor
`structSimple`	a JSON Object without JSON editor
`json`	a JSON String with JSON editor
`bin`	a Buffer with editor
`binSimple`	a Buffer without editor
`env`	an environment variable
`node`	a `node.` property expression
`cred`	a secure credential

$(".input").typedInput({
    types: ["msg","string"]
});

`typeField`

Type: CSS Selector

In some circumstances it is desirable to already have an <input> element to store the type value of the TypedInput. This option allows such an existing element to be provided. As the type of the TypedInput is changed, the value of the provided input will also change.

$(".input").typedInput({
    typeField: ".my-type-field"
});

Methods¶

`disable()`

Disable the TypedInput when it is currently enabled.

$(".input").typedInput('disable');

`disabled()`

Gets whether the TypedInput is currently disabled or not.

$(".input").typedInput('disabled');

`hide()`

Hide the TypedInput when it is currently visible.

$(".input").typedInput('hide');

`show`

Show the TypedInput when it is currently hidden.

$(".input").typedInput('show');

`type()`

Returns: String

Gets the selected type of the TypedInput.

var type = $(".input").typedInput('type');

`type(type)`

Sets the selected type of the TypedInput.

$(".input").typedInput('type','msg');

`types(types)`

Sets the list of types offered by the TypedInput. See the description of the types option.

$(".input").typedInput('types',['string','int']);

`validate()`

Returns: Boolean

Triggers a revalidation of the TypedInput's type/value. This occurs automatically whenever the type or value change, but this method allows it to be run manually.

var isValid = $(".input").typedInput('validate');

`value()`

Returns: String

Gets the value of the TypedInput.

var value = $(".input").typedInput('value');

`value(value)`

Sets the value of the TypedInput.

$(".input").typedInput('value','payload');

`width(width)`

Sets the width of the TypedInput. This must be used in place of the standard jQuery.width() function as it ensures the component resizes properly.

$(".input").typedInput('width', '200px');

Events¶

`change(type, value)`

Triggered when either the type or value of the input is changed.

$(".input").on('change', function(type, value) {} );

Types¶

`TypeDefinition`

A TypeDefinition object describes a type that can be offered by a TypedInput element.

It is an object with the following properties:

Property	Type	Required	Description
`value`	String	yes	The identifier for the type
`label`	String		A label to display in the type menu
`icon`	String		An icon to display in the type menu
`options`	Array		If the type has a fixed set of values, this is an Array of String options for the value. For example, `["true","false"]` for the boolean type.
`hasValue`	Boolean		Set to `false` if there is no value associated with the type.
`validate`	Function		A function to validate the value for the type.

Examples

Number type:

{
    value:"num",
    label:"number",
    icon:"red/images/typedInput/09.png",
    validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/
}

Boolean type:

{
    value:"bool",
    label:"boolean",
    icon:"red/images/typedInput/bool.png",
    options:["true","false"]
}

Timestamp type:

{
    value:"date",
    label:"timestamp",
    hasValue:false
}

EditableList¶

A replacement for a <ol> element where the items can be complex elements in their own right. Used by the core Switch and Change nodes.

TODO

Options¶

`addButton`

Type: Boolean | String

`addItem(row, index, data)`

Type: Function

`connectWith`

*Type: CSS Selector

`header`

*Type: DOM/jQuery object

`height`

Type: String | Number

`filter(data)`

Type: Function

`resize`

Type: Function

`resizeItem(row, index)`

Type: Function

`scrollOnAdd`

Type: Boolean

`sort(itemDataA, itemDataB)`

Type: Function

`sortable`

Type: Boolean | CSS Selector

`sortItems(items)`

Type: Function

`removable`

Type: Boolean

`removeItem(data)`

Type: Function

An enhanced <input> element that provides common features for a search input.

Options¶

`delay`

Type: Number

Sets the delay, in ms, after the last keystroke before a change event is fired.

`minimumLength`

Type: Number

Sets the minimum length of the search string.

Methods¶

`change()`

Trigger the change event on the search input.

$(".input").searchBox('change');

`count(value)`

Sets the value of the count label on the search box. This can be used to provide feedback to the user as to how many ‘things’ the search currently matches. The value is a string.

The standard pattern to follow is:

if the search box is empty, set it to the number of available items: "300"
if the search box is not empty, set it to the number of matching items, as well as the number of available items: "120 / 300"

If value is null, undefined or blank, the count field is hidden.

$(".input").searchBox('count', '120 / 300');

`value()`

Returns: String

Gets the current value of the search input.

var type = $(".input").searchBox('value');

`value(value)`

Sets the current value of the search input.

$(".input").searchBox('value','hello');

TreeList¶

Options¶

`data`

Type: Array

The initial data for the TreeList.

[
    {
        label: 'Local',
        icon: 'fa fa-rocket',
        children: [
            { label: "child 1"},
            { label: "child 2"}
        ]
    }
]

Each item can have the following properties:

Property	Description
`label`	The label for the item.
`id`	(optional) A unique identifier for the item
`class`	(optional) A CSS class to apply to the item
`icon`	(optional) A CSS class to apply as the icon, for example `"fa fa-rocket"`.
`selected`	(optional) if set, display a checkbox next to the item. Its state is set to the boolean value of this property
`children`	(optional) Identifies the child items of this one. Can be provided as an array if the children are immediately known, or as a function to get the children asynchronously. See below for details.
`expanded`	(optional) If the item has children, set whether to display the children

If the children property is provided as a function, that function should accept a single argument of a callback function. That callback function should be called with the array of child items. This allows for the items to be retrieved asynchronously, such as via HTTP request.

children: function(done) {
    $.getJSON('/some/url', function(result) {
        done(result);
    })
}

Methods¶

`data()`

Returns the data the TreeList is displaying.

If any items had the selected property set on them, its value will reflect the current checkbox state.

`data(items)`

Sets the data to be displayed by the list.

See the data for details of the items argument.

$(".input").treeList('data',[{label:"Colours"}]);

`empty()`

Removes all items from the list.

$(".input").treeList('empty');

`show(itemId)`

Ensures an item is visible in the list. The argument itemId must correspond with the id property of an item in the list.

Note

This currently only works for the topmost items in the list. It cannot be used to reveal items below the top level of the tree.

$(".input").treeList('show','my-red-item');

Events¶

`treelistselect(event, item)`

Triggered when an item is clicked. If the item had the selected property set originally, its value will be updated to reflect the state of the item’s checkbox.

$(".input").on('treelistselect', function(event, item) {
    if (item.selected) {
        // The checkbox is checked
    } else {
        // The checkbox is not checked
    }
});

`treelistmouseout(event, item)`

Triggered when the mouse moves out of the item.

$(".input").on('treelistmouseout', function(event, item) { });

`treelistmouseover(event, item)`

Triggered when the mouse moves over an item.

$(".input").on('treelistmouseover', function(event, item) { });

Editor UI widgets¶

TypedInput¶

Options¶

default

types

typeField

Methods¶

disable()

disabled()

hide()

show

type()

type(type)

types(types)

validate()

value()

value(value)

width(width)

Events¶

change(type, value)

Types¶

TypeDefinition

Examples

Number type:

Boolean type:

Timestamp type:

EditableList¶

Options¶

addButton

addItem(row, index, data)

connectWith

header

height

filter(data)

resize

resizeItem(row, index)

scrollOnAdd

sort(itemDataA, itemDataB)

sortable

sortItems(items)

removable

removeItem(data)

SearchBox¶

Options¶

delay

minimumLength

Methods¶

change()

count(value)

value()

value(value)

TreeList¶

Options¶

data

Methods¶

data()

data(items)

empty()

show(itemId)

Events¶

treelistselect(event, item)

treelistmouseout(event, item)

treelistmouseover(event, item)

`default`

`types`

`typeField`

`disable()`

`disabled()`

`hide()`

`show`

`type()`

`type(type)`

`types(types)`

`validate()`

`value()`

`value(value)`

`width(width)`

`change(type, value)`

`TypeDefinition`

`addButton`

`addItem(row, index, data)`

`connectWith`

`header`

`height`

`filter(data)`

`resize`

`resizeItem(row, index)`

`scrollOnAdd`

`sort(itemDataA, itemDataB)`

`sortable`

`sortItems(items)`

`removable`

`removeItem(data)`

`delay`

`minimumLength`

`change()`

`count(value)`

`value()`

`value(value)`

`data`

`data()`

`data(items)`

`empty()`

`show(itemId)`

`treelistselect(event, item)`

`treelistmouseout(event, item)`

`treelistmouseover(event, item)`