# Questions about upgrading to Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/questions-about-upgrading-to-dashboard-2-0/90583>\
**Category:** Dashboard\
**Created:** [31 August 2024 09:41 UTC](https://discourse.nodered.org/t/questions-about-upgrading-to-dashboard-2-0/90583 "2024-08-31T09:41:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [31 August 2024 09:41 UTC](https://discourse.nodered.org/t/questions-about-upgrading-to-dashboard-2-0/90583/1 "2024-08-31T09:41:15Z")

</div>

**Background**  
I use Node Red old dashboard extensively, and have built a number of dynamically generated UIs using UI Template nodes. For example, a lighting control panel that enumerates lights within a "zone", then displays sliders for each light in that zone.

I'd like to get to work installing Dashboard 2.0 and leveraging some of the new technologies there (which I personally I have no idea about yet...)

**Questions**

1. Can I run old Dashboard concurrently with Dashboard 2.0? (This would allow me to actually build for Dashboard 2.0 whilst still being able to turn the lights / heating on!)

2. Can you look at the below code and screenshot, and tell me if I can achieve this kind of thing in Dashboard 2.0, maybe with some pointers?

Here are the main things I need to do:

- Implement sliders, buttons, colour pickers
- Loop through JS objects / arrays etc and display the output in CSS divs / tables etc.
- Conditionally display things based on incoming messages, e.g. if msg.toggle is true, then show some control or conditional CSS etc

... so here's an example of what I would need to port:

```auto
<div class="slider-container">
    <div ng-repeat="(key, value) in msg.fixturesettings" class="slider-row">
        <div class="slider-label"><div class="slider-label-text">{{value.label}} <span style="slider-val">(<span ng-if="value.controltype != '1_non_dim'">{{value.setting.brightness}}</span><span ng-if="value.controltype == '1_non_dim'">{{(value.setting.state === true) ? 'On' : 'Off'}}</span>)</span></div></div>
        <div class="slider-colpick"><div ng-if="value.controltype != '3_RGB'" class="no-color-picker">(W)</div><input ng-if="value.controltype == '3_RGB'" class="picker" type="color" ng-model="value.colour" ng-change="send({sysaction: 'col', topic: key, colour: value.colour, zone: msg.zoneid})" /></div>
        <div class="slider-slider">
            <div ng-if="value.controltype == '1_non_dim'"><md-switch ng-model="value.setting.state" ng-change="send({sysaction: 'switch', topic: key, state: value.setting.state, zone:msg.zoneid})"></md-switch></div>
            <div ng-if="value.controltype != '1_non_dim'"><md-slider min="0" max="100" step="{{value.resolution}}" ng-model="value.setting.brightness" ng-change="send({sysaction: 'bri', topic: key, brightness: value.setting.brightness, zone:msg.zoneid})"></md-slider></div>
        </div>
    </div>
</div>

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/b/5b8a8f6b3be3d2d390e23efa7d50757a6d5a52f7.png)

---

<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:** [31 August 2024 09:52 UTC](https://discourse.nodered.org/t/questions-about-upgrading-to-dashboard-2-0/90583/2 "2024-08-31T09:52:27Z")

</div>

> [@hazymat](#):
>
> Can I run old Dashboard concurrently with Dashboard 2.0?

Yes

> [@hazymat](#):
>
> Can you look at the below code and screenshot, and tell me if I can achieve this kind of thing in Dashboard 2.0

Yes, using similar constructs in the `vue` flavour instead of `angularjs`

Something like this (100% untested)

```html
<div class="slider-container">
    <div v-for="(value, key) in msg.fixturesettings" :key="key" class="slider-row">
        <div class="slider-label">
            <div class="slider-label-text">
                {{ value.label }} 
                <span class="slider-val">
                    (<span v-if="value.controltype !== '1_non_dim'">{{ value.setting.brightness }}</span>
                    <span v-else>{{ value.setting.state ? 'On' : 'Off' }}</span>)
                </span>
            </div>
        </div>
        <div class="slider-colpick">
            <div v-if="value.controltype !== '3_RGB'" class="no-color-picker">(W)</div>
            <input v-if="value.controltype === '3_RGB'" class="picker" type="color" v-model="value.colour" @change="send({ sysaction: 'col', topic: key, colour: value.colour, zone: msg.zoneid })" />
        </div>
        <div class="slider-slider">
            <div v-if="value.controltype === '1_non_dim'">
                <input type="checkbox" v-model="value.setting.state" @change="send({ sysaction: 'switch', topic: key, state: value.setting.state, zone: msg.zoneid })" />
            </div>
            <div v-else>
                <input type="range" min="0" max="100" :step="value.resolution" v-model="value.setting.brightness" @change="send({ sysaction: 'bri', topic: key, brightness: value.setting.brightness, zone: msg.zoneid })" />
            </div>
        </div>
    </div>
</div>

```

---

<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:** [14 September 2024 09:52 UTC](https://discourse.nodered.org/t/questions-about-upgrading-to-dashboard-2-0/90583/3 "2024-09-14T09:52:45Z")

</div>

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