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.