Tutorial: Passing values from one flow to another using flow out

Content under development

The flow out feature allows you to connect flows together into a single user journey. This is done by changing a user outcome to include the details of the flow you wish to point the user to.

A flow out lets you create a multi-threaded UI, as users can seamlessly jump in and out of running flows without changing their interface. You can also flow outs to create an Inbox for monitoring the status of a flow.

The flow out feature can be used with Step and Page only – the two map elements that present a screen to the user – as the behavior of the feature is defined by the user interface.

Creating the second flow (first)

This is the flow the first flow will route control to. We will create this flow first, because we need to publish the flow, and subsequently use its Flow ID in the first flow.

  1. Create a new flow called Flowout 2 using the ManyWho Identity service.
  2. Drag a Step element to the canvas.
  3. Copy-paste Hi in the Name field.
  4. Copy-paste the text YAY, This is a flowout. in the content editor.
  5. Click Save Step.

    This is what the canvas looks like now:
  6. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  7. Drag an arrow from Start to Hi.
  8. In the Configuration Panel, type Go in the Name text field, and click Save Outcome.

    This is what the canvas looks like now:
  9. Click the Publish icon, and then click Publish to publish the flow.
  10. Note the Flow ID of the flow.

We will come back to this flow to insert a value we will create in Flowout 1.


Creating Flowout 1
  1. Create a new flow called Flowout 1 using the ManyWho Identity service.
  2. Drag a Page element from the sidebar to the canvas.
  3. Copy-paste Your Name in the Name field and click New Page Layout.

    This opens a new page layout.
  4. We will configure the page now. Click the gears icon on the right-hand-side. This opens the Settings screen for the page.
  5. Write Name in the Name and Label fields and click Save.
  6. Click the Save icon the right-hand-side navigation to save the page. The page name changes to Name.
  7. From the Input section in the sidebar, drag an Input component into Main container.

    This opens a configuration panel that lets us configure the Input component.
  8. Type Your Name in the Name and Label fields.
  9. Check the Required box under Settings.
  10. The Save the whole selection box next under State should be checked.
  11. Click Select or create a new Value.
  12. Click Create a new Value. We will pass this value to the flow-out.
  13. Type Name in the Name field.
  14. Click the + icon to expand the Advanced section if it is not open.
  15. Change the Access option to Input & Output. This makes sure that the value can be used as an input and output between flows.
  16. Click Save.
  17. Click Save Component.

    This is what the page layout looks like now:
  18. Click the Save icon the right-hand-side navigation to save the page.
  19. Click the Flowout 1 tab to go back to your flow, and click Save Page.

    This is what the canvas looks like now:
  20. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  21. Drag an arrow from Start to Your Name.
  22. In the Configuration Panel, type Go in the Name text field, and click Save Outcome.

    This is what the canvas looks like now:
  23. Drag a Step element to the canvas.
  24. Copy-paste Step 1 in the Name field.
  25. Copy-paste You are at Step 1 in the content editor.
  26. Click Save Step.

    This is what the canvas looks like now:
  27. Drag an arrow from Your Name to Step 1.
  28. In the Configuration Panel, type Step 1 in the Name and Label text fields, and click Save Outcome.

    This is what the canvas looks like now:
  29. Drag a Step element from the sidebar to the canvas.
  30. In the Configuration Panel on the right, copy-paste the text Step 2 in the Name field.
  31. Copy-paste the text This is Step 2 in the content editor.
  32. Click Save Step.

    This is what the canvas looks like now:
  33. Drag an arrow from Step 1 to Step 2.
  34. In the Configuration Panel, type Flowout in the Name and Label text fields, and click Save Outcome.

    This is what the canvas looks like now:
  35. We will be editing the metadata of the Step 1 element to add the flowout. Press Shift and left-click on Step 1. This opens the Edit Metadata box.
  36. Find the Flowout outcome. We will edit the flowOut property.
  37. Update the code as follows: Delete “flowOut”: null and copy-paste this code. Replace the id value with the Flow ID value you had copied in the earlier flow. Remember to put a comma after the curly bracket!
    “flowOut”: {
    “flowId”: {
    “id”: “014e54db-529c-4fe8-8030-bd82293e7375”,
    “versionId”: null
    },
    “valueElementExternalIdentifierId”: null,
    “valueElementFlowId”: null,
    “valueElementStateId”: null
    },
    This is what the code looks like in the editor:
  38. Click Save and click Close to close the editor.
  39. Click the Publish icon, and then click Publish to publish the flow.

Updating Flowout 2 with the ‘Name’ value
  1. Go to the Flowout 2 flow and click Shared Elements.

    This opens the Shared Elements panel.
  2. Click Import Existing.
  3. Click the Import button next to the Name value.

    This imports the Name value to the flow.
  4. Click Close to close the Shared Elements panel.
  5. Double-click the Step element. This opens the content editor.
  6. Copy-paste the text You pased the value with the content:
  7. Click Insert Value. This opens the Insert a Value dialog box.
  8. Select the value Name and click Ok.

    This inserts the value in the content editor.
  9. Click Save Step.
  10. Click the Publish icon, and then click Publish to publish the flow.

Appchievement!

It took us around 20 minutes to build two flows. Let’s run the Flowout 1 flow now.

The first screen asks us to enter a name. Lets enter a name (say, Larry Spotter) and click Step 1.

 

This leads us to the Flowout outcome:

 

Clicking on Flowout:

You can see that the control has passed to the second flow now. The flow out also has the passed value; which can be used in the flow just like a regular value.


Check out the ManyWho glossary for a definition of terms and key concepts that appear in the ManyWho 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.