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.