How UIBuilder can be integrated in to angular application

We want to integrate just uibuilder into anguler application, there users can create flows and import or export flow as json. I could not find any resources how it could be.
Kindly help me.

Mian Talha

Hi, you will need to explain a bit more about what you want to achieve and how.

So you have an Angular app that creates Node-RED flows and implements them?

In what way do you want to incorporate uibuilder? To the Angular app or as something that users can include in their flows?

Thank you for quick response,

We want that users can create flow on angular app (without connecting to real devices) and then we will push the flow json to Dynamodb.

We want to this interface should be on angular app.

No problem. However, I still can't quite see how uibuilder fits into this?

Sorry, May be you can call it flow generation module. Actually we want users to generate flow at angular applications. How can we embed it ?

Sorry, translation struggles I think.

Are you wanting to be able to generate flows that incorporate a uibuilder node? Or do you want to use uibuilder to help generate the flows?

We want to use uibuilder to help generate the flows?

OK. But in that case, uibuilder really only helps with the communications from your front-end to Node-RED. It won't help with the flow building, you will need to do that in Node-RED itself.

So to enable your Angular code to work with uibuilder, all you need to do is to add the library to the web page, start it with uibuilder.start() early in your javascript (you may need to put it inside where your Angular app starts up though) and then add a msg listener uibuilder.onChange('msg', (msg) => { ... }) within your Angular app.

It is the same model as for the VueJS template but using Angular as the framework instead of VueJS.

You can send messages back to node-red using uibuilder.send({....}) which can be triggered from anywhere in your Angular app.

You can also use the uibuilder node in Node-RED to install your Angular and other front-end dependencies so that you can use them in your web app.

If your web app is already served by a different web server and you don't want to change, all you need to do is load the front-end library from Node-RED and change the start function passing the path and namespace for the Socket.IO client to work correctly. Instructions in the docs.

I'm afraid that I don't use Angular so I don't have any specifics to give.

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