Building branded apps

“Branding,” as the positioning pundits are fond of saying, begins with well… er… the brand. We can build white label apps for our clients and customers using Flow. If we like, we can also add our own logo to any apps we build.

The easiest way to do this, is to upload the logo as an asset, and insert the asset into the content editor of a Step element, or the presentation component of a page layout.

  1. Click LOG IN to login to the Boomi Flow Drawing Tool.
  2. Click Assets.

    This opens the Assets tab.
  3. Click Upload.

    This opens the Upload dialog box.
  4. We can either drag the logo file, or click Add files to select a file from the computer.
  5. Click Upload.

    This uploads the logo as an asset. We use the following URL form to store/retrieve assets —{Tenant ID}/{Asset name}
  6. Click Close.

Using the logo in a Step element

  1. Let’s say we have a Step element. Click Insert in the configuration panel.
  2. Select Image.

    This opens the Insert/edit image dialog box.
  3. Click the folder icon next to Source.

    This opens the Flow Assets dialog box.
  4. Select the logo.
  5. Click Insert.
  6. We can resize the logo here, if we like. Click Ok.

    This inserts the logo in the content editor.
  7. We can add whatever content we like in the editor. For example, we can copy-paste the text Flow is brought to you by Dell Boomi. Click Save Step.

When we run the app, this is how the logo is rendered:

Using the logo in a page layout

  1. Let’s say we have a page layout. Drag a Presentation component to the Main container.

    This opens the page component configuration panel.
  2. Type Logo in the Name field.
  3. The content editor used in the page component, is the same as the editor in the Step element. Let’s follow the procedures mentioned for: Using the logo in a Step element (Please see the section above). Click Save Component when done.

    This is what the page layout looks like now.

    We can keep adding subsequent components to the page.

This is how the logo is rendered in the page: