Tutorial: Using iFrames

We can use iFrames in our apps to embed content within content. One use case of iFrames is to make sure there is a Back button, when we embed external content (say, a website) in an app screen. Let’s build an app that showcases this!

This is what the canvas will look like when we are done:

We will need:

  1. Boomi Flow username/password. (Get a free fully-loaded Boomi Flow account here.)

Let’s get building!

  1. Click LOG IN to login to the Boomi Flow Drawing Tool.
  2. Create a new flow called Using iFrames using the ManyWho Identity service.
  3. Drag a Step element to the canvas.

    This opens a configuration panel.
  4. Type Hello in the Name field.
  5. In the content editor, type This is the first step and click Save Step to save the step and close the configuration panel. 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 outcome from Start to Hello.
  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. Drag another Step element to the canvas.
  10. Copy-paste We will use iFrames now in the Name field.
  11. Click View.

    This expands the View menu.
  12. Click Source code.

    This opens the source code code editor.
  13. Copy-paste the following code in the editor. Go ahead, change the height/width dimensions and the site URL!
    <p>iFrame content below:</p>
    <p><iframe style="border: none;" src="https://boomi.com" width="800" height="800" scrolling="no"></iframe></p>
  14. Click Ok.

    Let’s take a sneak peek of the content in the editor:
  15.  Click Save Step. This is what the canvas looks like now:
  16. Drag an outcome from Hello to We will use iFrame now.
  17. In the Configuration Panel, type Go in the Name and Label text fields.
  18. Click Save Outcome.

    This is what the canvas looks like now:

  19. Let’s draw the Back outcome now. Drag an outcome from We will use iFrame now to Hello.
  20. In the Configuration Panel, type Back in the Name and Label text fields.
  21. Click Save Outcome.

That was fast!

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

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


It took us around ten minutes to create an app that uses iFrames to nest content. When we run the app, this is what the first screen looks like on a browser:

Let’s click Go and see what happens:

The Dell website opens within the iFrame. We can continue with the website… For example, let’s click Watch Demo:

Clicking Back takes us back to the previous screen of the app.