Zero-code UI builder. Creates HTML elements from simple input data.
Outputs msg._ui
standard configuration data.
Please try out the examples in the import library.
Inputs
- payload array | object
-
The string, array or object that defines the output.
Each element type has its own input data definition.
See the info box for each type.
Other inputs can be used instead, see settings.
- mode string
- Optionally, set to "remove" which will remove the element from the UI. Requires that the HTML ID is set.
- Payload is not needed in this case, it will be ignored.
- Otherwise not needed.
- topic string
- Optionally, the MQTT topic to use. Takes preference over the topic defined in settings.
- other various
-
Other properties can be used for the various other settings in the node if desired.
Outputs
- _ui object
-
The _ui configuration properties that defines the creation of the element.
Use this in your own flows or in a JSON input for an initial setup of the UI if desired.
Most commonly, simply send to the input of a uibuilder
node or a uib-cache
node. uibuilder will automatically create the desired HTML in the client browser.
- topic string
-
The input topic.
When chaining uib-element
/uib-update
nodes together, make sure that at least the final
output has a unique topic string so that caching using the uib-cache
node is
easier.
Note that other inputs are not carried forward to the output.
Node Settings
- Type selection
-
What kind of element or component to create?
-
Each selection will show an information box
that explains what is created and what input data is needed.
- Parent string
-
Required. A CSS selector that the elements will be attached to.
E.g. "div#more" or just "#more" would attach the element as a child of a DIV tag
<div id="more">
.
"p.myclass" would attach the list as a child of a P tag that has a class including myclass
.
-
The default parent is
body
tag. (e.g. the end of the UI)
-
Most of the uibuilder templates have a pre-defined div with an ID of
#more
for convenience.
- HTML ID string
-
The HTML element id of the resulting HTML tag.
-
If not provided, the element will be hard to update or remove from the UI procedurally.
(The remove mode of this node would not be usable)
- Applied to the wrapping
<div>
tag where that applies.
-
ID's must be unique on the page otherwise updates/replacement processing
will be challenging.
NOTE: Pre-define the styles and classes for your UI in a CSS style sheet where possible.
Use uib-update
nodes or front-end code to procedurally change them.
Each created element should be easily accessible. Use your browser's
Developer Tools to select the appropriate element and copy the CSS selector.
- Data any
-
Required. Either a msg or context property containing the core data or .
- Position string
-
Required. Position of the resulting UI element relative to the selected Parent element.
-
last, first, or a number. Default is last.
-
Positions the new element within the parent elements child elements.
E.g. Selecting a list as the parent and adding a new list row, selecting
first
would add the new row at the start of the list.
- Heading string
-
Optional text to use as a heading for the added element.
Leave blank for no heading.
-
Heading level 2 is the default. Levels 2-6 are available.
- Passthrough boolean
-
If checked, pass
msg.payload
to output. By default, msg.payload
is removed.
-
Checking this option will also tell the uibuilder client to enable
uibuilder.onChange('msg', fn)
processing
which is normally disabled when a msg with a _ui
property is received.
- Topic string
-
Optional. Fixed topic string. Only used if the input
msg
does not
contain a topic
property.
- Name string
- Optional short description shown in the admin interface
Details
Select the type of element to create, parent element and HTML ID. Then send the
output to a uibuilder node to create/update/remove the element.
The resulting output produces the dynamic, configuration-driven, low-code msg._ui
JSON configuration data used by the uibuilder front-end client library to automatically
create HTML on your page. So this can be further processed, saved for future use or sent
direct to a uibuilder node (via a uib-cache
node if desired).
You can also easily remove the resulting HTML from your page simply by sending a msg
containing just msg.mode
set to "remove". As long as you have chosen a defined HTML ID.
In standard mode, resending to the same parent/HTML ID will cause the original element to be replaced completely.
To update parts of the resulting UI element, use the uib-update
node with an appropriate CSS Selector.
Multiple uib-update
and uib-element
nodes can be chained together for more complex needs.