Customize User XP

Blog
1

How to customize the Bonita User XP is among the most frequent questions on the forum.

This blog post gives hints on how to do it.

First of all, it is worth mentioning that the Bonita User XP has been written using the Google Web Toolkit (GWT). Consequently the dynamic part of the user interface benefits from all the power of Ajax. Once the static resources, such as HTML and css files are loaded, widgets are injected to allow the user to browse cases.

The place where each widget is injected is defined through the structure of the HTML itself. This means that if the HTML is changed, the widget positioning will change also.

Default HTML structure

The BonitaConsole.html file gives the main structure of the User Interface. Once loaded by the web browser, some Ajax calls are made and then needed widgets are injected into the page. The location where a particular widget is injected is defined by an element in the HTML with a reserved ID. For instance the DIV with ID "SystemLabelBrowserContainer" will be the container in which the list of system labels will be injected, i.e., Inbox, Starred, My Cases, etc. As another example the HTML element with ID "AdminContainer" will be the place where the admin menu will be injected.

Here is the list of the container IDs that are used for injection:

  • user_id
  • SystemLabelBrowserContainer
  • CategoryBrowserContainer
  • UserLabelBrowserContainer
  • MoreLabelAndCategoryBrowserContainer
  • ProcessBrowserContainer
  • StatisticsViewerContainer
  • AdminContainer
  • you_are_here
  • MessageContainer
The BonitaConsole.css file defines the look & feel.
Default User XP look and feel

Default User XP look and feel

Examples of changes

Changing the layout of the widget is just a matter of tweaking the HTML and CSS. Below are some examples of what can be done. You can download the corresponding HTML and CSS files from the community website: download resources.

Mirror

In the Mirror example, all the widgets have been moved to create a kind of mirrored view of the User XP. The colors have been changed also.

Mirror view

It is also possible to remove HTML containers so that the corresponding widget will not be created and consequently not be injected into the page.

Admin Features only

The following example illustrates how someone only interested by the admin section of the User XP could clean the interface of non-necessary items. It is also interesting to note the top left corner, where the navigation links have been changed from vertical to horizontal.

Admin view

Inbox only

In the same way, this example shows a User XP containing just a user Inbox. The top left corner contains a red Start icon that allows a user to start a new case.

Inbox And Start Case

Inbox And Start Case (Open)

Do it yourself

Now that you are familiar with the User XP customization. Give it a try.

Here are the steps to follow:

  • Export the User XP from Bonita Studio
  • Unzip the war
  • modify the BonitaConsole.html file
  • modify the BonitaConsole.css file
  • zip the war file
  • deploy it on your server
Enjoy!

Do not hesitate to share the result with the community.

As you can see you can display Bonita User XP the way you want just by changing a few lines of HTML and css. Even more customization will come with Bonita Open Solution 5.4 …

Nicolas Chabanoles