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. This is expected to take around four minutes (plus time to read the instructions). Difficulty level – Beginner.

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. You can share this link with others as well.

Let’s get building!

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.

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

What we will need

  1. Boomi Flow username/password. (If you do not have a Boomi Flow login, you can get one here.)
  2. A new flow. (Here is how you can create a new flow. Use the ManyWho Identity Service. Make sure the Access is set to ‘Anyone can run this flow’ and Social Feed is set to ‘None.’ You can call the flow ‘Hello World 2’ or anything you wish.)

 Creating the first screen (‘Welcome’)
  1. Drag a Step element from the sidebar, to the Boomi Flow Canvas. (Quick recall: A Step element shows the user a screen.)
  2. The Configuration Panel on the right, lets us configure the screen. Copy-paste the text Welcome in the Name text field.
  3. In the Content Editor, copy-paste the text Find basic troubleshooting steps to help you get your Internet working properly.
  4. Click Save Step.

    This creates the first screen for our users. When we are done, this is what the canvas will look like:

Creating the second screen (‘Suggestion 1’)
  1. Drag a Step element to the canvas.
  2. In the Configuration Panel,  copy-paste the text Suggestion 1 in the Name text field.
  3. 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?
  4. Click Save Step.


This creates the second screen for our users. When we are done, this is what the canvas will look like:


Creating the third screen (‘Thank you’)
  1. Drag a Step element to the canvas.
  2. In the Configuration Panel,  copy-paste the text Thank You in the Name text field.
  3. In the Content Editor, copy-paste the text Thank you for using a FictionalCompany Industries modem! We are always happy to help.
  4. Click Save Step.
    This creates the third screen for our user. Once you are done, this is what the canvas will look like:


Creating the fourth screen (‘ Suggestion 2’)
  1. Drag a Step element from the sidebar, to the canvas. Place this under the Thank You step.
  2. In the Configuration Panel,  copy-paste the text Suggestion 2 in the Name text field.
  3. In the Content Editor, copy-paste the text Please reset the modem. Thank you.
  4. Click Save Step.
    This creates the fourth screen. When we are done, this is what the canvas will look like:


Creating the outcomes

A flow begins with the Start element, which is fixed on the canvas. The first outcome in the flow is the outcome of the Start element, which connects an arrow from Start, to the first element the builder places on the canvas.

Outcomes show how a flow progresses. The ‘Label’ text on outcomes gets converted into clickable buttons.

  1. Hover your mouse on Start. The mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Start to Welcome. This opens a Configuration Panel on the right-hand side.
  3. In the Configuration Panel, type Go in the Name text field, and click Save Outcome.
  4. Drag an arrow from Welcome to Suggestion 1.
  5. In the Configuration Panel, type Begin in the Name text field, Begin in the Label field, and click Save Outcome. This is what the canvas looks like now:
  6. Drag an arrow from Suggestion 1 to Thank You.
  7. In the Configuration Panel, type Yes in the Name text field, Yes in the Label field, and click Save Outcome.
  8. Drag an arrow from Suggestion 1 to Suggestion 2.
  9. In the Configuration Panel, type No in the Name text field, No in the label field, and click Save Outcome. 
Tip: You can select an outcome, and move it around the canvas. For example, if you select the ‘No’ arrow, you get a green box that you 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 now, 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.

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

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

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

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

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

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


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.