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 & 2 of this blog series you've learned how to create a theme with the UI Theme Designer provided by SAP Cloud Platform and integrate it in your aBPM UIs.
Unfortunately, the UI Theme Designer can only use UIs running on SAP CP as example UIs for designing the theme. Therefore, it often is not possible to determine all theming parameters needed for the adaptations in the aBPM UI. So, it becomes necessary to execute subsequent detailed theming adaptations after integrating the theme. This blog will now describe how to determine respective CSS parameters and where to implement the changes.
Note: The procedure described will only work if a theming project as described in Part 2 of the blog already exists.
One of the most important theming adaptations is the color of label texts, since most people wish for a higher contrast than it comes with the standard theming. So, we will use this as an example which shows how to operate on all potential adaptations.
First, we must open the respective aBPM UI within Google Chrome and start the Dev Tools by pressing F12.
Use the functionality marked in red in the screenshot below and select the element you want to adapt. In our case this is the field label.
In the lower right corner the current CSS parameters of the selected element are shown, e.g. the label color #00679e.
To verify that we have found the right parameter, one can manipulate it directly within the Dev Tools and track the changes within the UI. In our case, we changed the label color to pink.
When you are finished with identifying the parameter and how you want to change it you can check the library.css file shown right next to the respective parameter.
The path shown can be found within the theming project you created in part 2 of this blog series. For the label color e.g. you will find it in the sap mobile library.css file line number 11854.
In the respective file within the eclipse project you can now make your adaptation and build and deploy the war project.
For our custom theme we wanted to set the label color to a dark grey in order to achieve a high contrast leading to a better user experience. But also after changing the respective color the result was not satisfying yet.
This was solved by going through the further parameters of the label listed within the Dev Tools. Here, we could find a setting for the opacity, which is set to 0.5 by default. After changing it to 1.0 the label color finally looked as expected. The parameter and the result is shown in the screenshots below.
For all other parameters you want to adapt you can just proceed the same way. The only important thing is to check for all potential effects that the change of a parameter can have glaobally on other UI elements. So, after every change the UI should be checked carefully.
Note: When extracting a new theming project out of the theme designer as described in part 1 & 2 of this blog series and updating the eclipse project all manual changes will be overwritten.
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 & 2 of this blog series you've learned how to create a theme with the UI Theme Designer provided by SAP Cloud Platform and integrate it in your aBPM UIs.
Unfortunately, the UI Theme Designer can only use UIs running on SAP CP as example UIs for designing the theme. Therefore, it often is not possible to determine all theming parameters needed for the adaptations in the aBPM UI. So, it becomes necessary to execute subsequent detailed theming adaptations after integrating the theme. This blog will now describe how to determine respective CSS parameters and where to implement the changes.
Note: The procedure described will only work if a theming project as described in Part 2 of the blog already exists.
Subsequent Theming Adaptations with Google Chrome
One of the most important theming adaptations is the color of label texts, since most people wish for a higher contrast than it comes with the standard theming. So, we will use this as an example which shows how to operate on all potential adaptations.
First, we must open the respective aBPM UI within Google Chrome and start the Dev Tools by pressing F12.
Use the functionality marked in red in the screenshot below and select the element you want to adapt. In our case this is the field label.
In the lower right corner the current CSS parameters of the selected element are shown, e.g. the label color #00679e.
To verify that we have found the right parameter, one can manipulate it directly within the Dev Tools and track the changes within the UI. In our case, we changed the label color to pink.
When you are finished with identifying the parameter and how you want to change it you can check the library.css file shown right next to the respective parameter.
The path shown can be found within the theming project you created in part 2 of this blog series. For the label color e.g. you will find it in the sap mobile library.css file line number 11854.
In the respective file within the eclipse project you can now make your adaptation and build and deploy the war project.
For our custom theme we wanted to set the label color to a dark grey in order to achieve a high contrast leading to a better user experience. But also after changing the respective color the result was not satisfying yet.
This was solved by going through the further parameters of the label listed within the Dev Tools. Here, we could find a setting for the opacity, which is set to 0.5 by default. After changing it to 1.0 the label color finally looked as expected. The parameter and the result is shown in the screenshots below.
For all other parameters you want to adapt you can just proceed the same way. The only important thing is to check for all potential effects that the change of a parameter can have glaobally on other UI elements. So, after every change the UI should be checked carefully.
Note: When extracting a new theming project out of the theme designer as described in part 1 & 2 of this blog series and updating the eclipse project all manual changes will be overwritten.
- SAP Managed Tags:
