Tutorial: Connecting a web page

Sometimes, you may want your users to connect to a web page or a website, when they click a button. For example, they may be asking for information about a product; this information is already available on a webpage – and you want the user to access that.

As you know, buttons in the app are rendered by the outcome element. What we will do is, add an attribute to the outcome. This attribute will be a key-value pair, where the key will say ‘uri’ and the value will be the website link.

You will need:

  1. Boomi Flow username/password. (If you do not have a Boomi Flow login, please click here to request one.)

Let’s get building!

  1. Click LOG IN to login to the Boomi Flow Drawing Tool.
  2. Create a new flow called Outcome – Website using the ManyWho Identity service.
  3. Drag a Step element from the sidebar to the canvas.
  4. In the Configuration Panel, copy-paste the text Hello in the Name field.
  5. In the content editor, copy-paste the text We will connect to a website soon!
  6. Click Save Step. This is what the canvas looks like now:
  7. Drag another Step element from the sidebar to the canvas. The second element is actually a placeholder – the flow will not execute it – the outcome of Hello will lead to the website. We are using Step in this instance, you can connect to any other element as well. We need this second element, because the outcome from the Start element can not connect to an URL.
  8. In the Configuration Panel, copy-paste the text Placeholder in the Name field.
  9. In the content editor, copy-paste the text The user will not see this text!
  10. Click Save Step.

    This is what the canvas looks like now:
  11. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  12. Drag an arrow from Start to Hello.
  13. In the Configuration Panel, type Go in the Name text field and click Save Outcome.
    This is what the canvas looks like now:
  14. Hover your mouse on HelloThe mouse pointer changes from a crossbar to a hand.
  15. Drag an arrow from Hello to Placeholder.
  16. In the Configuration Panel, type Go in the Name and Label text fields.
  17. Click the + icon to expand the Advanced options, if it is not open.
  18. Click New Attribute.
  19. Type uri in the key field for the attribute. The key has to be uri for this to work.
  20. Enter the URL of the website you want the outcome to lead to, in the value field. Say: https://community.boomi.com/

  21. Click Apply Attribute.
  22. Click Save Outcome.

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 around 10 minutes to build an app that takes the user to a website on the click of a button.

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

Let’s click the Go button. The Boomi Community website opens in a new tab:

If you are wondering if you can connect multiple buttons to different websites; the answer is yes.

For example, you can have a flow like this, where we have created multiple outcomes (with as many key-value attributes):

Clicking on a button leads to the website connected to it.


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.

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.