Tutorial: Using page conditions to show text on toggle

Content under development

We can use Boomi Flow page conditions (which are very similar to business rules) to conditionally vary the components that are shown to the user.

Let’s build a simple page condition here that shows the user some content, if she toggles a button.

We will create a new page layout, add a toggle button to it, and then a presentation that remains hidden till the time the button is clicked.

  1. Create a new flow called Page Condition using the ManyWho Identity service.
  2.  Drag a Page element to the canvas.
  3. Type Page condition in the Name field and click New Page Layout.

    This opens a new page layout.
  4. Click the Settings icon.
  5. Write Page condition in the Name and Label fields.
  6. Click Save. This saves the name and label of the page layout.
  7. Click the Save icon to save the page.

    The page name changes to Page condition.
  8. Drag a Toggle component from the Input menu to the Main container of the page layout.
  9. Type Toggle this in the Name and Label fields.
  10. Check the Required box under Settings.
  11. The Save the whole selection option under State should be checked.
  12. Click Select or create a new Value.
  13. Click Create a new Value.
  14. Type Toggle: Boolean in the Name field.
  15. Select Boolean from the What kind of value is this option.
  16. Click Save.
  17. Click Save Component.

    This is what the page layout looks like now:
  18. Drag a Presentation component from the Content section to the Main container.
  19. Copy-paste Shows on toggle in the Name field.
  20. Copy-paste Now you see me! in the Content field and click Save Component.
  21. Click the question mark icon on the right-hand-side navigation to open Page Conditions.
  22. Click New Page Condition.
  23. Click New Page Rule.
  24. Select Toggle This from the Left Page Component dropdown menu.
  25. Select Value from the Metadata Type options.
  26. Select Equal To as the Criteria.
  27. Select Value again from the Metadata Type options.
  28. Click Select or create a new value in the Right Value field.
  29. Select the $True Boolean value from the list of values.
  30. Click Apply Rule.
  31. Select And as the Comparison Type. (The And/Or logic here only has an impact if there are multiple page rules. For single conditions like the one we are creating, selecting either option works.)
  32. Click New Page Operation.
  33. Select Shows on toggle as Assignee Page Component.
  34. Select Visibility in the Metadata Type field.
  35. Select Value from the Metadata Type options.
  36. Click Select or create a new Value in the Assignor Value field.
  37. Select the $True Boolean value from the list of values.
  38. Click Apply Operation.
  39. Click Apply Condition.
  40. Click Save Page Conditions.
    This is what the page layout looks like now:
  41. Click Save to save the page layout.
  42. Click the Page Condition tab to go back to the flow.
  43. Click Save Page.
    This is what the canvas looks like now:
  44. Draw an outcome from Start to Page condition with the name Go.
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 20 minutes to create a page, and add page conditions.

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

Let’s click the toggle button! And…

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.