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!
- Create a new flow called Page Condition using the Flow Identity service.
- Drag a Page element to the canvas.
- Type Page condition in the Name field and click New Page Layout.
This opens a new page layout. - Click the Settings icon.
This opens a configuration panel. - Write Page condition in the Name and Label fields.
- Click Save. This saves the name and label of the page layout.
- Click the Save icon to save the page. The page name changes to Page condition.
- Drag a Toggle component to the Main container of the page layout.
- Type Toggle this in the Name and Label fields.
- The option for Editable should be checked. Check the Required box.
- The Save the whole selection option under State should be checked.
- Click Select or create a new Value.
- Click Create a new Value.
- Type Toggle: Boolean in the Name field.
- Select Boolean from the What kind of value is this option.
- Click Save.
- Click Save Component.
This is what the page layout looks like now: - Drag a Presentation component from the Content section to the Main container under the Toggle component.
- Copy-paste Shows on toggle in the Name field.
- Copy-paste Now you see me! in the Content field and click Save Component.
- Click the question mark icon on the right-hand-side navigation to open Page Conditions.
- Select Toggle This for the When the value of option.
- Select the is True option.
- Select Shows on toggle as the option for then make.
- Select Visible as the option from the dropdown menu.
- Click Save. We will get the message Page condition successfully created!
- Click Cancel to return to the page layout.
- Click Save to save the page layout.
- Click the Page Condition tab to go back to the flow.
- Click Save Page.
This is what the canvas looks like now: - 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: