# Ui\_template disappears when msg.payload input

**URL:** <https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [29 September 2024 07:23 UTC](https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042 "2024-09-29T07:23:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Panda](https://avatars.discourse-cdn.com/v4/letter/p/71c47a/32.png) [@Panda](https://discourse.nodered.org/u/Panda)\
**Post date:** [29 September 2024 07:23 UTC](https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042/1 "2024-09-29T07:23:06Z")

</div>

Hey guys,  
I think the ui\_template is my final boss 😭

I would like to create a template like this:

 ![Screenshot_20240929_090243_Edge](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/4073582362d5200d5de6068d13c7febc25a2093a.jpeg)

It works quite well so far, but as soon as I send "msg.payload.LWL" or "msg.payload" to the template, it disappears. The icon alone works.

The icon function is based on

> [On/off button for dashboard 2.0 in ui\_template (updates and improvements)](https://discourse.nodered.org/t/on-off-button-for-dashboard-2-0-in-ui-template-updates-and-improvements/88976)

```auto
<template>
    <div class="container">
        <div class="title">Garagem</div>
        <v-icon 
            class="icon" 
            ref="icon" 
            @click="alternar" 
            :style="iconStyle"
        >
            {{ iconName }}
        </v-icon>
        <p class="textstyle">
            <span class="hostname-label">Hostname: </span>
            <a :href="`http://${msg.payload.StatusNET.IPAddress}`" class="hostname" target="_blank" rel="noopener noreferrer">
                {{ msg.payload.StatusNET.Hostname }}
            </a>
            <br />
            <span>IP: {{ msg.payload.StatusNET.IPAddress }}</span>
            <br />
            <span :class="{'online': msg.payload.LWT === 'Online', 'offline': msg.payload.LWT === 'Offline'}">
                Status: {{ msg.payload.LWT }}
            </span>
            <br />
            <span>Restart Grund: {{ msg.payload.StatusPRM.RestartReason }}</span>
            <br />
            <span>Firmware: {{ msg.payload.StatusFWR.Version }}</span>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            iconName: 'mdi-television-ambient-light'
        };
    },
    computed: {
        iconStyle() {
            return {
                color: this.value === 'ON' '#BD9608' : '#A9A9A9',
                textShadow: this.value === 'ON' '0px 0px 10px #BD9608' : '0px 0px 0px'
            };
        }
    },
    methods: {
        alternar() {
            if (this.value === 'ON') {
                this.off_alternar();
            } else {
                this.on_alternar();
            }
        },
        on_alternar() {
            this.value = "ON";
            this.send({ payload: "ON" });
        },
        off_alternar() {
            this.value = "OFF";
            this.send({ payload: "OFF" });
        },
        on() {
            this.value = "ON";
        },
        off() {
            this.value = "OFF";
        }
    },
    watch: {
        msg(newVal) {
            if (newVal.payload === "ON") {
                this.on();
            } else {
                this.off();
            }                        
        }
    },
    mounted() {
        this.off();
    }
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    margin: auto;
    height: auto;
    width: 100%;
    background-color: #4F4F4F;
    color: #000000;
    border: 1px solid #000000;
    font-size: 14px;
    border-radius: 18px;
    align-items: flex-start;
    padding: 10px;
}

.title {
    margin: 5px auto auto auto;
    font-size: 85%;
    text-align: center;
}

.icon {
    width: 50%;
    margin: -7px auto auto auto;
    font-size: 300%;
    transition: color 0.3s, text-shadow 0.3s;
}

.textstyle {
    margin-top: 5px;
    text-align: left;
    color: #FFFFFF;
}

.hostname-label {
    font-weight: bold;
}

.hostname {
    color: #800080;
    text-decoration: underline;
}

.hostname:visited {
    color: #800080;
}

.online {
    color: green;
    font-weight: bold;
}

.offline {
    color: red;
    font-weight: bold;
}
</style>

```

Does anyone have an idea what I'm doing wrong?  
Thanks in advance again 😅

---

<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:** [29 September 2024 09:09 UTC](https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042/2 "2024-09-29T09:09:46Z")

</div>

Your template is doing exactly what you asked it to do. It is showing you stuff like `msg.payload.StatusNET.IPAddress` If you send an empty payload or different payload, it will show you exactly that.

Use a data value and something in the topic to differentiate different inputs.

Here is a recent post demonstrating that: [Dashboard 2.0 ui-template multiple injections - #3 by Steve-Mcl](https://discourse.nodered.org/t/dashboard-2-0-ui-template-multiple-injections/91231/3)

---

<div class="post-metadata">

**Author:** ![Panda](https://avatars.discourse-cdn.com/v4/letter/p/71c47a/32.png) [@Panda](https://discourse.nodered.org/u/Panda)\
**Post date:** [29 September 2024 10:03 UTC](https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042/3 "2024-09-29T10:03:58Z")

</div>

If I send an inject with on or off the template disappears, if I resend the data it takes over the status and the template is back

```auto
<template>
    <div class="container">
        <div class="title">Garagem</div>
        <v-icon 
            class="icon" 
            ref="icon" 
            @click="alternar" 
            :style="iconStyle"
        >
            {{ iconName }}
        </v-icon>
        <p class="textstyle">
            <span class="hostname-label">Hostname: </span>
            <a :href="`http://${msg.payload.StatusNET.IPAddress}`" class="hostname" target="_blank" rel="noopener noreferrer">
                {{ msg.payload.StatusNET.Hostname }}
            </a>
            <br />
            <span>IP: {{ msg.payload.StatusNET.IPAddress }}</span>
            <br />
            <span :class="{'online': status === 'Online', 'offline': status === 'Offline'}">
               Status: {{ status }}
            </span>
            <br />
            <span>Restart Grund: {{ msg.payload.StatusPRM.RestartReason }}</span>
            <br />
            <span>Firmware: {{ msg.payload.StatusFWR.Version }}</span>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            iconName: 'mdi-television-ambient-light'
        };
    },
    computed: {
        iconStyle() {
            return {
                color: this.value === 'ON' ? '#BD9608' : '#A9A9A9',
                textShadow: this.value === 'ON' ? '0px 0px 10px #BD9608' : '0px 0px 0px'
            };
        }
    },
    methods: {
        alternar() {
            if (this.value === 'ON') {
                this.off_alternar();
            } else {
                this.on_alternar();
            }
        },
        on_alternar() {
            this.value = "ON";
            this.send({ payload: "ON" });
        },
        off_alternar() {
            this.value = "OFF";
            this.send({ payload: "OFF" });
        },
        on() {
            this.value = "ON";
        },
        off() {
            this.value = "OFF";
        }
    },
    watch: {
        msg: function () {
            if (this.msg.topic === 'switch') {
                if (this.msg.payload === "ON") {
                    this.on();
                } else {
                    this.off();
                }
            } else if (this.msg.topic === 'status') {
                this.status = this.msg.payload.LWT;
            } 
        }
    },
    mounted() {
        this.off();
    }
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    margin: auto;
    height: auto;
    width: 100%;
    background-color: #4F4F4F;
    color: #000000;
    border: 1px solid #000000;
    font-size: 14px;
    border-radius: 18px;
    align-items: flex-start;
    padding: 10px;
}

.title {
    margin: 5px auto auto auto;
    font-size: 85%;
    text-align: center;
}

.icon {
    width: 50%;
    margin: -7px auto auto auto;
    font-size: 300%;

```

---

<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:** [29 September 2024 10:13 UTC](https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042/4 "2024-09-29T10:13:33Z")

</div>

Because you are still using `msg.payload.StatusNET.Hostname` in the html.

I said

> [@Steve-Mcl](#):
>
> Use a data value

And I linked you to a working example.

---

<div class="post-metadata">

**Author:** ![Panda](https://avatars.discourse-cdn.com/v4/letter/p/71c47a/32.png) [@Panda](https://discourse.nodered.org/u/Panda)\
**Post date:** [29 September 2024 13:51 UTC](https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042/5 "2024-09-29T13:51:46Z")

</div>

Didn't saw the data Part 🙈

---

<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:** [13 October 2024 13:52 UTC](https://discourse.nodered.org/t/ui-template-disappears-when-msg-payload-input/92042/6 "2024-10-13T13:52:23Z")

</div>

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