I don't know how to input data into a js file

General
1 
[
    {
        "id": "b6c45fc4594ea230",
        "type": "tab",
        "label": "流程 8",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "5f665f55fe937551",
        "type": "uibuilder",
        "z": "b6c45fc4594ea230",
        "name": "",
        "topic": "",
        "url": "test1",
        "okToGo": true,
        "fwdInMessages": false,
        "allowScripts": false,
        "allowStyles": false,
        "copyIndex": true,
        "templateFolder": "blank",
        "extTemplate": "",
        "showfolder": false,
        "oldUrl": "test",
        "reload": false,
        "sourceFolder": "src",
        "deployedVersion": "6.8.2",
        "showMsgUib": false,
        "title": "",
        "descr": "",
        "x": 460,
        "y": 120,
        "wires": [
            [],
            []
        ]
    }
]

I want to transfer data into a js file to change the display of the page. But I don't know how to transfer data into it. By the way, uibuilder needs to be downloaded to use the json I shared. Or is there a better way to help me with this.

3

Hi Xiang,

This may be a terminology or translation issue but you generally do not want to make dynamic changes to JavaScript files if you can help it. The reason being that it can be quite insecure if you are not really careful.

The most common design pattern when using UIBUILDER is to transfer data from Node-RED to your front-end browser using UIBUILDER's built-in websocket message feature. In your front-end JavaScript, you simply set up a listener like this:

uibuilder.onChange('msg', (msg) => {
   // You don't have to filter by topic but it can be helpful
   if ( msg.topic === 'update mything' ) {
      // $(...) is a uibuilder helper function that selects an HTML element based on a CSS Selector
      // Use innerHTML if your payload includes additional HTML formatting
      $('#mything').innerText = msg.payload
   }
})

Of course, you don't have to update your UI as I've done here. Indeed there are other helpers in newer versions of UIBUILDER that can make it even easier, such as <uib-var topic="update mything"></uib-var> which removes the need for the above JavaScript completely. Great if all you need to do is pass some node-red data straight to your UI.