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

**URL:** https://discourse.nodered.org/t/uibuilder-example-create-a-selection-drop-down-using-low-code-configuration/82994
**Category:** FAQs
**Tags:** uibuilder
**Created:** [18 November 2023 17:32 UTC](https://discourse.nodered.org/t/uibuilder-example-create-a-selection-drop-down-using-low-code-configuration/82994 "2023-11-18T17:32:50Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [18 November 2023 17:32 UTC](https://discourse.nodered.org/t/uibuilder-example-create-a-selection-drop-down-using-low-code-configuration/82994/1 "2023-11-18T17:32:50Z")

</div>

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.

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

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 December 2023 17:33 UTC](https://discourse.nodered.org/t/uibuilder-example-create-a-selection-drop-down-using-low-code-configuration/82994/2 "2023-12-18T17:33:44Z")

</div>

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