How to create a new UI from scratch

General
1

So I’m working on a project and need to create a new editor UI to create flows from scratch. @mike said he has done it in another thread and I’m wondering how to do it with existing APIs. Also I’m wondering if I can use the APIs to programatically create flows.

2

For my project I created a simple ‘wizard’ framework that would generate new flows based on a series of forms. The idea is that for beginners, they would like to be guided through a specific task rather than given a blank canvas to start with.

The user goes through forms, step by step, setting the configuration options. When done, the flow is added to Node-RED using the runtime API, specifically the RED.nodes.addFlow() method. The format for a flow supplied to this API call an object containing the flow label and a list of nodes as in your flow file. Something like this:

var nrFlow = {
    label: "Flow Label",
    nodes: [
    {
       ... node params ...
        "wires": [
            [
                "a5a45767.173e88"
            ]
        ]
    },
    {
        ... node params ...
        "wires": []
    },
   ... more nodes ...
   ]
};

To do this, I needed to assume the nodes that the wizards use are already installed. I didn’t install them dynamically.

So you can build a different UI that creates flows in this format, and then call addFlow in a similar way. There may be other runtime API methods that would be useful for you depending on what you were after.

3

Alright, thanks. That looks interesting. Out of curiosity, what are the numbers in the following part of the snippet and how are they determined?

 "wires": [
        [
            "a5a45767.173e88"
        ]
    ]
4

The wires property identifies what nodes a node is wired to. The values inside are the id properties of the connected nodes. They are generated in the editor.

5

Alright, is it possible to get the node ids by API for this? Maybe even return them as an object.

6

It is the id property of the node objects return by the existing apis.