# Uibuilder - just getting started

**URL:** <https://discourse.nodered.org/t/uibuilder-just-getting-started/56830>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [18 January 2022 00:49 UTC](https://discourse.nodered.org/t/uibuilder-just-getting-started/56830 "2022-01-18T00:49:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [18 January 2022 00:49 UTC](https://discourse.nodered.org/t/uibuilder-just-getting-started/56830/1 "2022-01-18T00:49:30Z")

</div>

I have successfully got uibuilder up and running. I am running the following setup:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00662aad4e10a7e644a1e1fe01e005d53773cf2b.png)  
I have figured out a way to parse the msg payload in index.js. I am not sure it's the best way but I can at least pull out the payload and topic. I add this to the computed section of index.js

```auto
 computed: {
        
        hLastTopic: function(){
            var msgTopic = this.msgTopic
             if (typeof msgTopic === 'string') return 'Last Topic Received = ' + msgTopic
            else return 'Last Topic Received = ' + this.syntaxHighlight(msgTopic)
        },
        
         hLastPayload: function(){
            var msgPayload = this.msgPayload
            return msgPayload
        },
        

```

I added the following code to index.html try and parse out the payload and topic.

```auto
               <b-button id="tune_status" pill variant="primary">Tune {{msgPayload}}</b-button>
                           
                
                <b-card class="mt-3" header="Normal Messages" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="left" >
                    <p>
                        Messages: Received=<b>{{msgsReceived}}</b>, Sent=<b>{{msgsSent}}</b>
                    </p>
                    <pre v-html="hLastRcvd" class="syntax-highlight"></pre>
                    <pre v-html="hLastTopic" class="syntax-highlight"></pre>
                    <pre v-html="hLastSent" class="syntax-highlight"></pre>
                    <p slot="footer" class="mb-0">
                        The received message is from the input to the uibuilder node.
                        The send message will appear out of port #1 of the node.
                    </p>
                </b-card>

```

I get this output

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2faaa74ec1f9a0b43bb2fc71fa75a30848f9538a.png)

I want to be able to do an if then else and depending on the payload result set attributes like background color, etc. I have been tweaking the above computed functions but unless I have them set as shown I blow up the web page (blank page). Since I am running vu.js I did a quick search for if then esle and I see a directive called v-if.

At this point I am confused on how to apply if then else statements for uibuilder. Should I be doing that in the computed section? Or should I be doing that in the index.html with vu.js directives. I suspect the computed functions are not for general if then else type statements to define css styles.

Regards

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 January 2022 01:53 UTC](https://discourse.nodered.org/t/uibuilder-just-getting-started/56830/2 "2022-01-18T01:53:47Z")

</div>

Hi, it may help if you think about uibuilder and VueJS separately.

In your `mounted` section you have a `uibuilder.onChange('msg', function(msg) { ... })` where you take the data from the msg from Node-RED and assign it to a Vue variable that you define in the `data` section. Whenever you change that vue variable, the display of that variable changes.

Now if you want to use some incoming data to change the visibility of some elements, you add a `v-if` to an outer element and assign to it a variable defined in the data section. Assign true to that variable and the elements will be visible, assign false and they will disappear.

So, for example, set up a data variable called `showme` and default it to false. Create some DIV in you html with a `v-if="showme"`. When you load the page, the contents of the DIV will be hidden.

Now in your mounted section you add your uibuilder.onChange. In the function for it, have something like

```auto
mounted: {

    const app = this

    uibuilder.onChange('msg', function(msg) { 
        app.showme = msg.payload
     })

}

```

And send a msg from Node-RED to uibuilder containing `{payload: true}`. When you send the msg, the contents of the DIV will appear. Send a payload of false and the contents of the DIV will disappear.

---

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [18 January 2022 02:48 UTC](https://discourse.nodered.org/t/uibuilder-just-getting-started/56830/3 "2022-01-18T02:48:30Z")

</div>

Ok trying to follow you on this...This is what I added to the mounted section:

```auto
 // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
        uibuilder.onChange('msg', function(msg){
            //console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
            app.msgRecvd = msg
            app.msgPayload = msg.payload
            app.msgTopic = msg.topic
            app.msgsReceived = uibuilder.get('msgsReceived')
        })

```

My thought is that I would parse the payload by topic for what ever I want to update. So using your example I would should be able to add logic like` if msgTopic = 'tune status' && msgPayload = 'true' then do something`

I will give that a shot tomorrow.

thanks

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 January 2022 09:25 UTC](https://discourse.nodered.org/t/uibuilder-just-getting-started/56830/4 "2022-01-18T09:25:41Z")

</div>

> [@Mick](#):
>
> My thought is that I would parse the payload by topic for what ever I want to update

Yes, that is a common approach.

> [@Mick](#):
>
> if msgTopic = 'tune status' && msgPayload = 'true' then do something

```js
if (msg.topic === 'tune status' && msg.payload === true) {
   // do something
   app.showme = msg.payload
}

```

Yes 😀

The variables already defined in the template that you may be using like `msgRecvd`, you will see already defined in the data section, you just need to add a definition for `showme`.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 February 2022 09:26 UTC](https://discourse.nodered.org/t/uibuilder-just-getting-started/56830/5 "2022-02-17T09:26:38Z")

</div>

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