# Dashboard 2 ui-template config error

**URL:** <https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 January 2024 09:33 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785 "2024-01-22T09:33:10Z")\
**Posts on this page:** 14\
**Page:** 1

<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:** [22 January 2024 09:33 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/1 "2024-01-22T09:33:10Z")

</div>

Using Dashboard 2.0, after upgrade to 0.11.6 a previously working ui-template is showing config error when I open and close it. Am I doing something wrong?

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

Hovering over the red triangle says Invalid properties: - ui

```auto
[
    {
        "id": "10c9fcd88a6bb904",
        "type": "ui-template",
        "z": "40e930a4b072bbed",
        "group": "",
        "page": "869e7578693d5d46",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": ".bike_timer_text {\n font-size: 400% !important;\n text-align: center;\n margin-top: 15%\n}\n.bike_counter_text {\n font-size: 1000% !important;\n text-align: center;\n margin-top: 20%\n}\n\n \n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 190,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "869e7578693d5d46",
        "type": "ui-page",
        "name": "Bike Pedalling",
        "ui": "04ee189a49c54f22",
        "path": "/bikepedalling",
        "layout": "flex",
        "theme": "23aa79f4e489b044",
        "order": 10,
        "className": ""
    },
    {
        "id": "04ee189a49c54f22",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard"
    },
    {
        "id": "23aa79f4e489b044",
        "type": "ui-theme",
        "name": "Theme 1",
        "colors": {
            "surface": "#ffffff",
            "primary": "#514fba",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]

```

---

<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:** [22 January 2024 09:56 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/2 "2024-01-22T09:56:06Z")

</div>

Hi Colin, something definitely seems to have happened with the `ui-template` node - see [Dynamic Properties - Ensure consistency on how dynamic classes (and other props) are set by joepavitt · Pull Request #497 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/497#issuecomment-1902859908)

But i havent worked out what yet (I dont work Mondays, back at keyboard tomorrow)

Annoyingly, all of my local testing environments are working

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [22 January 2024 16:00 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/3 "2024-01-22T16:00:43Z")

</div>

I spent a lot of time creating this button with a dimmer and after the last update it no longer works correctly. Before I sent on and off into it as a payload and it changed... but it passed the messages directly. Now, the message doesn't go through but the button doesn't work anymore.

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

```auto
<template>
    <v-card ref="card"
        style="display: flex; flex-direction: column; margin: auto; width: 75px; height: 105px; background-color: #4F4F4F; border: 1px solid #000000; border-radius: 18px;">
        <v-btn ref="botao"
            style="width: 75px; height: 75px; color: #000000; background-color: #4F4F4F; font-size: 14px; border-radius: 18px;"
            stacked @click="alternar">
            Luz
            <v-icon ref="icon" style="font-size: 45px;">mdi-lightbulb-variant-outline</v-icon>
        </v-btn>
        <v-slider ref="barra" v-model="barravalor" @end="deslisamento"></v-slider>
    </v-card>
</template>

<script>
    export default {
        data() {
            return {
                chave: 'a1',
                barravalor: 0
            };
        },
        methods: {
            alternar: function () {
                if (window.localStorage.getItem(this.chave) === 'ON') {
                    this.desligar();
                    this.send({ status: 'OFF' });
                } else if (window.localStorage.getItem(this.chave) === 'OFF') {
                    this.ligar();
                    this.send({ status: 'ON' });
                } else {
                    this.desligar();
                }
            },
            ligar: function () {            
                window.localStorage.setItem(this.chave, 'ON');
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                this.barravalor = 1;
                
            },
            desligar: function () {                
                window.localStorage.setItem(this.chave, 'OFF');
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px'; 
                this.barravalor = 0;
            },
            deslisamento: function () {
                if (window.localStorage.getItem(this.chave) === "ON") {
                    this.send({ brilho: parseInt(this.barravalor) });
                } else {
                    this.barravalor = 0;
                }       
            },
            setState (value) {
                if (value === 'ON') {                    
                    this.ligar();
                } else if (value === 'OFF') {                    
                    this.desligar();
                }
            },
        },
        mounted () {          
            this.setState(window.localStorage.getItem(this.chave));         
            this.$socket.on("msg-input:" + this.id, (msg) => {
                this.setState(msg.payload);
            });                               
        }
    }
</script>

```

Another important detail is that I still don't know how to maintain the status of the button when the page is updated.

---

<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:** [22 January 2024 17:38 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/4 "2024-01-22T17:38:55Z")

</div>

Hi @diegodamaceno - so sorry for the inconvenience, for the template affected, can you open the Template in the Node RED Editor please and toggle off "Pass through" option, deploy, then toggle it back off again, and re-deploy?

That option was added in 0.11.6 and is the only thing that has changed on the UI Template.

Will be able to investigate properly again tomorrow once I'm working (off today).

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [22 January 2024 18:57 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/5 "2024-01-22T18:57:24Z")

</div>

Worked perfectly. The option to not let the message pass was great. Now I'm studying a way for the template to save the status of the button because when the page is updated, everything is lost in the template.

---

<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:** [23 January 2024 11:21 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/6 "2024-01-23T11:21:39Z")

</div>

Which versions of Node-RED are you guys using @Colin and @diegodamaceno?

---

<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:** [23 January 2024 12:41 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/7 "2024-01-23T12:41:00Z")

</div>

NR 3.1.3, nodejs 20

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [23 January 2024 14:53 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/8 "2024-01-23T14:53:02Z")

</div>

NR 3.1.3 nodejs 20.5.1

---

<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:** [24 January 2024 07:38 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/9 "2024-01-24T07:38:45Z")

</div>

Thanks both - @knolleary fyi ^^ suspect this is linked to the validation problem we discussed in `3.1.3`

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [24 January 2024 10:36 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/10 "2024-01-24T10:36:52Z")

</div>

Hi Joe, are there still issues with validation in v3.1.3?  
It's strange you use a function not a validator 🤔

---

<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:** [24 January 2024 12:01 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/11 "2024-01-24T12:01:11Z")

</div>

> [@GogoVega](#):
>
> It's strange you use a function not a validator

Not sure I follow?

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [24 January 2024 12:09 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/12 "2024-01-24T12:09:37Z")

</div>

We are talking about the `ui-template` node for the `ui` property?  
So:

```js
ui: {
  type: 'ui-base',
  validate: function () {
    return (this.templateScope === 'widget:ui' && !!this.ui) || (this.templateScope !== 'widget:ui')
  }
}

```

It's a custom validation with a function (not `RED.validators`)  
We modified `RED.validators` but not how a custom function works

---

<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:** [26 January 2024 09:58 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/13 "2024-01-26T09:58:55Z")

</div>

This does still use Node-RED validation architecture, but none of the out-of-the-box `RED.validators` did the checks we needed, so we built our own.

---

<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:** [25 February 2024 09:59 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/14 "2024-02-25T09:59:19Z")

</div>

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