Step 3: Adding navigation

It is super simple to add navigation tabs to an app using Boomi Flow. Remember the app we built with multiple screens? Let us add two Step elements to the app, and create a navigation.

When you run the app, this is what the screen will look like to the end-user:

Here is a link to the finished app with navigation we built following the instructions – you can run it on your browser.

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, please click here to request one.)
  2. The flow built from – Step 2: Adding multiple screens.

Adding the Forum screen
  1. Open the ‘Hello World app with multiple screens’ and drag a Step element from the sidebar into the canvas.
  2. In the Configuration Panel,  copy-paste the text Forum in the Name text field.
  3. In the Content Editor, copy-paste the text See what other modem users have to say. Thank you for using a FictionalCompany Industries product.
  4. Click Save Step.

This is what the canvas will look like now:


Adding the Customer Support screen
      1. Drag a Step element from the sidebar.
      2. In the Configuration Panel,  copy-paste the text Customer Support in the Name text field.
      3. In the Content Editor, copy-paste the text We need more information to troubleshoot. Please call 1-800-Fictional and ask for Technical Support. Thank you.
      4. Click Save Step.

        This is what the canvas will look like now:


Adding the navigation
  1. Click the Navigation icon on the right-hand-side menu.
  2. Click New Navigation.

  3. In the Navigation Editor, copy-paste Troubleshooter in the Name and Label fields and click the + icon.
  4. Copy-paste Home in the Name and Label fields.
  5. Select Welcome from the Map Element menu.
  6. Click Save.
  7. Click the + icon again.
  8. Copy-paste Forum in the Name and Label fields.
  9. Select Forum from the Map Element menu.
  10. Click Save.
  11. Click the + icon again.
  12. Copy-paste Customer Support in the Name and Label fields.
  13. Select Customer Support from the Map Element menu.
  14. Click Save.
  15. Click Save Navigation.
  16. Click Close.

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 five minutes to build an app with navigation.

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

When you click Forum, the Forum tab opens:

When you click Customer Support, the Customer support tab opens:

 


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.