# Join two strings in a SPECIFIC order after pressing ui\_button?

**URL:** <https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008>\
**Category:** General\
**Created:** [26 February 2022 05:55 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008 "2022-02-26T05:55:23Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![MandySteffen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mandysteffen/32/57431_2.png) [@MandySteffen](https://discourse.nodered.org/u/MandySteffen)\
**Post date:** [26 February 2022 05:55 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/1 "2022-02-26T05:55:24Z")

</div>

Hello, there! I'm new here and a bit lost, to be honest.

In my Dashboard, I want the user to type in numbers in two separate fields, then press a button. After this button is pressed, I need to join the two strings originated from the data input but they have to be in a specific order so I can send it to a serial afterwards.

I tried using ui\_button but it keeps sending the data separately into Debug; I also tried Join, but if I type in the second field and only then the first one, the message doesn't get the way I need it to be (not to mention the absence of buttons on Dashboard in this case!).

I'm using Node-RED v2.2.0 and not quite familiar yet with JSON and the like.

---

<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:** [26 February 2022 06:20 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/2 "2022-02-26T06:20:50Z")

</div>

Hi and welcome to the forum.

This is a bit tricky, depending on your knowledge of all the stuff you can do with the nodes.

You are kind of right with the join node, but it won't guarantee the order of the two messages.

This needs a bit more magic that you know just now.

But for the sake of helping you get on your way, here is the basic idea of what you need to do:

The _trick_ is with a `function` node because it has a bit more of the magic under its hood than the other nodes and can _store_ messages for later use.

The _problem_ you are having is that in node-red, everything is _real time_ and no messages are stored. Unless you use something like the `join` node.  
Good on you for trying/thinking of it.

So, first off each message will need to have a unique attribute so they can be identified.  
This is only needed as far as the `function` node.

For this example, I'll make _Message 1_ and _Message 2_ easy to identify.

```auto
// store the incoming message value.
if (msg.topic == "MESSAGE1")
{
     context.set("message1",msg.payload);
}
if (msg.topic =="MESSAGE2")
{
    context.set("message2",msg.payload);
}
msg = {}; // wipe the message.

var a = context.get("message1");
var b = context.get("message2");

if (a.length > 0)
{
     if (b.length > 0)
         {
               msg.payload = context.get("message1") + context.get("message2")
               context.set("message1","");
               context.set("message2","");
               return msg;
        }
}

```

This was typed here, now and I haven't tested it.

But I hope that helps you understand what is needing to be done.

Good luck.

Ok, that code doesn't work. (I'm not that good)

But this does and it is an example as well.

```auto
[{"id":"319a422441bd214c","type":"function","z":"0918ee609bf69fc7","name":"","func":"// store the incoming message value.\nif (msg.topic == \"MESSAGE1\")\n{\n context.set(\"message1\",msg.payload);\n}\nif (msg.topic ==\"MESSAGE2\")\n{\n context.set(\"message2\",msg.payload);\n}\nmsg = {}; // wipe the message.\n\nvar a = context.get(\"message1\") || \"\";\nvar b = context.get(\"message2\") || \"\";\n\n\n\nif ((a.length) > 0)\n{\n if ((b.length) > 0)\n {\n msg.payload = context.get(\"message1\") + context.get(\"message2\")\n context.set(\"message1\",\"\");\n context.set(\"message2\",\"\");\n return msg;\n }\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":1610,"wires":[["e18a85119048611f"]]},{"id":"b27b8df82741fb13","type":"inject","z":"0918ee609bf69fc7","name":"first","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"MESSAGE1","payload":"first","payloadType":"str","x":470,"y":1570,"wires":[["319a422441bd214c"]]},{"id":"c8c591968a100e7d","type":"inject","z":"0918ee609bf69fc7","name":"second","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"MESSAGE2","payload":"second","payloadType":"str","x":470,"y":1630,"wires":[["319a422441bd214c"]]},{"id":"e18a85119048611f","type":"debug","z":"0918ee609bf69fc7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":850,"y":1610,"wires":[]}]

```

---

<div class="post-metadata">

**Author:** ![MandySteffen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mandysteffen/32/57431_2.png) [@MandySteffen](https://discourse.nodered.org/u/MandySteffen)\
**Post date:** [26 February 2022 06:36 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/3 "2022-02-26T06:36:36Z")

</div>

Now that you sent me the example it seems a bit clearer. Thank you so much!  
(btw, I've been copying and pasting so many flows from the forurm that my Node-RED looks like a Smörgåsbord 😅)

But the thing for me is that. freakin'. UI. button!  
I want the user to click on a "send" button in the Dashboard, in order for the "magic" of joining the stuff begin. As I've seen so far, the button does not have a "passthrough" action. Am I right?

---

<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:** [26 February 2022 06:41 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/4 "2022-02-26T06:41:05Z")

</div>

> [@MandySteffen](#):
>
> btw, I've been copying and pasting so many flows from the forurm that my Node-RED looks like a Smörgåsbord 😅

That's ok. Mine is like that too.

The button does have a _pass through_, but I don't think it does what you thing it does.

You can replace my `inject` nodes with `button` nodes and things should work.

the _pass through_ is towards the bottom of the node.

 ![Screenshot from 2022-02-26 17-39-57](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f4823b28f4c9ebc9b6dd6743affcec01261a9a77.png)

---

<div class="post-metadata">

**Author:** ![MandySteffen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mandysteffen/32/57431_2.png) [@MandySteffen](https://discourse.nodered.org/u/MandySteffen)\
**Post date:** [26 February 2022 06:52 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/5 "2022-02-26T06:52:49Z")

</div>

I did try to replace inject nodes with the ui\_button ones in your example, but it didn't work out.  
 ![Captura de tela 2022-02-26 035059](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b1592fc12d32f91109bfca5e410b75214bc4bcd.jpeg)  
 ![Captura de tela 2022-02-26 035039](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d6f571b5b1158b367a836281a54bf2872694b754.jpeg)  
Am I missing any detail?

---

<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:** [26 February 2022 06:55 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/6 "2022-02-26T06:55:46Z")

</div>

That's because (as I found out the hard way) the terms used are confusing.

It doesn't mean _make it look like the button was pressed and send it's message_.

It means, send the message you sent into the button node to the output.

So you will have to change the `inject` node to be the same as the `button` node.

And looking at the `button` node, you need to actually enter something in the `payload` section.

---

<div class="post-metadata">

**Author:** ![MandySteffen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mandysteffen/32/57431_2.png) [@MandySteffen](https://discourse.nodered.org/u/MandySteffen)\
**Post date:** [26 February 2022 07:00 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/7 "2022-02-26T07:00:04Z")

</div>

> [@Trying\_to\_learn](#):
>
> And looking at the `button` node, you need to actually enter something in the `payload` section.

You edited your comment in the EXACT moment I deployed and tested this solution. Talk about being in the very same page!  
It worked. I will try to see if something similar happens with my original flow and let you know. Thanks!

---

<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:** [26 February 2022 07:00 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/8 "2022-02-26T07:00:33Z")

</div>

Good I am useful to someone. 😉

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [26 February 2022 08:49 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/9 "2022-02-26T08:49:52Z")

</div>

You could also try the ui\_form node which assigns a property to each and sends both in one message which makes it easy to rejoin them however you wish.

---

<div class="post-metadata">

**Author:** ![MandySteffen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mandysteffen/32/57431_2.png) [@MandySteffen](https://discourse.nodered.org/u/MandySteffen)\
**Post date:** [26 February 2022 18:05 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/10 "2022-02-26T18:05:16Z")

</div>

I will take a look at it as well. Thanks!

---

<div class="post-metadata">

**Author:** ![MandySteffen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mandysteffen/32/57431_2.png) [@MandySteffen](https://discourse.nodered.org/u/MandySteffen)\
**Post date:** [26 February 2022 18:34 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/11 "2022-02-26T18:34:25Z")

</div>

It worked like a charm, @Trying_to_learn ! I had to add a pop-up notification, though. It is not what we desire, but it sends the info the way I need it to be sent and the serial takes it perfectly.

I will try the @dceejay suggestion as well to see if using the form can help shape up my UI better. But for that I'll need to study a little more on how to use the Form node.

I am so happy to be a part of this community ❤

---

<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:** [27 April 2022 18:35 UTC](https://discourse.nodered.org/t/join-two-strings-in-a-specific-order-after-pressing-ui-button/59008/12 "2022-04-27T18:35:23Z")

</div>

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