# Questions About Template Widget

**URL:** <https://discourse.nodered.org/t/questions-about-template-widget/41049>\
**Category:** Dashboard\
**Created:** [15 February 2021 22:00 UTC](https://discourse.nodered.org/t/questions-about-template-widget/41049 "2021-02-15T22:00:34Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [15 February 2021 22:00 UTC](https://discourse.nodered.org/t/questions-about-template-widget/41049/1 "2021-02-15T22:00:35Z")

</div>

I have been having a go at designing my own button and have managed a workable solution. However, I have a couple of questions.

The first question is that when using `send(msg)` from within a `scope$watch` function a new property `templateScope` gets added. So, I was wondering what this property is supposed to be used for?

The second question is more of a request for help. I have shown the code below and what I want to know is 'is there any way of getting the HTML element (in this case a button) object into the `<script>` without using an `id` or some other method of having to know some identifier in the HTML?'. I am thinking of something along the lines of `$element.target` but I have not so far found a way of accessing it.

````auto
<button id = "sonoffBtn02" class = "stdButton"
    data-payload = '["OFF", "ON"]'
    data-text = '["Off", "On"]'
    data-device-name = "sonoffmini02"
    data-device-type = "switch"
    ng-class = "{true: 'redButton', false: 'greyButton'}[btnText == 'On']"
    ng-click = "changeState()">

    <text>{{btnText}}</text>

</button>

<script>
    (function(scope) {
        // Could also use [angular.element(document.getElementById('sonoffBtn')] or [angular.element("#sonoffBtn")]
        // Introduction of a bit of JQuery to get the Element object
        const el = angular.element(document.querySelector("#sonoffBtn02"));
        const self = $(el);

        // Data to use in the Scope
        let btnData = {
            text: self.data("text"), 
            payload: self.data("payload"), 

        };                                                                      

        let actionMsgIn = true; // Set to true to act on a change in msg
        let topic = "ButtonState"; // Set topic if required
        let btnState = 0; // Current toggle count. Max is length of text array
        
        let device = {name: self.data("deviceName"), type: self.data("deviceType")};

        // Data to return to HTML button
        scope.btnText = btnData.text[btnState]; // Button text, also used as Class selector

        /* Functions to use in the Scope */
        // Toggle button state, update button text and create msg object
        scope.changeState = function() {
            toggle();
            showChange();

            this.msg = {};

            this.msg.device = device;
            this.msg.payload = btnData.payload[btnState];
            this.msg.topic = topic;

        };

        // Triggered if the node receives a msg. Updates the button according to the payload received
        scope.$watch('msg', function(msg) {
            if (actionMsgIn) {
                // Only change btnState if payload is valid (i.e. is found in btnData.payload)
                if (btnData.payload.indexOf(msg.payload) !== -1) {
                    btnState = btnData.payload.indexOf(msg.payload);
                }

                showChange();

                msg.device = device;
                scope.send(msg);

            }

        });
        
        // Toggle button state between 0 and length of btnData.text array
        function toggle() {
            btnState = (++btnState) % btnData.text.length; 

        };
        
        // Update the scope variables to reflect back to the HTML
       function showChange() {
            scope.btnText = btnData.text[btnState];

        };

    })(scope);

</script>```
````

---

<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:** [17 March 2021 22:01 UTC](https://discourse.nodered.org/t/questions-about-template-widget/41049/2 "2021-03-17T22:01:11Z")

</div>

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