Step 2: Adding multiple screens

In the first tutorial, we learnt how to build an app with a single screen. Let’s now build an app with multiple screens.

We will build a simple modem troubleshooting app with four step elements. The app suggests to an user – who is having trouble with her Internet – two possible fixes. Here is a link to the finished app. We can share the link with others as well!

This is what our canvas will look like, once we are done:

We will need

  1. Boomi Flow username/password. (Get a free Boomi Flow login here.)

Let’s get building!

  1. Click LOG IN to log in to the Flow Drawing Tool. We are in the Flows tab.
  2. Click New Flow.
  3. Select ManyWho Identity Service from the dropdown menu Which Service should be used for authentication.
  4. Click Continue. This opens the Flows > Flow screen.
  5. Enter a name for the flow in the Name field. (We are calling this flow Hello World 2.)
  6. Select Anyone can run this flow in the Access menu.
  7. Select None from the Social feed for collaboration menu.
  8. Click Start Building!

    This opens the canvas where we will build our flow.

    We can expand the menu if we like.
  9. Drag a Step from the sidebar to the canvas. (Quick recap: A step element shows the user a screen.)

    This opens a configuration panel.
  10. Type Welcome in the Name text field.
  11. Copy-paste the text Find basic troubleshooting steps to help you get your Internet working properly. in the content editor.
  12. Click Save Step. This is what the canvas looks like now:
  13. Hover your mouse on Start. The mouse pointer changes from a crossbar to a hand.
  14. Drag an arrow from Start to Welcome. This opens a configuration panel on the right-hand side.
  15. Type Go in the Name text field.
  16. Click Save Outcome. (Looking for more information on outcomes? Here!)

    This is what the canvas looks like now:
  17. Drag another Step to the canvas.
  18. Copy-paste the text Suggestion 1 in the Name text field.
  19. In the content editor, copy-paste the text Please check the connections, and make sure the cables are connected to the right jacks. Please make sure the modem is connected to a power source. Does this solve your problem?
  20. Click Save Step.

    This is what the canvas looks like now:
  21. Drag an outcome from Welcome to Suggestion 1.
  22. Type Begin in the Name and Label fields.
  23. Click Save Outcome.

    This is what the canvas looks like now:
  24. Drag a Step element to the canvas.
  25. Copy-paste the text Thank You in the Name field.
  26. In the content editor, copy-paste the text Thank you for using a FictionalCompany Industries modem! We are always happy to help.
  27. Click Save Step.

    This is what the canvas looks like now:
  28. Drag an outcome from Suggestion 1 to Thank You.
  29. In the Configuration Panel, type Yes in the Name and Label fields.
  30. Click Save Outcome.

    This is what the canvas looks like now:
  31. Drag a Step to the canvas. Place this under the Thank You step.
  32. Copy-paste the text Suggestion 2 in the Name field.
  33. In the content editor, copy-paste the text Please reset the modem. Thank you.
  34. Click Save Step.

    This is what the canvas looks like now:
  35. Drag an arrow from Suggestion 1 to Suggestion 2.
  36. In the Configuration Panel, type No in the Name and Label fields.
  37. Click Save Outcome.

Flow Ninja: We can select an outcome, and move it around the canvas. For example, if we select the ‘No’ arrow, we get a green box that we can click and drag around, to reposition the outcome as needed.

That was fast!

And… we are done building. This is what the canvas looks like now:

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


Appchievement!

It took us three minutes to build an app with multiple screens and placeholder text.

We are using the default Flow player to render the app. This is what the first screen of the app looks like on a browser:

When we click the Begin button, the next screen appears:

We can continue to click the buttons, and proceed through the app.

On our mobile, this is how the first screen looks:

When we click the Begin button, the next screen appears:

We can continue to click the buttons, and proceed through the app.

Looking for more cool things to build?