Tutorial: Using Flow with AtomSphere

Content under development

Boomi AtomSphere is a cloud-based integration platform. An integration platform lets us connect different applications and services.

AtomSphere uses connectors to integrate various applications. Much like we do not need to know how a HDMI connection works to plug in a monitor to a computer, we can use these connectors straight out-of-the-box, without worrying about what is happening inside the proverbial box.

While building an app with Boomi Flow, we can use AtomSphere to move seamlessly between different platforms. For example, we can build an app that uses Salesforce, Box, Twilio, Jira and Zuora. (A full list of application connectors are available here.)

In this tutorial, we will build a simple app that shows us how to use Flow and AtomSphere together.

We will need:

  1. Boomi Flow username/password. (If you do not have a Boomi Flow login, please click here to get one.)
  2. Boomi AtomSphere username/password. (If you do not have an AtomSphere account, you can get one from here.)

Let’s get building!


Working in AtomSphere

  1. Click LOG IN to login to AtomSphere. We will be in the Build tab.
  2. We will create a new folder. Select the folder where you want the new folder to be, and click the caret next to it.
  3. Click New Folder.

    This opens the New Folder dialog box.
  4. Enter a name for the folder in the Name field. We are calling the folder Tutorial for this tutorial. (Yes, very creative!)
  5. Click Save.

    This creates and saves a new folder.
  6. We will be creating a new Component now. Click New.

    This opens the Create Component dialog box.
  7. Click Process and select Flow Service from the list of Components in the Type field.
  8. Type Flow demo as the name for the component in the Name field.
  9. Update the folder to Tutorial.
  10. Click Create. This creates a Flow Service component.
  11. Click Save to save the component. We will continue to click Save periodically to save our work.
  12. We will update the path for the service next. Select Flow demo in the External Name field and press Ctrl+C to copy it. This automatically updates the path for the service.
  13. Click the Copy to Clipboard icon in the Path to Service field to copy the path and paste it to a text editor. We will need this later.
  14. Click Actions.

  15. Click Add Action.

    This opens the Add Action dialog box.
  16. Type Concatenate in the Name field.
  17. We will create a new process now. Click the + icon in the Process field.

    This opens the process canvas.

    It is automatically populated with a new shape. Great!
  18. Click Save.
  19. Click Configure.

    This opens the Start Shape configuration tab.
  20. Click the Make the recommended changes for me link.
  21. We need to give the shape a name. Type Concat Start in the Display Name field.
  22. Let’s add an operation next. Click the + icon in the Operation field.

    This opens the Server Connector Operation tab.
  23. Click the + sign in the Request Profile field.
    This opens the New JSON Profile tab.
  24. Click on New JSON Profile. We will update the name to Concat Demo JSON Profile.
  25. Click Save.
  26. Click Root. This expands the options for Root.
  27. Change the Value Type to Object.

    This adds an object in the Root folder in the Data Elements section.
  28. Click the caret next to Object.

    This opens the Add Object Entry and Delete Object options.
  29. We will add three entries. Click Add Object Entry.

    This adds an entry under Object.
  30. Click Object and select Add Object Entry again. This adds a second entry.
  31. Click Object and select Add Object Entry again. This adds a third entry. This is what the screen looks like now:
  32. We will update the names of the entries next. Click Entry 1 to expand the options.
  33. Delete Entry 1 and type Name in the Value Name field.
  34. Click Entry 2 to expand the options.
  35. Delete Entry 2 and type Email in the Value Name field.
  36. Click Entry 3 to expand the options.
  37. Delete Entry 3 and type Cell Phone in the Value Name field. This is what the screen looks like now:

    Name, Email, and Cell Phone are values Flow can pass to AtomSphere.
  38. Click Save and close. We are now back to the Flow Services Server Connector Operation tab. You can see the Request Profile is now the Concat Demo JSON profile we just created.
  39. Click Save.
  40. Let’s create the Response Profile now. Click the + sign in the Response Profile field. This opens the New JSON Profile tab.
  41. Click on New JSON Profile. We will update the name to Concat Demo Response JSON Profile. This is what our screen looks like now:
  42. Let’s click Save.
  43. Click Root. This expands the options for Root.
  44. Change the Value Type to Object.

    This adds an object in the Root folder in the Data Elements section.
  45. Click the caret next to Object.
  46. Click Add Object Entry.

    This adds an entry under Object.
  47. We will update the name of the entry next. Click Entry 1 to expand the options.
  48. Delete Entry 1 and type End Result in the Value Name field.
  49. Click Save and Close.

    We are now back to the Flow Services Server Connector Operation tab. You can see the Response Profile is now the Concat Demo Respond JSON profile we just created.
  50. Click Save and Close. This brings us back to the configuration tab.
  51. Click OK.
  52. Click Save.
  53. Click Logic.
  54. Select Return Documents and drag it to the canvas.

    This opens the Return Documents Shape configuration panel.
  55. Type Return values in the Display Name field.
  56. Click OK. This places the Return Values shape in the canvas.
  57. Click Save.
  58. Click Execute.
  59. Select Map and drag it to the canvas.

    This opens the Map Shape configuration panel.
  60. Copy-paste Concatenate values in the Display Name field.
  61. Click the plus icon in the Map field. This opens the New Map tab.
  62. Click New Map and update the name to Concatenate Map.
  63. Click Choose to select a Map Source.

    This opens the Choose a Profile dialog box.
  64. Select JSON as the Profile Type.

    This loads the available JSON profiles.
  65. Open the Tutorial folder and select Concat Demo JSON Profile.
  66. Click OK. This is what the screen looks like now:

    The Concat Demo JSON profile has been populated as the Map Source.
  67. Click Save. We will create the Map Destination now.
  68. Click Choose in the Map Destination column.

    This opens the Choose a Profile dialog box.
  69. We will select JSON as the Profile Type again.

    This loads the available JSON profiles.
  70. Open the Tutorial folder and select Concat Demo Response JSON Profile.
  71. Click OK. This is what the screen looks like now:

    The Concat Demo Response JSON profile has been populated as the Map Destination.
  72. Click Save.
  73. Click the + icon on the Functions tab.

    This opens the Add a Function dialog box.
  74. Click Create New Function.

    This opens the New Map Function screen.
  75. Click New Map Function and update the name to Concatenate Map Function.
  76. Click the + icon next to Inputs.

    This opens the New Input dialog box.
  77. Type Input 1 in the Name field.
  78. Click OK. This adds Input 1 to the Inputs column.
  79. Click the + icon next to Inputs. We will need to add two more inputs.
  80. Type Input 2 in the Name field of the New Input dialog box and click OK. This adds Input 2 in the Inputs column.
  81. Click the + icon next to Inputs.
  82. Type Input 3 in the Name field of the New Input dialog box and click OK. This is what the screen looks like now:
  83. Click Save.
  84. We will add the function output now. Click the + icon in the Outputs column.

    This opens the New Output dialog box.
  85. Type Output 1 in the Name field of the New Output dialog box.
  86. Click OK. This adds Output 1 in the Outputs column.
  87. Click the + icon on the Steps column.

    This opens the Add a Function dialog box.
  88. The Category should be String. Select String Concat from the list and click OK.

    This opens the String Concatenation dialog box.
  89. Click the + icon next to Inputs.

    This opens the New Input dialog box.
  90. Type Input 1 in the Name field.
  91. Click Add. This adds Input 1 in Inputs.
  92. Click the + icon next to Inputs again. We will add two more inputs.
  93. Type Input 2 in the Name field of the New Input dialog box and click Add. This adds Input 2 to Inputs.
  94. Click the + icon next to Inputs.
  95. Type Input 3 in the Name field of the New Input dialog box and click Add. This adds Input 3 to Inputs. This is what the screen looks like now:
  96. Click OK. This opens the Configure Defaults dialog box.
  97. Click OK.

    This inserts the String Concat function in Steps.
  98. Click Save to save your work.
  99. Select Input 1 in the Inputs column and drag an arrow to Input 1 in the Steps column.
  100. Select Input 2 in the Inputs column and drag an arrow to Input 2 in the Steps column.
  101. Select Input 3 in the Inputs column and drag an arrow to Input 3 in the Steps column. This is what the screen looks like now:
  102. Click Results in the Steps column and drag an arrow to Output 1 in the Outputs column.
  103. Click Save and Close. This brings us back to the Concatenate Map tab.
  104. Click the + icon to expand the Object folder in the Concat Demo JSON Profile column.
  105. Click Name in the Concat Demo JSON Profile column and drag an arrow to Input 1 in the Functions column.
  106. Click Email in the Concat Demo JSON Profile column and drag an arrow to Input 2 in the Functions column.
  107. Click Cell Phone in the Concat Demo JSON Profile column and drag an arrow to Input 1 in the Functions column. This is what the screen looks like now:
  108. Click the + icon to expand the Object folder in the Concat Demo Response Profile column.
  109. Click Output 1 in the Functions column and drag an arrow to End Result in the Concat Demo Response JSON Profile column.
  110. Click Save and Close. We are back to the Map Shape configuration tab now.
  111. Click OK. This is what the screen looks like now:
  112. Select the red arrow in Concat Start and connect it to Concatenate values.
  113. Select the red arrow in Concatenate values and connect it to Return values.
  114. Click Save and Close.

    This brings us back to the screen where we were adding the action with the Add Action dialog box open.
  115. Click Add.
  116. Click Save and Close.

    This brings us back to the Welcome tab.
  117. Time to deploy now! Expand the Tutorial folder and expand Flow Services. This is what the screen looks like now:
  118. Click the caret next to Flow demo and select Open Component.

    This opens the Flow demo tab.
  119. Click View Deployment.
  120. We will attach an environment next. Click Attachments.
  121. We will use the prod-in-cloud environment for the purposes of this tutorial. You may have a different environment you would like to attach. Select prod-in-cloud and select the left double arrows button to attach the selected environment.

    This moves prod-in-cloud to Attached Environments.
  122. Click Build.
  123. Expand the Tutorial folder and Maps.
  124. Click the caret next to Flow demo – Concatenate Processes and  and select Open Component.
  125. Click View Deployment.
  126. Click Attachments.
  127. Select prod-in-cloud and select the left double arrows button to attach the selected environment. This moves prod-in-cloud to Attached Environments.
  128. Click Build.
  129. Click Atom.

  130. This opens the Atom Setup dialog box.
  131. Select In the Cloud as the Setup Preference.
  132. Type ConcatDemo in the Atom Name field.
  133. Click OK. This sets up a new Atom.
  134. Close the alert message.
  135. Click the caret next to Manage and select Atom Management.

    This opens the Environment screen.
  136. We will attach the ConcatDemo Atom to an environment now. Select ConcatDemo and drop it to the environment you would prefer (prod-in-cloud, for the purposes of this tutorial).

    This will create an alert asking us if we are sure.
  137. Click OK.

    This attaches the ConcatDemo Atom to the prod-in-cloud environment.
  138. Click Shared Web Server.
  139. Copy the URL in the Base URL for API Requests field.
  140. Paste this in the text editor before the path to service field we had copied earlier.

    The complete URL is https://test.connect.boomi.com/fs/Flow+demo
  141. Click User Management.

    This opens the screen that lists the users in the shared web server. We will also generate a token from this screen.
  142. Click the Generate button for Token.
  143. Click Save to save the token.
  144. Copy the username and the token and paste it to a text editor. (Note: The username is unique to the account, and will be in the form of brucew-8FZYFE.WHH9JC. You can find it under the Username field.)

We are all done configuring AtomSphere. Let us jump in to the Flow side of things now.


Working in Flow

  1. Click LOG IN to login to the Flow Drawing Tool.
  2. Click Services.
  3. Click Install Service.
  4. Type Concat Demo Service in the Name field.
  5. Copy-paste https://test.connect.boomi.com/fs/Flow+demo in the URL for the Service field. This is the URL we had copy-pasted in the text editor earlier.
  6. Enter the username we had copy-pasted in the Username field.
  7. Enter the token we had copy-pasted in the Password field.
  8. Click Continue.
  9. Click Continue again.
  10. Click Save Service.
  11. Click Flows to open the Flows tab.
  12. Click New Flow.
  13. Select the ManyWho Identity Service for authentication.
  14. Click Continue.
  15. Type AtomSphere Demo in the Name field. Access should say Anyone can run this flow. Social feed for collaboration should be set to None.
  16. Click Start Building.

    This opens the Flow canvas.

    If you like, you can click the arrow on top of the sidebar to expand the menu options.
  17. We will import the Concat Demo Service to the flow. Click Shared Elements.

    This opens the Shared Elements dialog box.
  18. Click Services.
  19. Click Services.
  20. Click Import Existing. This lists all the services available in your tenant.
  21. Click the Import button next to the Concat Demo Service.
  22. Click Close to close the dialog box.
  23. We will now create a quick page layout, that will prompt the user of the app for three inputs. Drag a Page element from the left-hand-side navigation, to the canvas.

    This opens a Configuration Panel on the right.
  24. Type User Input in the Name field.
  25. Click New Page Layout. This opens a new page tab. We will configure the page from here.
  26. Click the gears Configuration icon on the right-hand side menu.
  27. Type User Input Page in the Name and Label fields.
  28. Click Save. This saves the name and the label for the page.
  29. Click the Save icon on the right-hand-side navigation to save the page.

    The name of the page changes from New Page in the tab to User Input Page.
  30. From the Input section in the sidebar, drag a Input component into Main container.

    This opens the Page Component configuration panel.
  31. Type Name in the Name and Label fields.
  32. Check the Required box in the Settings section. This adds a red asterisk next to the box when rendered, and makes the input required.
  33. The Save the whole selection option should be checked under State.
  34. Click Create a new Value.
  35. Click Create a new Value.
  36. Type Name in the Name field. The What kind of Value is this field should be set to String.
  37. Click Save.
  38. Click Save Component.

    This is what the screen looks like now:
  39. From the Input section in the sidebar, drag another Input component into Main container. The following steps will repeat what we did earlier to create the input: Name component.
  40. Type Email in the Name and Label fields.
  41. Check the Required box in the Settings section. T
  42. The Save the whole selection option should be checked under State.
  43. Click Create a new Value.
  44. Type Email in the Name field. The What kind of Value is this field should be set to String.
  45. Click Save.
  46. Click Save Component. This is what the screen looks like now:
  47. From the Input section in the sidebar, drag another Input component into Main container. We will repeat the steps to create the third Input component.
  48. Type Cell Phone in the Name and Label fields.
  49. Check the Required box in the Settings section.
  50. The Save the whole selection option should be checked under State.
  51. Click Create a new Value.
  52. Type Email in the Name field. The What kind of Value is this field should be set to String.
  53. Click Save.
  54. Click Save Component. This is what the screen looks like now:
  55. Click the Save icon on the right-hand-side navigation to save the page.
  56. Click the AtomSphere Demo tab to go back to the flow.
  57. Click Save Page.

    This is what the canvas looks like now:
  58. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  59. Drag an arrow from Start to User Input. This opens a Configuration Panel on the right-hand side.
  60. In the Configuration Panel, type Go in the Name text field, and click Save Outcome. This connects the Start element with the User Input element. This is what the canvas looks like now:
  61. Drag a Message element from the sidebar to the canvas.
  62. Type Working with Boomi here in the Name field.
  63. Click New Message Action.
  64. Select Concat Demo Service from the The Service to send the Message drop-down menu.

    This opens the Actions section.
  65. Click the Select button for Concatenate.

    This opens the Message Action panel. As you can see the Input names are already populated with Name, Email, and Cell Phone. These are inputs we created in AtomSphere earlier.
  66. We will match the Inputs with the values we created in Flow. Click Select or create a new Value in the Value field for Name.
  67. Select Name.

    This populates the Name Value field.
  68. Click Select or create a new Value for Email.
  69. Select Email.
  70. Click Select or create a new Value for Cell Phone.
  71. Select Cell Phone.
  72. We will now create a new value for End Result in Outputs. Click Select or create a new Value.
  73. Click Create a new Value.
  74. We will take the system recommendations here. The Name field should say End Result. The What kind of Value is this field should be set to String. Click Save.
  75. Click Apply Message Action.
  76. Click Save Message.

    This is what the canvas looks like now:
  77. Hover your mouse on User InputThe mouse pointer changes from a crossbar to a hand.
  78. Drag an arrow from User Input to Working with Boomi. This opens the configuration panel for Outcome.
  79. Type Go in the Name and Label fields.
  80. Click Save Outcome.

    This is what the canvas looks like now:
  81. Drag a Step element from the sidebar to the canvas. This opens the Step configuration panel.
  82. Copy-paste Just like magic! in the Name field.
  83. Copy-paste the following text in the content editor —  We are using Flow to ask our user to enter her Name, Email, and Cell Phone. We are using AtomSphere as a microservice to concatenate these inputs. We are showing the end result in Flow.

  84. Copy-paste And the end result is: in the next paragraph.
  85. Click Insert Value.

    This opens the Insert a Value tab.
  86. Select End Result.

    This inserts the End Result value in the text. When the app is run, this will show what the final value of End Result is.
  87. Click Save Step.

    This is what the canvas looks like now:
  88. Hover your mouse on Working with BoomiThe mouse pointer changes from a crossbar to a hand.
  89. Drag an arrow from Working with Boomi to Just like magic!
  90. Type Go in the Name field.
  91. Click Save Outcome.

That was fast!

You have just built an app that uses Flow and AtomSphere. Congratulations!

This is what the screen looks like:

Let’s run the flow now, and see how easily it converts into an app.


Appchievement!

It took us around 75 minutes to build an app using AtomSphere with Flow.

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

Let’s provide some inputs now and click Go..

Concatenation managed! Can you guess what the inputs were?


Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, Drawing Tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.