# Ui-template node problems

**URL:** <https://discourse.nodered.org/t/ui-template-node-problems/21889>\
**Category:** Dashboard\
**Created:** [17 February 2020 21:14 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889 "2020-02-17T21:14:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![pvklink](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@pvklink](https://discourse.nodered.org/u/pvklink)\
**Post date:** [17 February 2020 21:14 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/1 "2020-02-17T21:14:40Z")

</div>

I finally got my two toggle buttons (DEBUG AND CAM) ready. And now i created two new challenges...

1. The size (height) of the new toggle button; i want this the same as my start button
2. The description on the toggle buttons; it now displays the value off the toggle state, but i like the button value to have another value.

For exampe, if the debug screen is hidden, the button must show "show debug". It now shows debug OFF...

![Naamloos2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/45a5d13d1919c56200cd9d81afab84a71bbd0bdf.jpeg)

 ![Naamloos1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/f/ff954e06dae58460a4711b9f221f8e605a049d78.jpeg)

---

<div class="post-metadata">

**Author:** ![pvklink](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@pvklink](https://discourse.nodered.org/u/pvklink)\
**Post date:** [18 February 2020 15:40 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/2 "2020-02-18T15:40:45Z")

</div>

solved it partially , with a workaround

1. height and width with

```auto
<md-button class="md-cornered" style="width: 96px; height: 120px"
        ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        title="CAM"
    >
    DEBUG {{msg.payload}}
 </md-button>

```

1. Hide field by making seperate groups for one or more fields. Groups can be hide/shown

2. Still dont have a solution for the text on the button; i want the text added with XXX for value A and YYY for value b of the payload

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [18 February 2020 17:35 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/3 "2020-02-18T17:35:32Z")

</div>

> [@pvklink](#):
>
> DEBUG {{msg.payload}}

For point 3, you’re now displaying “DEBUG “ followed by the contents of msg.payload.  
You use a ternary operator for the ng attributes, but you can do the same here, as long as you understand the meaning of `{{ foo }}`

For example `{{ msg.payload === ‘A’ ? ‘XXXX’ : msg.payload === ‘B’ ? ‘YYYY’ : ‘ZZZZ }}`

---

<div class="post-metadata">

**Author:** ![pvklink](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@pvklink](https://discourse.nodered.org/u/pvklink)\
**Post date:** [18 February 2020 20:54 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/4 "2020-02-18T20:54:19Z")

</div>

THANKS afelix, now it is complete!

@but i cant get it working, button is empty...

used

```auto
<md-button class="md-cornered" style="width: 96px; height: 120px;"
        ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        title="CAM"
    >
{{ msg.payload === ‘On’ ? 'xxx' : msg.payload === ‘Off’ ? ‘yyy’ : ‘zzz' }}

    </md-button>

```

the input of the template node  
 ![Naamloos](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/486ab884670df0e5a6476c7478d6f42b40eca490.jpeg)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [18 February 2020 22:10 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/5 "2020-02-18T22:10:45Z")

</div>

That's probably because I was typing it on my phone which defaults to smart quotes and since I was cooking dinner I didn't take the time to fix it. Replace the single quotes by actual single quotes, and put the thing down you wanted to prefix it with.

---

<div class="post-metadata">

**Author:** ![pvklink](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@pvklink](https://discourse.nodered.org/u/pvklink)\
**Post date:** [18 February 2020 22:15 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/6 "2020-02-18T22:15:02Z")

</div>

🤣 i hope dinner went ok..  
I will try it, now going to sleep its sleeping time in holland...

---

<div class="post-metadata">

**Author:** ![pvklink](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@pvklink](https://discourse.nodered.org/u/pvklink)\
**Post date:** [19 February 2020 06:47 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/7 "2020-02-19T06:47:06Z")

</div>

And it works!, see the result..  
Thank you @afelix  
Perhaps split the button text over 2 lines?

{{ msg.payload === 'On' ? 'Disable CAM' : msg.payload === 'Off' ? 'Enable CAM' : 'CAM' }}

Result

 ![Naamloos](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/654b7060ef6f0332b24e2305602ab5ad7811f283.jpeg)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [19 February 2020 07:35 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/8 "2020-02-19T07:35:10Z")

</div>

Het was ook bedtijd voor mij, maar dat ziet er goed uit.

Try adding a html break tag between the static word and the dynamic state:

```auto
<md-button class="md-cornered" style="width: 96px; height: 120px;" 
ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'" 
ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);" title="CAM" >
 {{ msg.payload === 'On' ? 'Disable' : msg.payload === 'Off' ? 'Enable' : 'invalid state' }} <br />CAM
</md-button>

```

With the break tag and standard term outside of the snippet to prevent the HTML from being escapes by mustache. As for the ` : 'invalid state'` at the end, it can safely be removed to only show “CAM” on the button, it was in the example to show how it worked.

---

<div class="post-metadata">

**Author:** ![pvklink](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@pvklink](https://discourse.nodered.org/u/pvklink)\
**Post date:** [19 February 2020 08:39 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/9 "2020-02-19T08:39:57Z")

</div>

yes it works, thanks for all your help @afelix. This project is finished.  
Up to the next challenge!

```auto

<md-button class="md-cornered" style="width: 96px; height: 120px"
        ng-class="msg.payload=='On' ? 'md-accent md-raised ' : 'md-primary'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        title="CAM"
    >
Debug<br>
{{ msg.payload === 'On' ? 'Disable' : msg.payload === 'Off' ? 'Enable' : 'DEBUG' }}

 </md-button>

```

---

<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:** [4 March 2020 08:40 UTC](https://discourse.nodered.org/t/ui-template-node-problems/21889/10 "2020-03-04T08:40:00Z")

</div>

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