.html file defines the how the node appears with the editor. It
contains three distinct part, each wrapped in its own
the main node definition that is registered with the editor. This defines
things such as the palette category, the editable properties (
the edit template that defines the content of the edit dialog for the node.
It is defined in a script of type
to the type of the node.
the help text that gets displayed in the Info sidebar tab. It is defined in a
script of type
data-help-name set to the
type of the node.
A node must be registered with the editor using the
This function takes two arguments; the type of the node and its definition:
The node type is used throughout the editor to identify the node. It must
match the value used by the call to
RED.nodes.registerType in the corresponding
The type is also used as the label for the node in the palette. If the type ends with “ in” or “ out” this is stripped off label. For example, the “mqtt in” and “mqtt out” nodes are both labelled as “mqtt”, with the display of the input and output ports providing the “in” or “out” context.
The node definition contains all of the information about the node needed by the editor. It is an object with the following properties:
category: (string) the palette category the node appears in
defaults: (object) the editable properties for the node.
credentials: (object) the credential properties for the node.
inputs: (number) how many inputs the node has, either
outputs: (number) how many outputs the node has. Can be
color: (string) the background colour to use.
paletteLabel: (string|function) the label to use in the palette.
label: (string|function) the label to use in the workspace.
labelStyle: (string|function) the style to apply to the label.
inputLabels: (string|function) optional label to add on hover to the input port of a node.
outputLabels: (string|function) optional labels to add on hover to the output ports of a node.
icon: (string) the icon to use.
align: (string) the alignment of the icon and label.
oneditprepare: (function) called when the edit dialog is being built. See custom edit behaviour.
oneditsave: (function) called when the edit dialog is okayed. See custom edit behaviour.
oneditcancel: (function) called when the edit dialog is cancelled. See custom edit behaviour.
oneditdelete: (function) called when the delete button in a configuration node’s edit dialog is pressed. See custom edit behaviour.
oneditresize: (function) called when the edit dialog is resized. See custom edit behaviour.
onpaletteadd: (function) called when the node type is added to the palette.
onpaletteremove: (function) called when the node type is removed from the palette.
The edit template for a node describes the content of its edit dialog.
<script type="text/x-red" data-template-name="node-type"> <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> <div class="form-tips"><b>Tip:</b> This is here to help.</div> </script>
There are some simple conventions to follow:
form-rowshould be used to layout each row of the dialog.
<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.
oneditpreparecan be used to attach any event handlers on the dialog elements.
More information on how the edit template is used is available here.
When a node is selected, its help text is displayed in the info tab. This should provide a meaningful description of what the node does. It should identify what properties it sets on outgoing messages and what properties can be set on incoming messages.
The content of the first
<p> tag is used as the tooltip when hovering over
nodes in the palette.
<script type="text/x-red" data-help-name="node-type"> <p>Some useful help text to introduce the node.</p> <h3>Outputs</h3> <dl class="message-properties"> <dt>payload <span class="property-type">string | buffer</span> </dt> <h3>Details</h3> <p>Some more information about the node.</p> </script>
A complete style guide for node help is available here.