# Migrating Dashboard 1.0 UI Template to Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/migrating-dashboard-1-0-ui-template-to-dashboard-2-0/83578>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 December 2023 14:55 UTC](https://discourse.nodered.org/t/migrating-dashboard-1-0-ui-template-to-dashboard-2-0/83578 "2023-12-10T14:55:55Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [10 December 2023 16:29 UTC](https://discourse.nodered.org/t/migrating-dashboard-1-0-ui-template-to-dashboard-2-0/83578/3 "2023-12-10T16:29:12Z")

</div>

_if_ this was read-only in Dashboard, i.e. not a clickable button whereby `localStorage` is then required, then a much much simpler solution would be:

> [@Dashboard 2 Beta development](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/17):
>
> Actually, I went too far, too soon Ted! It is as simple as this: The template \<v-icon :color="msg.payload?.state === 'on' ? (msg.payload?.color || 'green') : 'grey'" :icon="msg.payload?.state === 'on' ? 'mdi-led-on' : 'mdi-led-off'"\> \</v-icon\> Demo flow [{"id":"fb5c574dc9088451","type":"ui-template","z":"1ca1817447127d22","group":"34a8586ca5a5880e","dashboard":"ID-BASE-1","page":"ID-PAGE-1","name":"","order":0,"width":0,"height":0,"head":"","format":"\n\<v-icon \n :color=\"msg.pa…

This is great because it utilises the fact that `ui-template` (and every node/widget for that matter) store a `this.msg` variable in their Vue component, which represents the last received message, and is also populated when the Dashboard loads with whichever `msg` is found server-side in our statestore.

---

_[View the full topic](https://discourse.nodered.org/t/migrating-dashboard-1-0-ui-template-to-dashboard-2-0/83578)._