Tutorial: Using iFrames

You can use iFrames in your app 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. ManyWho username/password. (If you do not have a ManyWho login, please click here to request one.)

Let’s get building!

  1. Click LOG IN to login to the ManyWho Drawing Tool.
  2. Create a new flow called Using iFrames using the ManyWho Identity service.
  3. Drag a Step element to the canvas.
  4. Type Hello in the Name field.
  5. In the content editor, type This is the first step.
  6. Click Save Step. This is what the canvas looks like now:
  7. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  8. Drag an arrow from Start to Hello.
  9. In the Configuration Panel, type Go in the Name text field and click Save Outcome.

    This is what the canvas looks like now:
  10. Drag another Step element to the canvas.
  11. Copy-paste We will use iFrames now in the Name field.
  12. Click Tools.

    This expands the Tools menu.
  13. Click Source code.

    This opens the code editor.
  14. 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>&nbsp;</p>
    <p>&nbsp;</p>
    <p><iframe style="border: none;" src="https://boomi.com" width="800" height="800" scrolling="no"></iframe></p>
  15. Click Ok.

    Let’s take a sneak peak of the content in the editor:
  16.  Click Save Step. This is what the canvas looks like now:
  17. Drag an outcome from Hello to We will use iFrame now.
  18. In the Configuration Panel, type Go in the Name and Label text fields, and 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, and 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.


Appchievement!

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.


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.