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

FAQs
1

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
uib.ui([
    {
        "method":"replace",
        "components": [
            {
                "id":"myselect",
                "type":"select",
                "parent":"#more",
                "position":"last",
                "components": [
                    {
                        "type":"option",
                        "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
        mySelectElement.replaceChildren()
        
        const _ui = {
            method: 'add',
            parent: '#myselect',
            components: [],
        }

        msg.payload.forEach( opt => {
            _ui.components.push({
                type: 'option',
                attributes: {value: opt.value},
                slot: opt.name,
            })
            let newopt = document.createElement("option")
            newopt.value = opt.val
            newopt.innerText = opt.name
            mySelectElement.append(opt)
        })
        uib.ui(_ui)
    }
})

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

2

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