Building custom themes for aBPM UIs – Part 2
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
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|
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
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:
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: