Page layout — Image

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

Let’s take a look at the image component.

Image

The image component lets us add images to a page layout.

We drag and drop the image component to a container in the page layout. Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component. We can add the image URL in configuration options, as well as our desired display width and height.

When we save the component, the image gets added to the page layout.

We can see the image URL in the page metadata.

The <alt> tag is set to the Name of the page component.

The bootstrap img-responsive class is added to the <img> element.

Images are rendered at runtime, and do not show up when we do a page preview in the drawing tool.

Goody bag
  1. Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=61ffd553-861a-44ba-898d-1f99667d95f9
  2. Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/image.json

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.

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.