Dynamic forms in node-red

Best way to create a dynamic form based on a json file to transfer recipes (groups of data) to the Plc. The idea is to put all the information necessary to create the form on a json file and reuse it to create the forms as the user needs.


"Best" is highly personal and debateable.

For something like what you are asking, I would probably install uibuilder as you could import a lib like any one of these (jQuery) or something like this for vue

The jQuery options are possible in node-red-dashboard but you may struggle to import / host the extra libs (uibuilder has a friendly import definitions editor built in, to manage imports)

There are lots of options.

Not sure how your experience is on Node-RED, but...

In the past, on a different system admittedly, I used a simple CSV file and called the respective recipe using either a name or number from a list.

This will of course depend upon how your recipes are constructed. We had standard set steps in the recipe, on which we could set different times, temperature, pressure, flow, or whatever. These 'steps' could be organised in any order and so we had 'flexible recipes'. It suited our configuration in which probably a dozen recipes 'flows' could be ordered and tweaked as desired. (

In fact, as long as you kept to the named steps, the recipe could be however long you wanted. e.g.

PUMPDOWN, PRESS = 10, TEMP = 120, TIME = 120
HOLD, TIME = 300


Editor for the recipes and then the Operator access was limited to Recipe selection for whatever process/recipe was to be run. This was partly to maintain consistent recipes/process, but could also be used to develop recipes.


Thanks for the replies.

Sorry, I mean the easy way, not the best way.
So, I can assume with uibuilder almost everything is possible, right? That's fine, but I'm sure I will have hard work in front of me, especially because I ́ am a beginner in html and js. Not to mention css! I was customize to C# and all the visual tools that come with the visual studio environment.

My idea is to use the json file as a kind of template to define the fields so node-red automatically creates each form when the user accesses it. The recipe data associate to each form could be in csv or json files too. The idea is to transfer all the work to json files, which can be accessed and updated with node-red, and simplify the node-red programming. If I have 100 recipes there's no need to program 100 flows.


What are the differences between the different forms?

Let me see if there are crossed wires.

Do you want to make dynamic web forms (i.e. comstomise layout and elements based on some JSON)


Are you attempting to make a recipe loading system where you have a UI that can how the value of any (1, 100, 1000) different recipes. That can be read into dashboard, downloaded to PLC, uploaded from PLC dashboard, saved from dashboard to file/database?

They are mostly separate design patterns (though there can be some cross over)

Which is it you are trying to achieve?

Nope! Not any more! :grin:

You can create a simple form without any code at all now. Using the uib-element node set to output a form. You feed in some simple data, you send the output to a uibuilder node and you have a form. Additionally, the form has accessibility features baked in. The form can also be later dynamically updated and changed - also without code - if you need it to.

There is a full example in the library if you have the latest version of uibuilder installed.

This is exactly what uibuilder has already done for you.

You can also use the low-code features if you want to create something more complex. Capture the output of the uib-element and have a look at the JSON structure and, along with the provided documentation, you should be able to build just about anything.

I´m trying to achieve the second one. The idea is that the system automatically builds a form whenever the user accesses a recipe based on the json file, where all the necessary values for its construction are stored.
With the form open, the user should be able to change, save or transfer the values of each tag to the plc. These values can be stored in the same json file or another json file if there is more than one recipe for each form.


Maybe it's a possibility, as long as the uibuilder allows flexibility for what I want. Can you send a more complex example of a dynamic form than what is available in the uibuilder library?


I can. But my time is limited.

So why don't we make it more relevant. Perhaps you could mock up an example? Then I can create an example from that.

So you are not trying to dynamically build a form, just dynamically load a form with variable recipe data.

I've been doing a similar thing to store production line recipes every time a value is changed or when an alarm comes up (when the deviation from the set parameter exceeds a certain threshold).

On the normal dashboard I have a few widgets to search by date and line (I make a query to the MySQL DB). Then I display the result on a table node. When I click on a row, the table node returns the values of the row in a JSON, that I copy as global context and display on the dashboard form widgets.

Any change on the widgets can be updated and modified in the context, and you can add save/delete buttons to commit the context to the DB (or delete the entry).

It shouldn't be a stretch to use a similar structure.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.