Provides a stand-alone web server that allows for interfacing with Node-RED, while giving you help and complete freedom to create custom web interfaces.
You need at least one of these in order to make full use of all of UIBUILDER's features.
It is this node that creates a custom web server. You can have many nodes if that best meets your needs. But each node can serve many pages.
It also creates a set of filing system folders and files on the Node-RED server.
These define the front-end UI you see in the browser as well as providing some important configuration.
This node is also where you configure much of UIBUILDER's web server such as installing helper libraries that
you may wish to use to support your interfaces (e.g. VueJS, jQuery, etc). You can also use it to edit your custom UI code.
Detailed documentation can be found HERE.
More information on how to configure this node: UIBUILDER node configuration.
Specific information on how to use the front-end library: Client Library.
Status display
Each instance (node) of UIBUILDER has a status display. Normally, the icon is blue.
When 1 or more clients are connected, the text will show how many clients are connected.
Inputs
- payload string | buffer
- Optionally, the payload of the message to send to all connected client browser tabs.
- _uib object
-
Optionally, trigger low-code front-end events such as
showing a notification message.
Also used to
signal to the front-end that the page should reload automatically. Useful when developing front-end code via the node's editor.
- topic string
- Optionally, the MQTT topic to use. Takes preference over the topic defined in settings.
- script string | string[]
-
Optionally, a string or array of strings containing valid JavaScript.
This will be added to the web page dynamically. Currently contains minimal validation so care is required.
This feature is off by default, turn on in the Advanced Settings.
- style string | string[]
-
Optionally, a string or array of strings containing valid CSS for styling the front-end page.
This will be added to the web page dynamically. Currently contains minimal validation so care is required.
This feature is off by default, turn on in the Advanced Settings.
Outputs
- Standard output (data from front-end)
- payload string | buffer
-
Typical data sent by the client.
- uibDomEvent object
-
Used by the
uibuilder.eventSend()
front-end function.
See the eventSend feature in the documentation for specifics.
- topic string
-
A copy of the last inbound topic if present. Otherwise, the topic from the node's settings.
Could also be changed by the front-end.
- _uib string
-
Included only if turned on in advanced settings.
Provides detailed information about the sending client.
Useful for custom security processing.
See the control output below for more specifics.
- other
-
The client may send other data on the
msg
object.
Note that input messages are not forwarded to the output unless the flag is set in the advanced settings.
- Control output (controls from front-end or server)
- uibuilderCtrl string
-
The name/id of the control message.
See the documentation for details.
- cacheControl string
-
Use in your flow to control the sending or clearing of a cache of messages to be sent to new/refreshed clients.
This requires a separate function node to capture and replay inbound messages.
REPLAY | Indicate to the back-end flow that a copy of the cached messages should be dumped to the front-end. Retaining the _socket.id will send the cache contents back to the requesting client.
|
CLEAR | Indicate to the back-end flow that any cache should be completely cleared for everyone. |
See the documentation for details.
- from string
-
Identifies the source of the msg since both server (back-end) and client (front-end) control messages
will appear out of port #2.
- Other string
-
Additional details about the client the message relates to is included.
This varies somewhat between the different control message types.
See the documentation for more details.
Node Settings
- Name string
- A short description shown in the admin interface
- Topic string
- A topic name to use if the incoming msg does not contain one.
- URL string
-
There is no default and this entry is required.
The URL path that the resulting page and other resources will be served from.
Must be unique across Node-RED. Will also use the Node-RED scheme (http/https)
and port or the custom UIBUILDER scheme and port if specified in settings.js.
Will also be prefixed by the Node-RED setting httpNodeRoot.
The url is also used to define the server filing system path for front-end code files.
The url must be valid as a filename as well as a url path. It may not exceed 20 characters.
Files tab
Clicking this tab will display a file editor allowing you
to edit the front-end files that define your user interface.
All text-based files in the <uibRoot>/<url>/
folder on the server's filing system will
be available to edit.
Note that you can expand the edit panel by clicking on the ⤡ arrow button underneath the panel.
To exit fullscreen, press the same button (now highlighted) or the Esc key.
Template Settings
- Template drop-down
-
Select one of the built-in templates or load an external template.
- Ext. Template text
-
Only if "Load an external template using Degit" is selected.
Degit is used to load a template from an external
git
repository.
Try "totallyinformation/uib-template-test" as an example.
- Load & Overwrite button
-
Clicking the button will display a warning dialog. If you accept the warning,
all of your current front-end code will be replaced with the template.
Libraries tab
Clicking this tab will display a list of currently available
front-end library packages. This interface allows you to add, remove and update any library
that can be installed via npm.
Libraries will be loaded into your <userDir>/
folder in the same place as custom nodes.
UIBUILDER retains an internal list of front-end libraries loaded this way.
Each library will be served so that you can use it in your front-end html.
Advanced tab
- Serve drop-down
-
Choose which folder to serve files from. Only
src
and dist
are available at the moment.
This can now be changed simply by redeploying your flow, you don't need to restart Node-RED.
- Include
msg._uib
in standard msg output check box
-
If selected, will show the browser clientId, page name and real IP address in standard output (it is always shown in control msgs).
- Show web view of source files check box
-
If on, an extra web page is dynamically created at the indicated URL. That page shows an index listing
of all files and folders on the server for this node. As this could be a security issue, it is turned off by default.
USE WITH EXTREME CAUTION
A button is exposed if this flag is on. Clicking the button will take you to the index view in a separate tab.
- Allow scripts to be passed to front-end? check box
-
If on, any string(s) in
msg.script
will be dynamically added to the scripts of the web page.
Turn off to prevent scripts from being dynamically added and executed.
NOTE: It is better to use UIBUILDER's msg._ui
low-code features for passing scripts.
- Allow styles to be passed to front-end? check box
-
If on, any string(s) in
msg.style
will be dynamically added to the styles of the web page.
Turn off to prevent styles from being dynamically added.
NOTE: It is better to use UIBUILDER's msg._ui
low-code features for passing styles.
- Forward input to output? check box
-
Forwards a copy of every received message direct to the output.
Adds the topic from the above setting if one isn't present in the msg.
Note that this may result in multiple output messages if your front-end
code also auto-sends inbound messages.
Button Row
- Open link
-
The web app url for this instance. Click to see the app page in a new tab.
Also available as a button at the top of the panel on all tabs.
- Full details link
-
Shows a web page with detailed information about the overall UIBUILDER
configuration. Including details of all of the vendor modules that are
available and all of the UIBUILDER endpoints along with both server
and URL paths.
- Node Details link
-
Shows a web page with detailed information relavent just for this
instance (node) of UIBUILDER. May be easier to read than the full details.
- Docs link
-
Opens the documentation for UIBUILDER in a separate tab.
This does not require an Internet connection, the local docs are used.
Also available as a button at the top of the panel on all tabs.
File/Folder Structure
For more information, see the UIBUILDER documentation.
Details
For more information, see the UIBUILDER documentation.
There are also examples of how to use UIBUILDER in the Node-RED import library, on the , and in the GitHub WIKI.
UIBUILDER can be discussed in the Node-RED Forum. Issues/bugs can be raised on GitHub.
Admin Index (Details) page
The <admin url>/uibindex page lists all of the UIBUILDER endpoints and other details. You can use the following parameters:
- type (string)
-
The type of the data returned.
- html (default)
-
Also used if no type parameter is given.
Returns an HTML page showing the details for all deployed UIBUILDER nodes.
Shows the server file locations of the instance and for vendor libraries.
- json
-
Returns JSON data with both the source node ID's and matching URL's.
- urls
-
Returns a JSON array of just the URL's in use from deployed UIBUILDER nodes.
Used internally to ensure that new nodes use unique url's.
- check (string)
-
Passing a UIBUILDER instance name to the check parameter will result in a boolean (true/false)
return. True if it is being delivered by a UIBUILDER instance,
false otherwise. e.g.
?check=uibuilder