# Template Button Msg Payload

**URL:** <https://discourse.nodered.org/t/template-button-msg-payload/69896>\
**Category:** Dashboard\
**Created:** [1 November 2022 14:19 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896 "2022-11-01T14:19:13Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [1 November 2022 14:19 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/1 "2022-11-01T14:19:13Z")

</div>

I have a template button with the following send config. I am seeing the "stringvalue" in the debug output but can't figure out how to reference it when the path is simply "payload". Thanks.

$scope.send({"topic":topic,"payload":"stringvalue"});

---

<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:** [1 November 2022 15:39 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/2 "2022-11-01T15:39:00Z")

</div>

Do you mean it is in `msg.payload`?  
Show us what you see in the debug window and tell us where you are trying to reference it.

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [1 November 2022 16:07 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/3 "2022-11-01T16:07:37Z")

</div>

If I have this send: $scope.send({"topic":topic,"payload":"manual"}); this is what I get in the debug:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18bfe0326c697ad0768ee366aba834ae25bef50e.png) ... this path is simply "payload".

I need to send it into a function where I need to reference in am "if statement

---

<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:** [1 November 2022 16:37 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/4 "2022-11-01T16:37:38Z")

</div>

The path shown is the path inside the message, so you should use `msg.payload`. For example

```auto
if (msg.payload === "manual") {
    ....
}

```

---

<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:** [1 November 2022 16:38 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/5 "2022-11-01T16:38:41Z")

</div>

Don't forget that often you don't need to use a Function. Perhaps a Switch node will do what you want, for example. It does depend on what you want to do of course.

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [1 November 2022 18:12 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/6 "2022-11-01T18:12:42Z")

</div>

Ok, I got it (not sure where I went wrong before) - thank you. Question why === , not == (which is what I've always been using).

---

<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:** [1 November 2022 18:50 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/7 "2022-11-01T18:50:27Z")

</div>

> **[Difference Between == and === in Javascript | Scaler Topics](https://www.scaler.com/topics/javascript/difference-between-double-equals-and-triple-equals-in-javascript/)**
>
> The comparison is done by == and === operators in javascript. Learn the main difference between == and === operator in javascript with Scaler Topics.

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [1 November 2022 19:42 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/8 "2022-11-01T19:42:44Z")

</div>

I am still having a problem. In the UI template I have a bunch of text fields with a submit button + plus a toggle button to cycle between auto/manual. Is the toggle button msg out interfering with with the other data? Can it be called something else to differentiate?

```auto

<div flex="" style="margin 3px 0px 0px 7px" layout="row">

<div flex="35" style="padding:0 5px">    
    <div layout="column">
       <div><md-input-container><input aria-label="amt" ng-model="amt"></md-input-container></div> 
     <div layout="row">
        <div><md-checkbox ng-model="aut" aria-label="aut">A</md-checkbox></div> 
        <div><md-checkbox ng-model="sl_trl" aria-label="sl_trl">l*</md-checkbox></div> 
     </div>
    </div> 
    </div>

<div flex="15" style="padding:0 5px">    

      <div style="text-align:center"><md-input-container><input ng-model="sl" aria-label="sl"><span class=mylabel>SL</span></md-input-container></div>

</div>

<div flex="20" style="padding:0 5px">    

       <div style="text-align:center"><md-input-container><input ng-model="tp" aria-label="tp"><span class=mylabel>TP</span></md-input-container></div> 
</div>
<div flex="15" style="padding:0 5px">

       <div style="text-align:center"><md-input-container><input aria-label="tp_trl" ng-model="tp_trl"><span class=mylabel>TR</span></md-input-container></div>        

</div>
<div flex="15" style="padding:0 5px">

       <div style="text-align:center"><md-input-container><input aria-label="tm" ng-model="tm"><span class=mylabel>T</span></md-input-container></div>        

</div>

</div>

<div flex="" layout="row">
  <div flex="64" style = "text-align:center; margin: 0px 5px 0px 15px;"><md-button aria-label="set" class="md-accent md-hue-2 md-raised" ng-click="send({payload:{amt:amt, aut:aut, sl_trl:sl_trl, sl:sl, tp:tp, tp_trl:tp_trl, tm:tml}})">SET</md-button></div>
  <div flex="30" ><md-button id="mute-button" class="md-button remote-button" data-state="on" ng-click="toggleMute()" ><i class="material-icons md-48">handshake</i></md-button></div>
</div>
<script>

(function($scope) {

    var btnSelector = "#mute-button";//Set the selector to match the button ID above
    var topic = "mode"; //edit me to suit - this is sent to your flow as msg.topic
    var icon1 = "toll";//on icon
    var icon2 = "handshake";//muted icon
    
    //create a function to call in ng-click (see the md-button attributes above)
    scope.toggleMute = function(){
        debugger
        var $btn = $(btnSelector);
        var currentState = $btn.data("state");
        //if currently on, change to off state & send new payload
        if(currentState == "on"){
            mute($btn);
            $scope.send({"topic":topic,"payload":"manual"});
        } else {
            unmute($btn);
            $scope.send({"topic":topic,"payload":"auto"});
        }
    } 
    //watch for node-red msgs
    scope.$watch('msg', function(msg) {
        var $btn = $(btnSelector);
        if (msg) {
            if(msg.payload == "auto"){
                unmute($btn);
            } else if(msg.payload == "manual"){
                mute($btn);
            }
          
        }
    }); 
    //helper function to set the correct icon & update the "data-state" memory
    function mute($btn){
        var $ico = $btn.find("i");
        $btn.data("state","off");//set data-state to off (remember state)
        // $ico.removeClass("fa-volume_mute")
        // $ico.addClass("fa-volume_off")
        $ico.text(icon2);
    }
    //helper function to set the correct icon & update the "data-state" memory
    function unmute($btn){
        var $ico = $btn.find("i");
        $btn.data("state","on");//set data-state to on (remember state)
        // ico.removeClass("fa-volume_off");
        // ico.addClass("fa-volume_mute");
        $ico.text(icon1);
    }

})(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![interscope101](https://avatars.discourse-cdn.com/v4/letter/i/a88e4f/32.png) [@interscope101](https://discourse.nodered.org/u/interscope101)\
**Post date:** [1 November 2022 21:51 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/9 "2022-11-01T21:51:25Z")

</div>

I just realized that the toggle button sends out data from ALL of the input fields. I assumed it was only going to be the auto | manual flag. Does that make sense?

---

<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:** [2 November 2022 09:47 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/10 "2022-11-02T09:47:02Z")

</div>

Sorry, that sort of code is not something I do often. Hopefully someone else can help.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [2 November 2022 13:32 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/11 "2022-11-02T13:32:32Z")

</div>

Works for me. Output from `toggle button`;

```auto
{"topic":"mode",
"payload":"auto",
"socketid":"61eEHm5Pgfdc5O2-AAAB",
"_msgid":"4902b5d7fd19069f"}

```

`Set button`

```auto
{"payload":
   {"amt":"21",
    "aut":true,
    "sl":"0",
    "tp":"0",
    "tp_trl":"0"
   },
"socketid":"61eEHm5Pgfdc5O2-AAAB",
"_msgid":"be898a0e5527a5c9"
}

```

---

<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:** [2 December 2022 13:33 UTC](https://discourse.nodered.org/t/template-button-msg-payload/69896/12 "2022-12-02T13:33:27Z")

</div>

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