The page layout menu and navigation

With the Boomi Flow page element, we can lay out the structure of pages our users will interact with. We can create our own components and containers within page layouts as well.

When we create a new page layout, this is the screen we see:

The left-hand side menu

The left-hand menu lists default components we can use in the page layout. When we expand the menu, we can see the names of these components, along with the icons.

The components are broadly grouped into four categories: Content, Input, Data, and Charts.

Content —  The content section lists the components we can use to show our users… you guessed it right… content. There are five such components available. 1. Hidden, 2. Presentation, 3. List, 4. Outcomes, and 5. Image.

Input — We have readymade components available with Flow that let us get inputs from our users. There are seven components that let us do this. 1. Input, 2. Radio, 3. Checkbox, 4. Toggle, 5. Text, 6. Rich Text, and 7. Combo box.

Data — The Flow data components let us play around with data. We can display the data as tables or tiles. We can also let users upload or download files. There are four data components. 1. File upload, 2. Table, 3. Files, and 4. Tiles.

Charts — The charts component lets us display data to our users in the form of charts. There are five such components. 1. Bar, 2. Line, 3. Pie, 4. Doughnut, and 5. Polar Area.

The right-hand side navigation

There are four icons on the right-hand side. This is what they do:

Settings — This is the first icon on the right-hand side navigation. It looks like a gear.

We can add a name and label, as well as comments by clicking this icon.

Page conditions — This is the second icon on the right-hand side navigation. It is a question mark, and leads us to the page conditions dialog box.

Preview — This is the third icon on the right-hand side navigation. It looks like an eye, and shows us a preview of the page we are currently working on. Here is a sample page layout:

Page metadata — The fourth icon on the right. It gives us a glimpse of the page metadata. If we like, we can click the icon, and edit the page metadata as well.

Save — Last but not the least, the save icon lets us save the page. It is a good idea to save the page frequently as we are working.