Tutorial: Using page conditions to show text on toggle

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.

  • See the flow in action here.
  • Want the flow? Of course! Here is the sharing token: P2g1PN8Bm/xxVo8SIbrAK0oj6RmwlrS8Hm4yKxag60yxan2a2nPoo4N3jUE57S+b
  • Here is a link to the procedures without pictures.
  • Here is a video of the tutorial in action.

Let’s get building!

  1. Create a new flow called Page Condition using the Flow 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.

    This opens a configuration panel.
  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  to the Main container of the page layout.
  9. Type Toggle this in the Name and Label fields.
  10. The option for Editable should be checked. Check the Required box.
  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 under the Toggle component.
  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. Select Toggle This for the When the value of option.
  23. Select the is True option.
  24. Select Shows on toggle as the option for then make.
  25. Select Visible as the option from the dropdown menu.
  26. Click Save. We will get the message Page condition successfully created!
  27. Click Cancel to return to the page layout.
  28. Click Save to save the page layout.
  29. Click the Page Condition tab to go back to the flow.
  30. Click Save Page.

    This is what the canvas looks like now:
  31. 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 10 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 toggle this!