Building custom themes for aBPM UIs – Part 1
Often theming business applications according to the specifications of a corporate style guide is a requirement in development projects. Therefore, this blog series demonstrates a possibility provided by aBPM (see aBPM – a solution extension offered by SAP Consulting) to theme your aBPM process UIs with no requirements in deeper knowledge of CSS.
The blog series is structured the following way:
What does theming mean?
SAPUI5 uses web standards like HTML5 und CSS, this makes it easy to adapt the look and feel.
The sum of all visual adjustments is called theme, which contains all CSS configurations for size, color and spacing of all UI elements.
There are already some pre-delivered themes available that can be easily checked by appending this parameter to the application URL:
Themes that are already available:
aBPM provides you the possibility to use the UI Theme Designer for creating your own custom themes which is available for free via the SAP HCP trial account (https://account.hanatrial.ondemand.com/).
After singing up you can subscribe for the Theme Designer and start it with the following procedure:
- Log on with a user (who is an account member) to the SAP HANA Cloud Platform cockpit, using the developer account at one of the following URLs:
|Productive Use||Trial Use|
https://account.us1.hana.ondemand.com (United States)
- Select your user
- Chose Subscriptions.
In the Subscribed HTML5 Applications section, choose New Subscription.
- In the New HTML5 Subscription dialog box, choose the existing themedesigner subscription.
An application URL is displayed.
- In the Application column, select the new themedesigner entry.
Under Active Version, click the URL or copy it into your browser.
- Enhance the URL with the SAPUI5 version parameters as described in the note http://service.sap.com/sap/support/notes/2306045
You can check the current SAPUI5 version used in aBPM by opening the developer console in your browser by pressing F12 and loading one of your aBPM pages. Type sap.ui.version at the console prompt and press Enter. The version of SAPUI5 libraries will be displayed as shown below:
In our case we need to refer to version 1.38.5: https://themedesigner-<account_name>.dispatcher.hanatrial.ondemand.com/index.html?hc_reset&sap-themeroot=/themeroot/1.38.5&sap-webdav-themeroot=/themeroot/1.38.5
|When building a Theme for aBPM we recommend to use the exact same version in the Theme Desinger as found in aBPM. Otherwise you may experience problems on UI elements that have been changed.|
More detailed information about UI Theme Designer and the documentation you can find here: https://help.hana.ondemand.com/theme_designer/frameset.htm
Within the theme designer you can either upload a custom theme for adaptations or build a new one based on an already existing standard theme.
In this example we want to build a new theme based on the standard theme sap_bluecrystal.
The Theme Designer can use an online web page to directly show the changes you do when manipulating the current Theme. The page is called target page. But since this page has to be in the same network as the Theme Designer we have to use the provided example applications and UIs to review our changes.
Choose one Target Page to show your changes directly. Select e.g. “UR Application Previews” and “Purchase Order” as well as “Quick Theming”.
This selected target pages appears in the tree on the left side. Now click on the “Purchase Order” item in the tree. The page appears.
You can now start manipulating the Theme. Your changes will directly be displayed on the Preview tab. Compare it to the original target page when clicking the Original tab.
The Theme Designer offers three modes for adapting the Theme. The quick, expert and freestyle CSS mode, which can be accessed via the bar on the most right of the screen and offer different degrees of flexibility.
Within the quick mode you can set some basic properties (e.g. Brand and Highlight Color) which may influence multiple theming parameters.
For more detailed settings switch to the expert mode. Here you can filter for different types of theming parameter (e.g. colors, dimensions,…). But you can choose the magnifier symbol to select an element on the preview page and see its respective theming parameter.
E.g. we wanted to adapt the color of the page header. Therefore we selected the header part of the target page in the magnifier mode within the expert mode. The correct theming parameters can be identified by their names (or by try and error) as shown below.
We changed the sapPageHeader_Background to blue (#0079ce). The text color is adapted accordingly to white based on the background color set, due to a LESS function which sets the text color based to a contrast threshold.
As you can see in the picture above we also changed a view other parameters, e.g sapBackgroundColor to obtain a different UI background color.
When clicking the triangle symbol all changes already made are listed.
Within the UI Theme Designer you can save your own created themes as drafts. When you are done with all basic desired changes you can export your theme by clicking “Theme” in the menu on the top and then click on “Export”. In the popup choose at least ID and title:
|The Theme ID will be used later as a configuration parameter and a folder name. It is mandatory to use only small letters and numbers for the ID.|
You will receive a zip file.
The newly created Theme is now ready for being used it in a Java Web Archive.
How to use this zip file within your aBPM project will be the topic of part 2 of this blog series.