Building custom themes for aBPM UIs – Part 2

[katrin_welsch]

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:

Part 1 – Introduction to using the UI Theme Designer

Part 2 – Integrating the UI Theme Designer export into aBPM

Part 3 – Subsequent detailed theming adaptations with Google Chrome

In Part 1 of this blog series we learned how to create a first theme with the UI Theme Designer provided by SAP HCP. This blog will now describe how to use the theme export of the UI Theme Designer to integrate it in your aBPM UIs or even other custom UI5 UIs.

 

Configuring the Theme in your project

Create DCs

Now that you have created your own theme you need to have your project for hosting the new theme.

Therefore create two DCs, one EAR and one WAR. As the coding for theming is used in every aBPM scenario in your project you should put in a common SC or even better a complete own SC to enable independent transports.

Now maintain the DC’s dependencies. The EAR DC needs to have one build time dependency to the public part of the WAR DC. Also both DCs need to have a build time dependency to the public part api of the DC abpm/common/ui5/ear. This is needed to load files from standard content.

And you need to add a dependency to abpm/ui/app . This is needed to load the servlet for merging the requests.

Create the same dependencies in the the WAR DC.



 

Add exported Theme

To make the exported theme accessible a new folder has to be created in the WebContent folder of the WAR DC, which has exactly the name of the theme ID as defined while creating the theme export. The zipped theme export can then be extracted into the new folder.



 

Create the Servlet

To make the servlet accessible from a browser the new servlet must be registered to the servlet container. This is done in the web.xml file of the WAR DC.

The servlet class to be used is com.sap.consulting.abpm.ui.services.theming.CustomThemeServletV1



 

The <url-pattern> must also match the theme ID and folder name

 

Deployment descriptor

To tell the server where the servlet can be found the deployment descriptor of the EAR DC has to be extended. Therefore create a file application.xml in the META-INF folder.



Finally the whole theming solution has to be registered in the aBPM global ui properties.

We just need to add the base path of the EAR that you configured in the application.xml.

Got the NetWeaver Administrator

<host>:<port>/nwa/sys-config



Select Applications, filter for abpm~ui and modify the parameter theme_servlet_path to match your entry in the application.xml file. Don’t forget to save your modifications.

To make your theme the default theme for every aBPM UI you can set the css_theme parameter to the new theme ID (in our case “custom1test”).

 

Build, deploy and test

When all the former steps are done the two touched DCs need to be build and deployed.

Then you can test your newly deployed theme by adding this parameter to your URL:

?sap-ui-theme=custom1test

If you have registered your theme as default theme in the Java System Properties it should be shwon by default without any URL parameter.

When everything worked out fine you should see now an aBPM page that applies to your newly deployed theme.

If you want to use the theme also for other custom UI5 UIs running next to you aBPM UIs, you can just add the theme to the bootstrap of the respective index.html as shown below: