Design pattern –- Concatenation

  

OVERVIEW

Concatenation is the technical term used to define a conference of cats. In the world of enterprise apps, concatenation also refers to the art and science of joining two strings together.

Why would you want to join two strings? Here are just two reasons:

  1. To combine name, region, etc. for an on-boarding or HR process. For example: AMERICAS and Julian Vernes can become AMERICAS\JulesVernes without any human intervention.
  2. To generate URLs on the fly, by concatenating query parameters. For example, https://boomi.com/platform/ and flow/ can come together to create magic like https://boomi.com/platform/flow/.

Let’s see an app that concatenates two user inputs in action, to see how this works in real life.

Here goes: https://flow.boomi.com/e18b09cf-0792-4426-80e0-d87ec4b92aa8/play/default/?flow-id=1796e800-c3ab-4761-abdb-91f33b439f3e

BUILDING THE APP

Building an app that uses concatenation is easy-peasy. If you have around 20 minutes, you can see right now how to! Let’s build the app together!

This is what the canvas will look like when we are done:

Gather around, and let’s get started.

  1. Create a new page layout with the Name and Label as Inputs.
  2. Click Save to save the page layout. The name of the page is updated to Inputs.
  3. Drag an Input component to the Main Container.

    This opens a configuration panel on the right-hand side.
  4. Copy-paste First Input in the Name and Label fields.
  5. The boxes for Editable and Required under Settings should be checked.
  6. The Size can be 25 and the Maximum characters be set to 255.
  7. The Save the whole selection option should be checked.
  8. Click Select or create a new value.
  9. Click Create a new value.
  10. Copy-paste Input1 in the Name field. The kind of value should be String. Click Save to save the value.

    This saves Input1 as the value where the user input will be stored.
  11. Click Save Component to save the component.

    This is what the page layout looks like now:
  12. Drag another Input component to the Main Container. This opens a configuration panel on the right-hand side.
  13. Copy-paste Second Input in the Name and Label fields.
  14. The boxes for Editable and Required under Settings should be checked. (Deja vu. Yes. No worries, there is no glitch in the matrix.. You are in the right path.)
  15. The Size can be 25 and the Maximum characters be set to 255.
  16. The Save the whole selection option should be checked.
  17. Click Select or create a new value.
  18. Click Create a new value.
  19. Copy-paste Input2 in the Name field. The kind of value should be String. Click Save to save the value.
  20. Click Save Component to save the component.
  21. Click Save to save the page.
  22. Create a new flow called Concat.
  23. Let the building begin! Drag a page layout to the canvas.

    This opens a configuration panel.
  24. Copy-paste Inputs in the Name field.
  25. Uncheck the option for Only show Page Layouts already being used in this Flow.
  26. Select the Inputs page.
  27. Click Save Page to save the page. This is what the canvas looks like now:
  28. Create an outcome from Start to Inputs called Go.
  29. Drag an Operator to the canvas.

    This opens a configuration panel.
  30. Copy-paste Concatenating in the Name field.
  31. Click New Operation.
  32. Click Select or create a new value.
  33. Select the Input1 value.
  34. Select Concatenate as the option for how you want to change the value.

    This shows the option for How do you want to retrieve the reference value.
  35. Select Value Of.

    This opens the option for the value you want to reference.
  36. Click Select or create a new value.
  37. Select the Input2 value.
  38. Click Apply Operation.
  39. Click Save Operator.

    This is what the canvas looks like now:
  40. Create an outcome from Inputs to Concatenating with the Name and Label as Concatenating now.
  41. Drag a Step to the canvas.

    This opens a configuration panel.
  42. Copy-paste Result in the Name field.
  43. Copy-paste And the concatenated value is… in the content editor.
  44. Click Insert Value.

    This opens the Insert a Value dialog box.
  45. Select the Input1 value.
  46. Click Save Step.

    This is what the canvas looks like now:
  47. Draw an outcome from Concatenating to Result called Done.
That was fast!

You have just built an app that uses string concatenation like a champ! And it took only 20 minutes! This is what the canvas looks like now:


APPCHIEVEMENT

Let us run the app now, and see what happens.

This is what the first screen of the app looks like on a browser:

Let’s add two inputs:

Click the Concatenating Now button.

Magic managed!

DOWNLOADS

Want to try out the design pattern in your tenant? We have you covered!

  • App sharing token: 2Z4nhP2nWDPiO3YPxdl0DFUqpqMDqZmlY62ipbHGInooT6xyyaR570UQA+m0Rk8Y
  • App URL: https://flow.boomi.com/e18b09cf-0792-4426-80e0-d87ec4b92aa8/play/default?flow-id=1796e800-c3ab-4761-abdb-91f33b439f3e&flow-version-id=5e7db4ba-7c80-4d5b-9be1-098d6f49d1fb