How to edit form json of the ubi-element?

[54jinyistudio]

I want to add checkbox,radio components to uibuilder page. Do i need to input those json data to display the checkbox and radio on the webpage normally ?

[TotallyInformation]

Unfortunately, checkbox handling in the current release is a little off. I've published a workaround in a previous post - or you can see it in the closed issues on GitHub. The next release will have a proper fix.

You can add checkboxes via the uib-element node's form feature though, here is an example of a single checkbox:

   {
        "id": "r4-check",
        "label": "Checkbox (true/false):",
        "type": "checkbox",
        "value": "false"
    },

But you will need the workaround to get the data back to Node-RED I'm afraid.

I'm not sure that I've tested a radiobutton input and I'm afraid there isn't currently a radiobutton group which you probably do want.

However, if the zero-code output isn't quite doing what you want, you should use it to get close to what you want. Then you can grab the output before it goes to the uibuilder node. You will find all of the interesting stuff in msg._ui and in there you will soon see the structure that it uses to define the HTML output. This is the "low-code" capability of uibuilder and once you've gotten a bit used to reading it, you should quickly be able to see how to add additional elements to it. You can do that using a function or a change node.

This being uibuilder though, there is an alternative if you prefer to work with the HTML. That is to simply let uibuilder build something close to what you want. Then grab the resulting HMTL, update your index.html with that code and then you can update it as normal.

There is even a 3rd option. That is to, again, let uibuilder build something close to what you want and then use the uibuilder.ui function in your front-end index.js file. This takes exactly the same kind of input data that the uib-element node outputs.

Which route you choose depends a lot on how much you need to amend the HTML structure itself from your input data and how much you simply need to update the form data.

---

Here is the command that lets you tell your front-end to send back all of the HTML should you want to control that from Node-RED. Obviously, you can take that and send it to a file-out node to save to your index.html file if you wish to automate things.