DEPRECATING: Will be removed in a future release. Use the uib-element node instead. Node demonstrating a way of building a ui element from a node.
This node requires the "new" front-end client library (either the IIFE or ESM version).

Please try out the example in the import library.

Inputs

payload array | object
The array or object that defines the output list.
A simple array of strings can be used for UL/OL lists. An array of key/value objects is needed for DL lists.
mode string
Optionally, set to "remove" which will remove the list from the UI. Payload is not needed in this case, it will be ignored.
topic string
Optionally, the MQTT topic to use. Takes preference over the topic defined in settings.

Outputs

  1. List Configuration (Optional output)
    _uib object
    msg._uib.originator contains the node id of the originating uib-list node.
    _ui object
    The _ui configuration properties that defines the creation of the list.
    Use this in your own flows or in a JSON input for an initial setup of the UI if desired.
    topic string
    The input topic.

Node Settings

URL selection
The uibuilder instance to connect to.
List ID string
The HTML element id of the resulting list tag.
This is required otherwise later updates and removals cannot happen.
Type selection
What kind of list to create?
Parent string
A CSS selector that the new list will be attached to. E.g. "div#myid" or just "#myid" would attach the list as a child of a DIV tag with an id of myid.
"p.myclass" would attach the list as a child of a P tag that has a class including myclass.

If a parent is not specified, the list will be added as a new child of the body tag. (e.g. the end of the UI)

Output instead of send string
By default, output is sent to the linked uibuilder node and therefore to any connected clients.
Selecting this flag, an output port is added to the node. The output contains the standard msg._ui object. You can use that in your own flows or loaded JSON configuration. In that case, the msg is not forwarded to clients.
Name string
A short description shown in the admin interface

Details

You define the type of list and the parent uibuilder node and then send a payload to the node to create/update the list.

In addition to sending a simple array, you can send an object. The objects keys will be prefixed onto the values in the list display. Nested objects will be flattened into comma-separated text.

To empty the cache and remove from the connected clients, send a msg containing a mode property set to "remove".