Configuration Components

Search…

Some components need to share configuration. For example, the MQTT In and MQTT Out components share the configuration of the MQTT broker, allowing them to pool the connection. Configuration components are scoped globally by default, this means the state will be shared between flows.
You can find configuration components in the menu:  
Defining a Config Component
A configuration component is defined in the same way as other components. There are two key differences:
its category property is set to config;
the edit template <input> elements have ids of node-config-input-<propertyname>.
remote-server.html 
remote-server.js 
In this example, the component acts as a simple container for the configuration - it has no actual runtime behavior.
A common use of config components is to represent a shared connection to a remote system. In that instance, the config component may also be responsible for creating the connection and making it available to the components that use the config component. In such cases, the config component should also handle the close event to disconnect when the component is stopped.
Using a Config Component
Components register their use of config components by adding a property to the defaults array with the type attribute set to the type of the config component.
Could not load image
As with other properties, the editor looks for an <input> in the edit template with an id of node-input-<propertyname>. Unlike other properties, the editor replaces this <input> element with a <select> element populated with the available instances of the config component, along with a button to open the config component edit dialog.
Could not load image
The component can then use this property to access the config component within the runtime. 

New Component Creation Tutorial - Previous

Vue.js for UI Components Creation

Next - New Component Creation Tutorial

Component Styling Guide

Last modified 6mo ago

Copy link

Contents

Defining a Config Component

remote-server.html

remote-server.js

Using a Config Component