Using themes

With Boomi Flow, you can use themes to change the look-and-feel of your apps.  A theme produces a harmonious design for the elements within an app, and changes the way it is rendered to the end-user.

An app is rendered using the Boomi Flow default player/theme, if no theme is used.

Boomi Flow uses Bootstrap; which means you have access to all the themes built by the friendly neighborhood developers at Bootswatch, out of the box. The themes are open source and released under the MIT license.

Boomi Flow ships with all of the Bootswatch themes as standard, as well as the Salesforce 1 theme. Themes are built for Bootstrap 3.

The biggest advantage of using themes is you can modify how the app is rendered easily, without having to rebuild the app or having to write elaborate CSS. Merely replacing one CSS file with another does the trick.

How do themes work? Let’s build a quick app with two Steps and see for ourselves.

This is how the first screen of the app is rendered:

Let’s try using a new theme. Say, Cyborg.

There are a couple of ways to add a theme to an app:

  1. Using a query parameter
  2. Using a custom player

Let’s look at them now.

Using a query parameter

When we publish a flow, this is what the app URL looks like:

Let’s say we want to use the superhero theme. We update the app URL by adding a &theme=superhero query parameter at the end. This is what the app URL is now:

This is how the app is rendered:

Using a custom player

We can create a custom player that references the theme we want to use, and save the player in the tenant. When we run the app, we can select the custom player instead of the default player.

  1. Click Players.
  2. Click New.
  3. Enter a name for the player in the Name field and select the default player in the Base on field.
  4. Click Save. You will get a message saying Player saved successfully.
  5. Refresh the list of players by clicking the Refresh icon.
  6. Close the message.
  7. Select the newly-created player to edit.

    This populates the player with the code from the default player. We are going to be editing a line of code now. (Yes, just a line. And a teeny-tiny edit at that too.)
  8. Let’s pull up Ln 145, where it says theme: queryParameters[‘theme’]

  9. Delete queryParameters[‘theme’] and replace it with the name of the theme you would like to use, enclosed within single quotes. For example, ‘superhero’. This is what Ln 145 is now: theme: ‘superhero’

  10. Click Save to save the player.
  11. We will can select this player and click Run to run a flow with our theme.

You can find a list of themes available for use in Bootswatch here. If you like, you can also code your own themes.

Note: Do not use upper-case when entering the name of the theme. For example, ‘Yeti’ should be written as ‘yeti’ in the query parameter.