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.
- 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.
- 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.
- 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.