Bootstrap CSS with IBM BPM Coaches

Many of us are aware of what bootstrap is and how that can help in creating a responsive UI that will adjust the UI layout based on the device in which the screen is opened. In this post let us look at how to build a near responsive UI with stock coach components using bootstrap. The idea is to exploit the bootstrap’s concept of dividing the screen in to twelve columns to adjust the layout automatically based on the screen resolution.

Before going further, the first thing that needs to be done is download the bootstrap CSS and import that as a managed web file in to your toolkit / process app.

 

Now we will have to create several containers such as rows /columns that uses the bootstrap CSS as shown below. These columns are key to the responsiveness of the UI when the screen/browser resolution is changed.

Now let us see how to create these containers.  Below is how the Btstrp Container Fluid is created.

Add the bootstrap related items to the included scripts of the Coach view as shown in the below figure.

Bootstrap container fluid CV behavior tab

Go to layout and add the custom html with elements and container as shown in below image.

Bootstrap container fluid CV Layout tab

Let us see one more example (Btstrp 10 column)

Bootstrap Row CV layout tab

Now place these container in the coach / coach view to align the UI components (coach views), in the pattern as shown below.

Bootstrap Container Fluid --> Bootstrap Row --> Bootstrap column(s) --> CV component(s) in each column. Below image shows the arrangement in coach.

 

When we run the human screen, below are the screen layout when browser is maximized and browser with lesser size.

Browser at maximum size

Browser at Lesser size

To achieve absolute responsiveness, we may have to create more containers which can be used based on the device sizes, with the containers that were shown above we can achieve desired responsiveness of the screen.

Thanks for Stopping by!! Hope this is useful.