# Using template node with if else condition

**URL:** <https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node, javascript\
**Created:** [4 February 2024 06:53 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176 "2024-02-04T06:53:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![RudolfTheRedNode](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rudolftherednode/32/87965_2.png) [@RudolfTheRedNode](https://discourse.nodered.org/u/RudolfTheRedNode)\
**Post date:** [4 February 2024 06:53 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/1 "2024-02-04T06:53:29Z")

</div>

Hi All,

I am developing a dashboard, but I want to hide the image in dashboard that is why I need to come up with this program that can hide the image using template node. Shown below is my code inside template node.

But this code wont work! Please help to check my errors please!

```auto

<div id="parntCntr" class="AMS1Cntr">
    <a id="imgCNC1" href="#">
        <img src="data:image/png;base64,{{msg.payload.image1}}" class="ams1Image" style="width="400" height="145"">
    </a>
    <div id="overlay" class="AMS1Ovly">
        <img src="data:image/png;base64,{{msg.payload.image2}}" style="width="50" height="50"">
        <p id="test">Warning</p>
    </div>
</div>

<style>
    .AMS1Cntr {
        position: relative;
    }

    .AMS1Ovly {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }

    .AMS1Hide {
        display: none;
    }

    img.ams1Image {
        display: block;
        margin: auto;
        padding: auto;
        width: 100%;
        border-radius: 10px;
    }

    img.ams1Image:hover {
        opacity: 0.3;
    }

</style>

<script>
    
    
    var alarmPL = {{msg.payload.alarmOn}};
    var divElement = document.getElementById("overlay");

    if (alarmPL==true){
        divElement.className="AMS1Hide";
    }

</script>

```

---

<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:** [4 February 2024 07:17 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/2 "2024-02-04T07:17:57Z")

</div>

Hi. Welcome to the forum.

Is this a ui-template or template node?

Is this the old dashboard-1 (node-red-dashboard) or the newer dashboard-2 (@FlowFuse/node-red-dashboard)?

Can you show us the message that goes into the node?

---

<div class="post-metadata">

**Author:** ![RudolfTheRedNode](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rudolftherednode/32/87965_2.png) [@RudolfTheRedNode](https://discourse.nodered.org/u/RudolfTheRedNode)\
**Post date:** [4 February 2024 14:40 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/3 "2024-02-04T14:40:05Z")

</div>

Hi Steve,

This is the ui-template node sir.

message is the image sir converted to Base 64

---

<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:** [4 February 2024 15:01 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/4 "2024-02-04T15:01:01Z")

</div>

And which dashboard?

> [@Steve-Mcl](#):
>
> Is this the old dashboard-1 (node-red-dashboard) or the newer dashboard-2 (@FlowFuse/node-red-dashboard)?

And...

> [@Steve-Mcl](#):
>
> Can you show us the message that goes into the node?

---

<div class="post-metadata">

**Author:** ![RudolfTheRedNode](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rudolftherednode/32/87965_2.png) [@RudolfTheRedNode](https://discourse.nodered.org/u/RudolfTheRedNode)\
**Post date:** [5 February 2024 06:16 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/5 "2024-02-05T06:16:46Z")

</div>

Hi Steve,

Got it working already, in using script. I need to use scope.$watch in order to read the following msg from the payload. Hope later someone will learn from this 🙂

```auto
(function(scope) {
    scope.$watch('msg', function(msg) {
        if (msg.payload.alarmOn=="alarmActive") {
            $("#parntCntr1 > div").css("display", "block");
        }
        else {
            $("#parntCntr1 > div").css("display", "none");
        }
    });
    })(scope);

```

Best Regards,  
Kenneth

---

<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:** [5 February 2024 06:44 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/6 "2024-02-05T06:44:43Z")

</div>

Hi Kenneth. Glad to hear you got a solution. Always good as a learning experience.

For the benefit of future readers, this is original Dashboard-1 which uses the now unsupported angularjs (not the new Dashboard-2 which is Vue based)

The solution above is certainly one approach however there is a much simpler way. In the built in help of the template node, it mentions you can set the class dynamically via `msg.className`. So, instead, one could have prepared a CSS class that hides the image and simply updated the template via the msg (no angularjs scooped script required)

Here is a post I did some time ago that has more detail: [Dashboard Button Node - \</\>Class Field not working - #24 by Steve-Mcl](https://discourse.nodered.org/t/dashboard-button-node-class-field-not-working/52651/24)

---

<div class="post-metadata">

**Author:** ![RudolfTheRedNode](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rudolftherednode/32/87965_2.png) [@RudolfTheRedNode](https://discourse.nodered.org/u/RudolfTheRedNode)\
**Post date:** [5 February 2024 07:01 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/7 "2024-02-05T07:01:25Z")

</div>

Hi Steve,

If my dashboard version is old then will the approach to the dashboard-2 be different?  
Can you help me to translate it to vue based then?

Best regards,  
Kenneth

---

<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:** [5 February 2024 07:10 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/8 "2024-02-05T07:10:52Z")

</div>

> [@RudolfTheRedNode](#):
>
> If my dashboard version is old then will the approach to the dashboard-2 be different

Slightly, yes. That is why I asked two times which dashboard you were using.

> [@RudolfTheRedNode](#):
>
> Can you help me to translate it to vue based then?

Sorry Kenneth no, this is not something I would have time to do but I can of course point you in the right direction 👉 [Dashboard 1.0 Migration Guide | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/migration.html)

---

<div class="post-metadata">

**Author:** ![RudolfTheRedNode](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rudolftherednode/32/87965_2.png) [@RudolfTheRedNode](https://discourse.nodered.org/u/RudolfTheRedNode)\
**Post date:** [6 February 2024 05:06 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/9 "2024-02-06T05:06:33Z")

</div>

Hi Steve,

My dashboard version is 3, is it correct. Where can I find the dashboard version?

Best regards,  
Kenneth

---

<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:** [6 February 2024 08:20 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/10 "2024-02-06T08:20:42Z")

</div>

You can look in Manage Palette, or the node red startup log.

---

<div class="post-metadata">

**Author:** ![RudolfTheRedNode](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rudolftherednode/32/87965_2.png) [@RudolfTheRedNode](https://discourse.nodered.org/u/RudolfTheRedNode)\
**Post date:** [7 February 2024 03:29 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/11 "2024-02-07T03:29:08Z")

</div>

Hi @Colin and @Steve-Mcl ,

Thanks for your help. I have another question.  
Do you know how to output msg in template node , the output will based from script.

Thanks,  
Kenneth

---

<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:** [8 March 2024 03:29 UTC](https://discourse.nodered.org/t/using-template-node-with-if-else-condition/85176/12 "2024-03-08T03:29:17Z")

</div>

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