# Dashboard that can send two or more values when button activates

**URL:** <https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014>\
**Category:** Dashboard\
**Created:** [7 January 2020 15:26 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014 "2020-01-07T15:26:33Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [7 January 2020 15:26 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/1 "2020-01-07T15:26:33Z")

</div>

I cant get my dashboard working with more than two textvalues and sending them as separate values so i can use them in a subflow after the button is activated.  
When this testcase works a will have a listbox with ipadressen to choose and a listbox with OS commands to execute. When the button is activate it will check the choosen server and execute the selected command.

I have the executing working , but cant pass more then one value when the button is activated

![Naamloos](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a324287b48d785e5da79a0073c7a63a46e060966.jpeg)

```auto
[
    {
        "id": "da3e4843.e44578",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "416842e7.18fcac",
        "type": "ui_button",
        "z": "da3e4843.e44578",
        "name": "",
        "group": "63a7122a.653c4c",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Do stuff",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "textInput1",
        "payloadType": "flow",
        "topic": "",
        "x": 180,
        "y": 360,
        "wires": [
            [
                "fd9e1433.595398"
            ]
        ]
    },
    {
        "id": "a55d5c3f.f259f",
        "type": "ui_text_input",
        "z": "da3e4843.e44578",
        "name": "",
        "label": "",
        "tooltip": "",
        "group": "63a7122a.653c4c",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": "100",
        "topic": "",
        "x": 120,
        "y": 120,
        "wires": [
            [
                "f309674.f462f98"
            ]
        ]
    },
    {
        "id": "fd9e1433.595398",
        "type": "function",
        "z": "da3e4843.e44578",
        "name": "my function that does stuff",
        "func": "\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 410,
        "y": 360,
        "wires": [
            [
                "c8af5121.0fbb9"
            ]
        ]
    },
    {
        "id": "c8af5121.0fbb9",
        "type": "ui_text",
        "z": "da3e4843.e44578",
        "group": "63a7122a.653c4c",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Result: ",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "x": 640,
        "y": 360,
        "wires": []
    },
    {
        "id": "f309674.f462f98",
        "type": "change",
        "z": "da3e4843.e44578",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "textInput2",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 370,
        "y": 120,
        "wires": [
            [
                "45e7e288.76564c"
            ]
        ]
    },
    {
        "id": "45e7e288.76564c",
        "type": "link out",
        "z": "da3e4843.e44578",
        "name": "",
        "links": [
            "16d8779a.6e20e8",
            "aa966c98.0fd6e",
            "b0c56eba.88147",
            "4f5a3d06.686674"
        ],
        "x": 535,
        "y": 120,
        "wires": []
    },
    {
        "id": "16d8779a.6e20e8",
        "type": "link in",
        "z": "da3e4843.e44578",
        "name": "",
        "links": [
            "45e7e288.76564c",
            "c564ce94.1ab4f",
            "ef12cc40.85532"
        ],
        "x": 55,
        "y": 360,
        "wires": [
            [
                "416842e7.18fcac"
            ]
        ]
    },
    {
        "id": "3456b0cf.9dc1e",
        "type": "inject",
        "z": "da3e4843.e44578",
        "name": "Init with empty string",
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "x": 140,
        "y": 60,
        "wires": [
            [
                "a55d5c3f.f259f"
            ]
        ]
    },
    {
        "id": "1ed96ab5.b27b85",
        "type": "inject",
        "z": "da3e4843.e44578",
        "name": "Init with empty string",
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "x": 120,
        "y": 180,
        "wires": [
            [
                "6c59841b.20168c"
            ]
        ]
    },
    {
        "id": "6c59841b.20168c",
        "type": "ui_text_input",
        "z": "da3e4843.e44578",
        "name": "",
        "label": "",
        "tooltip": "",
        "group": "63a7122a.653c4c",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": "100",
        "topic": "",
        "x": 100,
        "y": 240,
        "wires": [
            [
                "9a481147.47bb2"
            ]
        ]
    },
    {
        "id": "9a481147.47bb2",
        "type": "change",
        "z": "da3e4843.e44578",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "textInput1",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 370,
        "y": 240,
        "wires": [
            [
                "ef12cc40.85532"
            ]
        ]
    },
    {
        "id": "ef12cc40.85532",
        "type": "link out",
        "z": "da3e4843.e44578",
        "name": "",
        "links": [
            "16d8779a.6e20e8",
            "aa966c98.0fd6e",
            "b0c56eba.88147",
            "4f5a3d06.686674"
        ],
        "x": 535,
        "y": 240,
        "wires": []
    },
    {
        "id": "63a7122a.653c4c",
        "type": "ui_group",
        "z": "",
        "name": "TEST",
        "tab": "f5ae0649.7bda38",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "f5ae0649.7bda38",
        "type": "ui_tab",
        "z": "",
        "name": "TEST",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 January 2020 16:00 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/2 "2020-01-07T16:00:11Z")

</div>

Why do you have a `function` node that just returns the msg it gets?  
Remember each `text` node will send a seperate msg and the `button` will send a seperate msg.

add some `debug` nodes in so you can see what is happening

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [7 January 2020 17:27 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/3 "2020-01-07T17:27:41Z")

</div>

I know, i reserved this for combining the two values. problem is i dont know how to change this flow so that when i activate the button, it contains the state of the two textboxes so that this info can be used in a subflow that is already working with hardcoded values

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 January 2020 19:01 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/4 "2020-01-07T19:01:04Z")

</div>

Why note use a ui-form to input the text?

If you must use two inputs then you need to have some indicator so that when the button is pressed, you can check to see if both text inputs are finished before grabbing thier values to process.

I would get rid of the links off the two text nodes and set a 'filled' flag for each. The button would be connected to a node to check both are filled. If they are, it should display a message they are not filled in. If they are both filled, unfill them (for the next time) and grab the data you stored in the flow context from the text nodes and process it.

You might want to add a reset button too.

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [7 January 2020 19:26 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/5 "2020-01-07T19:26:38Z")

</div>

ui form does not have dropdowns...

and i also display feedback from subsroutines that are executed

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 January 2020 19:28 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/6 "2020-01-07T19:28:55Z")

</div>

You could always use the ui\_template and roll your own form....

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [7 January 2020 19:30 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/7 "2020-01-07T19:30:41Z")

</div>

This is what i have now...

 ![Naamloos](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b1d96b8e9a14054ede07adfc52605aec318353aa.png)

I can only use one button  
and i can only use one select box

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [7 January 2020 19:53 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/8 "2020-01-07T19:53:50Z")

</div>

My take - sorry haven't loaded the flow.

If you want "multiple outputs" from the button being pressed, why not do something like this:  
(Basic idea only)

![Screenshot from 2020-01-08 06-53-03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/51c90754aa3055a5c6f6d0b63a3840f542dd8139.png)

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [7 January 2020 19:57 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/9 "2020-01-07T19:57:35Z")

</div>

I want infact multiple inputs, different select/textboxes . after pushing the button it has to send all the values in one message to the subflow

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [7 January 2020 19:59 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/10 "2020-01-07T19:59:18Z")

</div>

(Sorry. That isn't how I read the topic.)

I may have to look at your flow.

In the `function` node put this bit of code:

```auto
let a = flow.get('textInput1');
let b = flow.get('textInput2');

msg.payload = a + " " + b;

return msg;

```

That may be a starting point.

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [7 January 2020 20:11 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/11 "2020-01-07T20:11:53Z")

</div>

Thanks, that is indead a start!

---

<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:** [7 January 2020 20:32 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/12 "2020-01-07T20:32:26Z")

</div>

You can use a Join node to combine the values from the ui elements. See [this page in the cookbook](https://cookbook.nodered.org/basic/join-streams) for how to do it. That will save using flow context and having flow sections disconnected from each other so that it is not clear how one action initiates another.

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [8 January 2020 14:59 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/13 "2020-01-08T14:59:32Z")

</div>

thanks to all, got it working with the default dashboard node!

The trick for me was to use:  
let a = flow.get('textInput1');  
let b = flow.get('textInput2');  
and then give these values to the subflow!

Only thing to do is when a textbox (list) is used another textbox should be hidden, is that possible?

 ![Naamloos](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a1e2df29a85a016ff81628b4a5c8496c0481c56e.png)

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [9 January 2020 12:01 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/14 "2020-01-09T12:01:56Z")

</div>

hi @zenofmud,

i am busy to follow your lead and try to learn templating  
I used the dashboard template, and indead much more flexibel!  
Is there a way to align labels INFO and HISTORIE to the left?  
I tried by adding align statement but that does not work.  
For the rest i am making progress

```auto
<table style="width:100%">
  <tr layout-align="left">
    <th>INFO</th> 
  </tr>
  <tr>
    <td>{{msg.payload}}</td>
  </tr>
</table>

```

![layout](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/16995b3b7222ff9b94951d97db2e8ae4b0642247.jpeg)

 ![scherm1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/127c531a33b1ecbe7c261fc4340f652f30aebd66.jpeg)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [9 January 2020 12:06 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/15 "2020-01-09T12:06:47Z")

</div>

> [@pvanklink](#):
>
> `<tr layout-align="left">`

Where did you come up with that syntax?? try googling 'html style'

---

<div class="post-metadata">

**Author:** ![pvanklink](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@pvanklink](https://discourse.nodered.org/u/pvanklink)\
**Post date:** [9 January 2020 12:33 UTC](https://discourse.nodered.org/t/dashboard-that-can-send-two-or-more-values-when-button-activates/20014/16 "2020-01-09T12:33:09Z")

</div>

🤣

I guess i google bad...  
now it works!

```auto
<table style="width:100%">
  <tr>
    <th>
        <div align="left">
        INFO
        </div>
    </th> 
  </tr>
  <tr>
    <td>{{msg.payload}}</td>
  </tr>
</table>

```

Last part is to format the difficult parts (dropdown and switch and button).  
Are there nodes available for this?