UIBuilder + low-code + yes/no form options

[NickXML]

I'm prototyping a settings panel for an IoT project. At some point I'll hand it off to a real developer, but for now I'm kludging things together to get something up and running. I recently discovered UIBuilder and got pretty excited about what it can do.

To be clear up front: I am not a software engineer. I have a flimsy grasp of some basics, but I can google

Using the simple-form example, I was able to create a dynamic form that does almost exactly what I want. It is very ugly (just a great long list of form fields), but it is functional. The various form fields are used to set context variables in node-red that I then use in the existing flows.

I'd like to include some "yes/no" form options. It can be a checkbox, pair of radio buttons or something else. I just need a binary choice on/off, true/false, yes/no. Right now I am using a text field and I manually type true or false. While it works, that is clearly not a great solution.

I tried using a checkbox, but I couldn't get the checkbox to render in the appropriate state (checked or unchecked) and it didn't seem to return a useful value when I updated the form and sent data back to node-red. I also couldn't find any guidance for using radio buttons.

I'd welcome any advice anyone has.

Thanks!

[TotallyInformation]

Hi Nick, thanks for trying out uibuilder and for heading over from YouTube. Just at work right now but wanted to say that I will respond properly when I get a chance today.

[NickXML]

Thanks!

I'm not in a huge rush as the basics are working. They are just a bit inelegant (entirely my fault not yours).

[TotallyInformation]

Sorry about the delay.

For a checkbox, it looks like that isn't working correctly because whether you check it or not, you always get back the value "on". So that's a bug! A fix will be forthcoming.

There are probably another dozen or so other ways you could create a yes/no option input. Ranging from toggle buttons, sliders, drop-downs, etc.

Perhaps the simplest however, and one that works with the existing zero-code uib-element node is a RANGE input that only allows 2 values. Here is the simple input for that:

msg._ui = [
    {
        "id": "r5-range",
        "type": "range",
        "required": false,
        "label": "Range (0-1):",
        "value": "0",
        "min": 0,
        "max": 1
    }
]

Doesn't maybe look too pretty. However, you can do some styling of a range input.

---

Another work-around would be to add a drop-down with 2 choices. To do that, you can try adding this flow fragment after the output from the uib-element node but before sending to uibuilder (because drop-downs are not yet included in the uib-element form input types).

[{"id":"0ba6f665b66f8e40","type":"template","z":"3badb0a6906eef7f","g":"f6154314aee80d24","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<label for=\"on-off-1\">On/Off:</label>\n<select name=\"on-off-1\" id=\"on-off-1\" onchange=\"this.dataset.newValue = this.value\" onfocus=\"this.dataset.oldValue = this.value\">\n  <option value=\"blank\"></option>\n  <option value=0>On</option>\n  <option value=1>Off</option>\n</select>","output":"str","x":680,"y":420,"wires":[["4f91975ee70aa6ee"]]},{"id":"4f91975ee70aa6ee","type":"uib-element","z":"3badb0a6906eef7f","g":"f6154314aee80d24","name":"","topic":"","elementtype":"html","parent":"#sform1 > form","parentSource":"","parentSourceType":"str","elementid":"dropdown1","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","position":"first","positionSourceType":"str","confData":{},"x":920,"y":420,"wires":[["534ccd905d0adc50"]]}]

Note that the flow assumes you are using the "uib-element tests" example flow. Adjust things according to your form settings.

All I've done there is to create a label and drop-down using HTML and appended that to the zero-code output. You could, of course, adjust the template node to use some variables so that you could re-use it.

---

If you need something more, let me know there are hundreds of examples of on/off switches on the Internet so if you find one you like or can describe something, I'd happily create it using the low-code output so that it can easily be incorporated manually in your flows now but I can also add it to the next release of uibuilder in the uib-element form type.

[NickXML]

Sorry about the delay.

You do realize you are providing better support for a free product than I've had for many paid products? Just saying

Thanks for the help. For now the range input is good enough.

I actually have started going in a slightly different direction. I was able to get my function nodes working with a non-no-code UIBuilder setup, which obviously gives a lot more flexibility in terms of layout. That also means I can bring in help from a friend with far more HTML, CSS and JS experience than me.

By the way, the "breakthrough" for me on using uibuilder without relying on the no-code elements was finally realizing that uibuilder has a built in library manager. Somehow I missed that when I was pretending to read the documentation. Of course, most of the examples don't work without the libraries installed (duh, I know). I was getting the MIME type error in the console that actually means files were missing, and then I fell down a Linux rabbit hole about where the files should be etc.

Then I finally saw something that said "Oh, I used the built in library manager" and I realized I had never noticed that option in uibuilder. Amazingly, if you actually install the correct libraries, everything works. Who knew!? Again, let me stress that I'm in no way a real developer and this is a perfect example of how hard it is to make something idiot proof because idiots are so ingenious (to be clear: I am the idiot here).

I just write it up here in case someone else like me tries uibuilder and nothing seems to be working. Install the correct packages in the uibuilder library manager and all will be right with the world.

Thanks for the amazing support. Much appreciated.