Standard Components
Here are some examples of different components use. These components are ready for use from the box, but you can install other ones from Marketplace.
Most components have descriptions and Help information - click on a component and explore the right sidebar.
A component`s usual properties are described in the Set Up Properties chapter.
Specific properties are described here by categories.
This component allows you to inject a message into a flow. You may inject it in the middle of the flow or initiate a new flow with this component.
You can specify time or time spans for repeating messages.
Useful for repeated tasks: backups initiation, dashboard info updating, etc. Or for starting time setting up: for example, you want lights to turn off at 9 am. Also useful to imitate some input to test a flow.
Most components have common properties. Explore Set Up Properties.
For the inject component, there are some specific ones:
msg.payload (1) - the main part of a message object that the component sends. Exists nearly in any component (as well as msg.topic) by default. Usually bears the main information in the message object.
msg.topic (2) - the part of the message object.
add (3) - this button allows you to add more parameters to the message object. Click add, give it a name and value. For example, 'msg.password' with 'QWERTY' value.
A message object property msg.payload value (4) - by default, this is timestamp - the number of seconds from a particular moment in 1970 till now. Click an arrow and choose a needed data type, then set a value to the parameter.
A message object property msg.topic value (5) - by default is empty, but it`s useful sometimes to name your message object, especially when you have more than one.
Inject once after checkbox (6) - allows you to postpone the first message sending.
Repeat option (6) - allows you to choose intervals of message sending, including the None option.
This component will help you to understand what exactly happens at any step of the flow.
Say you are composing an app that allows an operator to update some information in a database by clicking a button on a tablet after some event happens: "Hit the button when a basket is full." You compose an app, but you`d better check whether the message that goes to a file is correct before releasing the application.
Add a debug component to a certain place at the flow, deploy, and examine the debug window`s result. In this example, we use a user interface previewer (UI Viewer - right click on the {}....json file) to press a button that sends the message to the function component. Using the debug component, we see the result message of the function component.
You may choose (1) whether to show the complete message object (with all properties) or just the main property - payload (default).
In this example, first we use msg.payload to be shown, second - complete message object. In the complete message object, we see all the message properties (_msgrid id, payload, and topic). Clicking the arrow to expand the message object.
Another debug property shows the result in the status under the component (2).
The component monitors other components` tasks completion and passes their output to a triggered component. Useful for components without output sockets - such as http response or even debug component if you want.
The component`s properties are different ways to choose the flow components to monitor.
You can Select nodes (components) (1) right in the flow tab, seek by name (2), or choose from the list (3).
Give names to components in the flow - you will find them easily in complete component properties.
The complete component sends each monitored component`s output without changes in turn.
The component catches exceptions in your flow.
There are two modes for this component (1):
all nodes, when the catch component monitors all the components in the flow for errors, and you can choose to Ignore errors handled by other Catch nodes (components);
and selected nodes when it monitors selected ones. In this second mode, the selection options are the same as in a complete component.
When the component catches an error it stores the relevant information to a message object in the form of attached attributes:
error.message - the error message;
error.source.id - the id of the component that threw the error;
error.source.type - the type of the component that threw the error;
error.source.name - the name, if set, of the node that threw the error.
If you choose the complete msg object output option in the wired debug component, you will see these attributes in the debug tab. If we choose the msg.payload output option, we will see an error message.
The component reports status messages from other components.
There are two sources for this component reports: all nodes and selected nodes. In this second mode, the selection options are the same as in a complete component.
When the component status info it stores the report to a message object in the form of attached attributes:
status.text - the status text;
status.source.type - the type of the node that reported status;
status.source.id - the id of the node that reported status;
status.source.name - the name, if set, of the node that reported status.
If you choose the complete msg object output option in the wired debug component, you will see these attributes in the debug tab.
In the following example, we used a switch component to monitor its` status.
These components allow you to divide your flow into two or more flow tabs. Just connect a link out component with a link in on another flow tab, and it will be considered one flow.
This component carries an inscription and does not connect to other components.
Use it to add some information for developers to a flow appearance.
You need this component when you can`t find another one with the needed function. So, you can write this function to the function component. You need to know JavaScript to do this.
The change component provides changing a message.
This is a simple flow where a message payload is '1' and the topic is 'Start'.
You can change this payload value or topic in four ways:
1. Set - set a value to a message payload or topic just by setting a new one.
You can see that the first debug component shows the payload value '1', when the second one that goes after the change component shows '2'.
2. Change - change a message due to a specific condition.
Here we set the conditions: if msg.payload = 1 (number type), then change it to '2' (number type); if msg.topic = 'Start' (string tipe), then change it to 'Launch' (string type).
3. Delete - delete a message or a part (a parameter) of the message object.
4. Move - move a value to a new message property, removing the previous one at the same time. (Note: to show explicitly how we moved the value 'Start' from 'topic' to a new property 'name', we changed the output method in the debug components).
The switch component builds different paths due to conditions.
In this example, we imitate two kinds of messages from a sensor - '1' and '23'. Using the change components, we set 'Ok' to the payload after the message '1', and 'Alarm!' after the message '23'.
Imagine that it`s Ok when the sensor sends '1'. For any other number, we have to send an 'Alarm!' message. The switch component may take a message and send it to a route depending on different conditions. In our example - if '1' then to the 'Ok' route, if 'not 1' - to the 'Alarm!' one.
Many condition options in the component properties allow specifying conditions for a message`s further path. Each condition will make a new connection port on the component in turn.
Mapps the payload number due to properties set up. If the payload is not numeric tries to convert it - for example, string type '1' to numeric type '1'.
Choose the msg Property to scale (1). By default, it`s msg.payload.
Choose Action - the type of mapping (2).
Scale the message property - the number will be scaled due to input and target range ratio. For example, if the target range is x10 to the input range so the payload number will change to x10. '5' becomes '50' etc.
Scale and limit to target range - the number scales the same way, but the result will be in the target range. E. g. '12' becomes '120', but the result will be '100' due to the range maximum.
Scale and wrap within the target range - the result will be wrapped within the target range. So '12' becomes '120', but only '20' is wrapped within the target range.
Specify the input range (3).
Specify the target range (4).
You can round the result to the nearest integer (5).
In the example, we will examine the three action types for the input scale 0 to 10 and the target scale 0 to 100.
It can be used for percent converting, for example. Just choose the target range 0 to 100 and Scale the message property action type.
Sets the payload by embedding input values to a template. Useful for composing messages, emails, HTML pages, etc.
Choose the message context (from the component, the flow, or the global context variable) and the message object Property (1) to extract the data from.
In the Template field (2), specify the template for the output message. By default, it proposes you to use a simple expression with dynamic adding of the payload value. E.g., if you write Hello, {{payload}}! and send Bob payload to the component, the result will be Hello, Bob!
Double curly braces are the Mustache syntax for taking a corresponding variable. The template field also takes other valid syntax and allows you to Highlight the Syntax.
Choose Format (3) - if you choose Plain text, the output message will ignore template syntax.
Choose the Output format (4) - you may use the template for generating JSON or YAML content.
Delays each message passing through the node or limits the rate at which they can pass.
There are two modes (Action types) for the component`s properties.
The first mode is Delay each message (1). Allows to set up a delay span for each message that comes through. For example, to avoid flooding your email or a dashboard with messages.
You can set a Fixed delay interval, a Random one between some numbers, or use the msg.delay of each message (2).
Set up the delay interval for each message (3).
In the Rate Limit mode (4), the component limits the number of messages that come through at an interval.
Choose to rate the limit for All messages or For each msg.topic (5). For this second option, you can choose to release the most recent message for all topics or release the most recent message for the next topic.
Set up the Rate (6).
You can optionally discard intermediate messages as they arrive (7).
In the next example, we will inject a message with the array of numbers from 0 to 5, then split it to separate messages for each number and limit their arrival to 1 for a second.
The component sends a message when triggered and then sends the second one on some conditions.
Choose a message value to Send (1). By default, it`s a string type '1'. If you want it to send a message that arrived as a trigger, choose the existing msg object.
There are three modes for the component behavior after the first message sent (2):
wait for - the mode when you specify the time span (3) for the next message (5) release;
wait to be reset - when triggered, the component sends a message and blocks all subsequent ones before receives a reset (7) command. Then sends the message again and so on;
resend it every - when triggered, the component resends the same message in specified intervals (3).
In the wait for mode, you can choose to extend the delay if a new message arrives (4). E.g., the trigger node will 'stay calm' until it receives signals, and it sends an 'alarm' when signals vanish - as it works in watchdog devices.
The interval may be set up by an incoming msg.delay (4).
Specify a second message (5). You may choose to send the second message to a separate output (6).
There are two types of the reset command (7): incoming msg.reset with any value, or you can define the msg.payload value that resets the trigger component.
Choose whether it handles all messages or each one (8).
In the example, we send a message every 1 second, but it blocks all the following messages until we reset the condition by sending msg.reset.
Notice that the blue dot below the trigger component indicates the ongoing condition - in this example, it`s waiting for a reset message.
The component allows you to execute system commands or scripts and take their outputs. For example, you can run a copy command (for Windows) to copy a file to another directory.
Enter a system Command (1).
You may use the msg.payload as the command parameters (2); otherwise, you can write them in extra input parameters (3).
You can also use extra input parameters (3) to add some flags (extra parameters) to the command.
Choose the Output mode (4). In the exec mode, you can see the output after the command is completed; in the spawn mode, you will see the results line by line as the command runs.
Set up Timeutout to limit a command execution time (5).
Here we execute the echo command using the Command field, then extra input parameters field, and the msg.payload as the command parameter:
The exec component has 3 outputs: for a payload (the result of a command execution), for en error information if any, and for execution code (0 for success and any other for failure).
Report by exception (rbe) component passes on data only if the payload changes. For example, you send to a motor the command "on", and the rbe component will block all following "on`s" but will pass the "off" command.
Choose the blocking Mode (1) - there are several of them. The additional blocking properties will appear if you choose other modes.
Choose the Property (2) of the message object that the component passes (and blocks). By default, it`s payload.
In the following example, we send through the rbe component a payload value '1' multiply, but the node passes it only once and then blocks until we send '2'. And vice versa.
This is the category of components for a user interface. Main common appearance properties are described for the button component (and UI element), so explore it first.
The component creates a user interface button so that a human will be able to send a command to the system. For example: open the door, stop working immediately, turn on the light, reset all the tasks, etc.
On a UI you can group the elements - by using Groups (1) and Tabs.
Choose the size of the button on UI (2).
To add an Icon (3) to the button appearance you may use, for example, the Font Awesome library. Type fa- and an icon name from the site (try fa-fire). Or Angular Material Icons library - type mi- and an icon name (e.g. mi-work).
Label the button (4) to show its function to a user. For example, 'Empty Bin'.
Specify the tip (5) that will appear when a user hovers the button with a mouse cursor.
Change the default color (6) of button text and icon. You may simply type a color name ('blue', 'yellow', etc.) or use hex-color codes (from Color Hex Color Codes, for example).
Change the background color (7) with a hex color code, or you can simply type a color name ('blue', 'yellow', etc.)
Specify the payload of the message object (8) and its topic (9).
You can make the button get pressed each time when the component receives a message (10) - and you won`t need to use UI to test its work.
Give a name to the component (11). This name will appear on the workspace, but on the UI the button will show the Label (4) name.
The component creates a UI element with a dropdown list. Multiple options can be added.
The Placeholder (1) is an inscription on the field, that a user clicks to expand the list of options. By default, it`s Select option.
Options (2) - the list of labels from which a user chooses. The chosen label carries a message payload value. For example, the user chooses 'Use 1 robot' and the component sens the value '1'.
You can add as many options as you need (3).
You can allow choosing multiple options (4).
There is a possibility (5) to pass a message from input to output without changes.
The component creates a UI element, that allows a user to switch between two modes. For example, 'Turn On' and 'Turn Off'.
Although the component makes a UI switcher for manual switches, you can set up switching through the appropriate incoming payload (1). For example, if the component receives the payload value numeric '1' and it equals the On Payload setting (2), so the component will pass the message '1' and you`ll see 'On' mode on the UI.
You may set payload values for 'On' and "Off' modes (2). By default, it`s boolean true and false correspondently.
Creates a UI field for a user's text input.
Add a Tooltip (1) that pops up when you hover above.
Choose the input Mode (2) - and it will color in red if it is not a valid address and will return undefined.
Choose the Dalay in milliseconds - the time delay before sending the output. If you set 0, it will be sent after the user hits Enter or Tab.
You may preset the component to pass the message through to the output with no typing by the user.
We will do this in the example:
​
Choose the output color Format (1) - hex (in string) by default.
The color picker widget can be square and round shape (2).
Choose to display or not the hue (3) and lightness (4) sliders.
The color picker widget has elements that appear only on hover. But if the widget will be large enough you can choose to always show the swatch (5), the picker (6), and the value field (7).
The component can Send (9) the output each time when you click the picker, choose the color in the color field, and close the field by clicking the picker. Or it can sand the outputs many times while you are clicking the colors on the color field.
You can choose to send the Payload value (10) as a string or an object.
Displays a non-editable text UI field.
Specify the Value format (1) - what property of a message object to show in the text field. It must be in double curly braces. For example, {{msg.topic}} or {{msg.payload.facility}}. By default it`s {{msg.payload}}.
Choose Layout for the field (2).
Creates a gauge UI element that shows the numeric payload values.
Choose the UI representation Type (1) - Gauge, Donut, Compass, or Level.
Specify the Value representation format (2) - by default, it`s just a number. See more in Help on the sidebar.
By default, the numbers will be market as units, but you can specify it (3) - for example, as kg or mins.
Establish the Range of numbers` representation (4).
Choose the colors (5) of gradient changes when numbers go from a lower to a higher level.
Also, you can set scopes for colors (6) - for example, to signalize about some system state.
In this example, we used a UI button and a function component that generates a random number from 1 to 100 to imitate data inputs.
The component plots the input numeric values on a UI chart. If the message payload is not numeric the component tries to convert it (for example, string type '1' to numeric type '1'), and if it fails, the message is ignored.
Choose the Type of UI representation (1). To emphasize points on the chart - enlarge points (2).
Specify the length of the X-axis (3) - in time units or points.
Choose the X-axis Label format (4).
You can set up the scope of the numbers on the Y-axis (5). If you didn`t, the chart will be adjusted automatically.
If you choose to show Legend (6) the topics of all messages will appear above the chart. For example, you have two sources of data, and you want to see them both on the chart. To do this you have to specify msg.topic for each of them. Then choose Show Legend (6) and you will see which color a source got on the chart.
The Interpolate option (7) specifies which type of connections (lines) will be on the chart.
You can choose the color of lines (or bars) on the chart (8). The chart component will use them in turn: the first color for the first source (topic) and so on.
You may place some text on the chart to be there before the data arrives (9).
We will use two buttons in the example - to imitate two sources of data - and a function component that generates random numbers from 0 to 100.
​
​
