UIBUILDER example: Create a selection drop-down using low-code configuration

So that I don't forget to post this somewhere vaguely useful, here is some front-end code as an example of using UIBUILDER's low-code capabilities in your front-end (browser) code to create an on-screen element dynamically. In this case, a single select drop-down box.

// Create the outline select element
        "components": [
                "components": [
                        "attributes": {"value": null},
                        "slot": 'Waiting for data ...'

uib.onChange('msg', (msg) => {
    if (msg.topic === 'doSelect') {
        /** @type {HTMLElement} */
        const mySelectElement = $('#myselect')
        // This deletes all of the current options
        const _ui = {
            method: 'add',
            parent: '#myselect',
            components: [],

        msg.payload.forEach( opt => {
                type: 'option',
                attributes: {value: opt.value},
                slot: opt.name,
            let newopt = document.createElement("option")
            newopt.value = opt.val
            newopt.innerText = opt.name

// Simulate getting msg from node-red
uib.set('msg', {
    topic: 'doSelect',
    payload: [
        {value: 1, name: 'Number 1'},
        {value: 2, name: 'Number 2'},

This could, of course be done in a single step but that would probably be less common when doing the processing in the browser like this.

The same approach will also work direct from Node-RED. Simply send the JSON data direct to the uibuilder node.

This topic was automatically closed after 30 days. New replies are no longer allowed.