Dashboard text input node - avoid global state

Dashboard
16

If anybody ever needs it, I had another Template node to display a button. In that Template node, I send the values of the Text Input fields to the server as a message (as soon as the button is clicked):

<md-button ng-click="onClick()">Send text to Node-RED</md-button>

<script>
(function(scope) {
    scope.onClick= function() {
        // Here I read the values from the my custom text input field (which needs to have id="my_unique_id")
        var myTextInputElement = document.getElementById('my_unique_id').value || "My default text";
        
        // Send a message on the output of the Button Template node, containing the value of the text input field
        scope.send({
            my_text: myTextInputElement
        });
    }
})(scope);
</script>

Remark: since this code snippet tries to find a text input element on your dashboard with id "my_unique_id", don't forget to apply that id to your text input element:

<md-card class="nr-dashboard-textinput" style="margin-top:8px; margin-bottom:0px; margin-left:6px; margin-right:6px">
    <md-input-container class="md-block has-label" style="padding:0px; margin:0px">
        <label style="padding:0px">Notification Body</label>
        <input type="text" id="my_unique_id">
    </md-input-container>
</md-card>

In case of multiple text input elements, you need to give each element its own unique id!

Based on the above onClick function, I had thought your question could be solved by changing my Text Input Template node code like this:

<md-card class="nr-dashboard-textinput" style="margin-top:8px; margin-bottom:0px; margin-left:6px; margin-right:6px">
    <md-input-container class="md-block has-label" style="padding:0px; margin:0px">
        <label style="padding:0px">Notification Body</label>
        <input type="text" id="notification_body" onkeydown="handleOnkeydown(this)">
    </md-input-container>
</md-card>

<script>
(function(scope) {
    scope.handleOnkeydown= function(inputElement) {
        // Send the text value to the server, when the Enter key is being pressed
        if(event.key === 'Enter') { 
            send({value: inputElement.value}); 
        }
    }
})(scope);
</script>

But it gives me the following error:

image

Does anybody know how to solve this?