# Dashboard 2 template

**URL:** <https://discourse.nodered.org/t/dashboard-2-template/89607>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [18 July 2024 18:45 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607 "2024-07-18T18:45:52Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [18 July 2024 18:45 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/1 "2024-07-18T18:45:53Z")

</div>

These 3 lines worked perfectly on Dashboard 1.  
What do I have to write to get the same output with dashboard 2?

```auto
<div style="color:{{msg.color}}; margin:auto;" <i class="{{msg.icon}}" aria-hidden="true"></i> </div>
<div>
    <center> <small><small><small>{{msg.payload}}</small></small></small> </center>
</div>

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [18 July 2024 18:49 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/2 "2024-07-18T18:49:47Z")

</div>

4 lines @juntiedt 😄

I only just started experimenting with D2 - so better wait for others

---

<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 July 2024 20:07 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/4 "2024-07-18T20:07:28Z")

</div>

D2 uses VueJS. You should read up on how to pass variables to HTML attributes in the Vue docs. The D2 docs probably also have enough info for this as well.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 July 2024 20:45 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/5 "2024-07-18T20:45:07Z")

</div>

```auto
<div :style="{ color: msg.color, margin: 'auto' }">
    <i :class="msg.icon" aria-hidden="true"></i>
</div>
<div>
    <center><small><small><small>{{ msg.payload }}</small></small></small></center>
</div>

```

Note however dashboard 2 does not use the old font awesome 4.7 but instead uses the much better MDI icons : [Material Design Icons](https://pictogrammers.github.io/@mdi/font/7.4.47/#:~:text=mdi%2Dzigbee-,Extras,-The%20helper%20CSS)

---

<div class="post-metadata">

**Author:** ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)\
**Post date:** [18 July 2024 20:58 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/6 "2024-07-18T20:58:42Z")

</div>

This might get you started but it's somewhat verbose:

```auto
<template>
  <div>
    <div :style="{ color: msg.color, margin: 'auto' }">
      <i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
    </div>
    <div>
      <center>
        <small><small><small>{{ msg.payload }}</small></small></small>
      </center>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: {
        payload: "Placeholder",
        color: "black",
        icon: "mdi-help"
      }
    };
  },
  mounted() {
    this.$socket.on('msg-input:' + this.id, (msg) => {
      this.msg = msg;
    });
  }
}
</script>

```

---

<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:** [18 July 2024 21:29 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/7 "2024-07-18T21:29:14Z")

</div>

No need to have a custom on input listener to set `this.msg`, we do that automatically for all `ui-template` nodes: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#built-in-variables)

---

<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:** [18 July 2024 21:30 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/8 "2024-07-18T21:30:50Z")

</div>

@Steve-Mcl has given the correct answer here, but we do also have details in the docs that may be helpful for the _why_: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables)

---

<div class="post-metadata">

**Author:** ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)\
**Post date:** [18 July 2024 21:54 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/9 "2024-07-18T21:54:28Z")

</div>

> [@joepavitt](#):
>
> No need to have a custom on input listener to set `this.msg`, we do that automatically for all `ui-template` nodes: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#built-in-variables)

When I tried:

```auto
<template>
  <div>
    <div :style="{ color: msg.color, margin: 'auto' }">
      <i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
    </div>
    <div>
      <center>
        <small><small><small>{{ msg.payload }}</small></small></small>
      </center>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: {
        payload: "Placeholder",
        color: "black",
        icon: "mdi-help"
      }
    };
  }
}
</script>

```

I found it wouldn't override the defaults I set with the values from the incoming msg so I had assumed that is what I needed.

---

<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:** [19 July 2024 06:29 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/10 "2024-07-19T06:29:57Z")

</div>

Yeah, here you are defining a _new_ `msg` variable in your `data()`, whoch overrides the one we build by default.

The best way to set defaults is to inject a message with the values. If you want those defaults everytime you view the page, you have two options:

1. Wire a `ui-event` node, which emits an event on every page view. And pass the defaults as a message to this node.
2. Use Vue's [computed variables](https://vuejs.org/guide/essentials/computed.html#basic-example) where you could have a variable `color` that returns `msg.color || 'black'`. So, uses the injected color if its defined, otherwise, falls back to the default

---

<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:** [19 July 2024 06:31 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/11 "2024-07-19T06:31:27Z")

</div>

Actually, you dont even need the computed variable, as you've already got that same structure inline for the icon.

So, just remove the `msg` declaration in `data()` and put the `|| 'black'` logic inline loke you do for the icon

---

<div class="post-metadata">

**Author:** ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)\
**Post date:** [19 July 2024 15:27 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/12 "2024-07-19T15:27:57Z")

</div>

Thank you for teaching me this, It was needed. It had not occurred to me to set the defaults like that with a `ui-event` nodes. Way better for stuff with many variables like the main passion project I've been working on.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [20 July 2024 09:22 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/13 "2024-07-20T09:22:05Z")

</div>

Many thanks for your support!  
attached 2 pictures:

1. dashboard 1:  

2. dashboard 2:

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [20 July 2024 10:04 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/14 "2024-07-20T10:04:11Z")

</div>

Perhaps offtopic, but still relevant i think, could the default template code be modified, so that it includes more examples with the `mounted` and `methods` that show how to listen for incoming payload, because grabbing documentation each time is not ideal.

Here i refer to the ` this.$socket.on('msg-input:...'` functions.

---

<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:** [20 July 2024 10:58 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/15 "2024-07-20T10:58:01Z")

</div>

Absolutelt relevant and a very good idea.

Couls you raise an issue please (I am away for the weekend and dont want to miss/forget this)

---

<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:** [3 August 2024 10:58 UTC](https://discourse.nodered.org/t/dashboard-2-template/89607/16 "2024-08-03T10:58:43Z")

</div>

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