TypedInput Widget

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
• Methods
• Events
• Types
• Examples
• Runtime handling of typed values

Options

default

Type: String

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

$(".input").typedInput({
    default: "msg"
});

types

Type: Array

Sets the list of types the element will offer.

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:

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

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"
});

When used in a Node-RED node, this value can be stored as a node property by adding an entry for it in the node’s defaults object. This ensures the type is saved along with the value in the node configuration.

<div class="form-row">
    <label>Example:</label>
    <input type="text" id="node-input-myField">
    <input type="hidden" id="node-input-myFieldType">
</div>

RED.nodes.registerType('example', {
    defaults: {
        myField: { value: "" },
        myFieldType: { value: "str" }
    },
    ...
    oneditprepare: function () {
        $("#node-input-myField").typedInput({
            typeField: "#node-input-myFieldType"
        });
    }
})

Methods

disable( state )

Since Node-RED 1.2.7

Disable the typedInput when it is currently enabled.

The optional state parameter can be used to toggle the disabled/enabled state of the typedInput. If state is true, the element will be disabled, otherwise it will be enabled.

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

disabled()

Since Node-RED 1.2.7

Returns: Boolean

Gets whether the typedInput is currently disabled or not.

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

enable()

Since Node-RED 1.3.3

Enable the typedInput when it is currently disabled.

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

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',['str','num']);

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.

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

Events

change( event, type, value )

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

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

Note: The value property was added in Node-RED 1.3

Types

TypeDefinition

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

It is an object with the following properties:

Examples

Built-in String, Number, Boolean types

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

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

Message Properties

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

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

Flow/Global Context Properties

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

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

Select from a list of options

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

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

Select multiple items from a list of options

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

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

Runtime handling of typed values

Due to the way the typedInput enhances a regular HTML <input>, its value is stored as a string. For example, booleans are stored as "true" and "false".

When stored as node properties, it is necessary for the runtime part of the node to parse the string to get the typed value.

A utility function is provided to handle the built-in types provided by the TypedInput.

RED.util.evaluateNodeProperty(value, type, node, msg, callback)

For most types, the function can be used synchronously without providing a callback.

const result = RED.util.evaluateNodeProperty(value, type, node)

For msg type, the message object should also be provided:

const result = RED.util.evaluateNodeProperty(value, type, node, msg)

To handle flow and global context types, the node needs to be provided as well as a callback function due to the asynchronous nature of context access:

RED.util.evaluateNodeProperty(value, type, node, msg, (err, result) => {
    if (err) {
        // Something went wrong accessing context
    } else {
        // Do something with 'result'
    }
})