# Dashboard 2.0 Pre-Alpha Available

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [28 July 2023 13:39 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142 "2023-07-28T13:39:33Z")\
**Posts on this page:** 20\
**Page:** 14

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 November 2023 09:54 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/261 "2023-11-21T09:54:34Z")

</div>

> [@joepavitt](#):
>
> > [@Colin](#):
> >
> > I have not yet seen any indication of how the issue of selecting and formatting data via the Value Format field is to be addressed in D2. It would be useful to know what approach is to be taken.
> 
> [Set labels on charts and other widgets via msg · Issue #234 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/234)

That appears to be specifically about labels. The value format field allows selection of message property and formatting of that (specifying decimal places etc) for the value shown in the widget, not for the label.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [21 November 2023 10:39 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/262 "2023-11-21T10:39:09Z")

</div>

> [@joepavitt](#):
>
> @Paul-Reed open to all of these ideas. Could I trouble you to open a GH issue for each of them please?

All 3 now added to GH.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 November 2023 14:12 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/263 "2023-11-25T14:12:59Z")

</div>

Has the layout of switches changed with 0.8.0? If I have a full width Switch widget then the Label is being positioned at the left hand side but the switch is positioned somwhere in the middle, depending on the length of the label string. For example

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

I am almost certain that the switch used to be at the RHS.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 November 2023 11:53 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/264 "2023-11-26T11:53:46Z")

</div>

I have confirmed that the switches were positioned at the right hand side in version 0.7.2 so have reported an issue.  
[[Regression] Switch widget in v0.8.0 shows switch in wrong place · Issue #396 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/396)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 December 2023 11:40 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/265 "2023-12-01T11:40:07Z")

</div>

I see that version 0.9.0 has been released with ui-control and ui-event, which is great, thanks for this.

A question: from the ui-event node I get a notification when a page is opened. The message includes `msg.socketid`. I am using the event to update the time in a ui-text node in time picker mode, which works fine. I thought, though, that if I include msg.socketid from the event in the message writing to the text node that it should only update the field in the browser that opened the page, but in fact it updates in all browser windows showing that page. Is this a bug, a not yet implemented feature, or is my understanding wrong?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 December 2023 11:51 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/266 "2023-12-01T11:51:50Z")

</div>

> [@Colin](#):
>
> I thought, though, that if I include msg.socketid from the event in the message writing to the text node that it should only update the field in the browser that opened the page, but in fact it updates in all browser windows showing that page. Is this a bug, a not yet implemented feature, or is my understanding wrong?

For now, it's informative only. Was this a feature in Dashboard 1.0? I wasn't aware if so. Happy for you to open a feature request for this. Thanks Colin.

---

<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:** [1 December 2023 14:15 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/267 "2023-12-01T14:15:28Z")

</div>

That should be `msg._socketId` and it is a standard feature of [Socket.IO](http://Socket.IO) - are you not using that in D2?

If not, how will you provide a feature to limit responses to only a single connected client browser tab?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 December 2023 14:51 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/268 "2023-12-01T14:51:03Z")

</div>

> [@TotallyInformation](#):
>
> That should be `msg._socketId` and it is a standard feature of [Socket.IO](http://Socket.IO)

In Dashboard 1.0, this was injected under `msg.socketid` ([Dashboard 1.0 Docs](https://github.com/node-red/node-red-dashboard#multiple-users)), so I have done the same. I actually add `msg.socketid` now to _all_ Dashboard generated events, button clicks, form submissions, etc.

A future plan would be to then have a control that defines whether or not that is actually appended each time, such that you could have multi-tenant interaction in Dashboard.

> [@TotallyInformation](#):
>
> If not, how will you provide a feature to limit responses to only a single connected client browser tab?

Right now - not possible, but it's on the todo list.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 December 2023 15:06 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/269 "2023-12-01T15:06:31Z")

</div>

> [@joepavitt](#):
>
> Was this a feature in Dashboard 1.0?

I thought it was, but I must admit that I don't seem to be able to get it to work. Can anyone confirm whether what I am doing should work in D1? That is sending a message to a text input node, containing msg.socketid from the ui\_control node, to update the text in the text node.

---

<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:** [1 December 2023 15:16 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/270 "2023-12-01T15:16:52Z")

</div>

> [@joepavitt](#):
>
> In Dashboard 1.0, this was injected under `msg.socketid`

Oops, inconsistent - since Node-RED seems to use \_socketId everywhere else?

Also worth remembering the limitations of the socket id. It can change very easily. All it takes is for there to be a network hiccup or for the users OS or browser tab to temporarily go to sleep and it will change.

For UIBUILDER, that meant that I eventually added 3 other options that can be used for automatic filtering. A client ID (set by the server as a UID and given to the client in a cookie, reset if the users browser is closed and re-opened), a tab ID (set by the browser and stable as long as the browser instance and tab remain open, a browser feature that uib ties into), and a page name.

Might be nice if we could align? I did try to get interest in that previously.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 December 2023 15:45 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/271 "2023-12-01T15:45:15Z")

</div>

> [@TotallyInformation](#):
>
> Might be nice if we could align? I did try to get interest in that previously.

Happy to work it out. Feel free to put some time in [Calendly - Joe Pavitt](https://calendly.com/joepavitt/zoom-30)

---

<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:** [1 December 2023 16:15 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/272 "2023-12-01T16:15:05Z")

</div>

Cool. Thanks Joe. As it happens I'm using up some holiday so I'm free on Tue PM. Will be good to actually talk. 😀 Time booked.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 December 2023 10:18 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/273 "2023-12-02T10:18:36Z")

</div>

> [@joepavitt](#):
>
> Was this a feature in Dashboard 1.0?

It seems this is not a feature of D1 (the ability to use socketid to update data on only one connected session). See [Unable to update text field on just one session using msg.socketid](https://discourse.nodered.org/t/unable-to-update-text-field-on-just-one-session-using-msg-socketid/83373).

---

<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:** [2 December 2023 13:43 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/274 "2023-12-02T13:43:16Z")

</div>

Dave makes a good point - for IoT systems - but not for general purpose I don't believe. Surely the flow designer/author should make the decision? In a general-purpose UI, there is really no fixed reason why different clients - even different tabs on the same client browser - shouldn't have different displays if that is the design decision. But, of course, it needs to be clearly documented.

In reality, the socketid is so prone to change anyway that it is a poor choice other than for direct return responses such as an acknowledgement of an action from a client back to the client.

That's why I settled on the 3 properties I chose for uibuilder. It gives the flow author useful choices without the need to build a full multi-user session handler.

What I'd really like to do in uibuilder, when time permits, is to build further on these properties and [socket.io](http://socket.io)'s `rooms` capabilities. At the moment, messages would still get sent to all connected clients and are filtered by the front-end library. This is obviously not ideal. It would be better for each property to create a [socket.io](http://socket.io) room and for the uibuilder node to use those to properly direct messages to the right clients. Clearly, that could then be expanded further to easily allow arbitrary rooms to be created and used giving even more flexibility but maintaining security and privacy and minimising bandwidth usage.

I offer up these thoughts for consideration for D2 as well in case you want to think about any of them.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [7 December 2023 19:47 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/275 "2023-12-07T19:47:54Z")

</div>

Just trying some examples using the Template node, but finding vue not as easy to work with as javascript 🤨  
I'm trying to get the 'selected option' to be emitted when clicked, so that it could be used to vary chart timescales, or navigate dashboard pages, etc, but failing badly so far.

![menu](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9a361b13942fc41d83b9a78547e2defc4fa4c00d.gif)

```auto
<template>
  <div class="d-flex justify-space-around">
    <v-menu>
      <template v-slot:activator="{ props }">
        <v-btn
          color="primary"
          v-bind="props"
        >
          Select Option
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          :value="index"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
  export default {
    data: () => ({
      items: [
        { title: 'Option 1' },
        { title: 'Option 2' },
        { title: 'Option 3' },
        { title: 'Option 4' },
      ],
    }),
  }
</script>

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [7 December 2023 20:29 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/276 "2023-12-07T20:29:49Z")

</div>

> [@Paul-Reed](#):
>
> I'm trying to get the 'selected option' to be emitted when clicked

add an event listener to your `v-list-item`  
in Vue it can be like `@click="send({payload: item.title})`

```auto
...
<v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="send({payload: item.title})">
     <v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
...

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [7 December 2023 20:52 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/277 "2023-12-07T20:52:12Z")

</div>

> [@UnborN](#):
>
> add an event listener to your `v-list-item`

Thanks Andy, you made that look very easy 😆

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [7 December 2023 20:57 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/278 "2023-12-07T20:57:05Z")

</div>

Hi @Paul-Reed - thanks for giving this a go.

### TLDR:

Add `@click="send(item.title)"` to the `v-list-item` element, that will send that message onwards in Node-RED.

### Explanations:

Will quickly point to our docs, which do include some related examples of this: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#sending-messages-in-node-red)

I also want to detail this particular case too though.

Quick VueJS tips:

- When you want to bind a value to a widget in VueJS, you can use `v-model="myVar"`
- When you want to action any updates on that value, you can use `@update:modelValue="<fcnToRun()>"`

_Normally_, you can just utilise these features to get the result you're after. Annoyingly, the `v-menu` element you've used is generally designed for navigation in a top header usage, rather than having a single active value (you'd normally use `v-select` - [docs](https://vuetifyjs.com/en/components/selects/#usage) for something like that).

Sticking with `v-menu` though, I quickly tested what it stores as it's internal `modelValue` by adding an `active` variable to our `data`, binding it to `v-model="active"` and just printing it's value into the HTML:

```html
{{ active }}
<v-menu v-model="active">

```

That seems to bind a `true`/`false` value depending on whether the menu or open or not, rather than the active option from the `v-list`.

As a result, if you're set on using `v-menu`, I would instead recommend utilising the `@click` handlers on the `v-list-item` elements. You can then utilise our built-in `send(payload)` function, which would look something like this in it's entirety:

```html
<template>
    <div class="d-flex justify-space-around">
        <v-menu>
            <template v-slot:activator="{ props }">
                <v-btn color="primary" v-bind="props">
                    Select Option
                </v-btn>
            </template>
            <v-list>
                <v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="send(item.title)">
                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-menu>
    </div>
</template>

<script>
    export default {
    data: () => ({
        items: [
            { title: 'Option 1' },
            { title: 'Option 2' },
            { title: 'Option 3' },
            { title: 'Option 4' },
        ]
    })
  }
</script>

```

Wiring this to a debug node, I see "Option X" printed out each time. You could then add other properties to your `item` object, and have different labels from what values are emitted, etc.

Hope that helps

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [7 December 2023 21:00 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/279 "2023-12-07T21:00:27Z")

</div>

Also worth mentioning that I have an article due for publishing tomorrow which is a tutorial on building a custom Video Player using the new UI Template, which should introduce a lot of the concepts for new Vue devs too.

Also also, the `<script>` tags can also contain raw JS, doesn't have to be VueJS, however, we do build in all of the helpers (e.g. `send(payload)`) into the Vue Component framework, so it does make life a lot easier.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [7 December 2023 21:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/280 "2023-12-07T21:30:16Z")

</div>

There is clearly a lot of potential in the Template node using Vuetify, but it has taken me 10 years to learn basic javascript, so don't expect anything great from me coding Vue in the foreseeable 😆  
...but, I've made a start.

Thanks for the explanation Joe

[Previous page](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142.md?page=13)

[Next page](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142.md?page=15)