Zero-code UI updater for UIBUILDER. Updates HTML elements 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. Documentation.

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