Making front end with uibuilder+bootstrap

Dashboard
21

Thanks for your replay.
I actually wanted to separate the payload values which coming from node red to uibuilder page.
Like if I want to send any sensor value, then the full massage will include _msgid, topic, payload. But I needed only payload value to show in the webpage.
Thanks.

22

The msg sent into the uibuilder node is sent directly to your clients. Wanting just the payload is common. Just select the object.

Here is an example based on the default template in index.js

uibuilder.onChange('msg', function (newVal) {
    //console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
    vueApp.msgRecvd = newVal

    // newVal contains the full msg object sent from Node-RED via the uibuilder node

    // Lets say you send some sensor data to uibuilder. The msg topic contains an id "sensor1":
    if ( newVal.topic = 'sensor1' ) {
        // Assuming that you have created a Vue data object called `sensor` ...
        vueApp.sensor1 = newVal.payload
    }
    // repeat as needed for other sensor values.
})

And in your html:

<div>
   Sensor #1 Value: {{sensor1}}
</div>

Since the msg topic is generally used as an identifier, you want that to come through anyway as it is the easiest way to identify the data source. That lets you do different actions in the front-end depending on what message you received. Just make sure that you set a sensible msg.topic for each type of message you send through - or indeed use something other than msg.topic if you like, it doesn't really matter. Like msg.payload, msg.topic is merely a common convention in Node-RED.

Note that the default template simply pushes the whole msg object to a Vue variable so that it can be displayed in full. You absolutely don't have to do that at all. Indeed, I don't recommend it as standard practice since you can't really be all that sure how big the msg object will be or how deeply structured.

However, as an alternative to the code above, you can simply use the msgRecvd variable in your html:

<div>
    Sensor value: {{msgRecvd.payload}}
</div>

But as you will see, that only really works if you are sending a single sensor's data and the example here only works if msg.payload contains a simple value. Some sensors may have an object as their payload so you might need something deeper such as msgRecvd.payload.data.temperature or whatever. Use a debug node on the Node-RED side to see exactly the format of the data you are sending to uibuilder.

1 Like