Zero-code UI builder. Creates a sing HTML or web component element (tag) from simple input data.
Requires the "new" front-end client library (either the IIFE or ESM version).
Please try out the example in the import library.
Inputs
- mode string
-
If the
msg.mode
option is chosen in settings, this property can be set to either "update" or "delete".
- Other various
-
Other msg properties may be passed into the CSS Selector, Content Source and Attributes Source fields if set in the settings.
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.
Node Settings
- Mode selection
-
The mode of operation.
-
Must be one of 'update' or 'delete'. Can also be set to
msg.mode
.
- CSS Selector string
-
Required. A CSS selector that the node will update.
-
Note that ALL matching elements will be updated/deleted not just the first.
- Content Source string
-
Optional. Text, HTML or Markdown that will replace the slot content of the selected element.
-
If specified, the result must be a string.
- Markdown? boolean
-
If set, the Content Source will be treated as Markdown IF the Markdown-IT library is loaded into the client web page.
- Attribs Source object
-
Optional. An object containing attribute-name/value keypairs.
-
e.g.
{"class":"myclass", "data-foo":"bah"}
- Topic string
-
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 mode of operation (update or delete), provide a CSS Selector that will identify the element(s) to work on.
If updating, provide updated slot content and/or attributes. Then send the
output to a uibuilder node to update/remove the element(s).
Multiple uib-update
and uib-element
nodes can be chained together for more complex needs.
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).