Basic layout can be changed with the techniques described in my previous article that can be found by clicking here.
But what would you do if the standard SAP styling of a component does not meet the requirements set by business? It is possible to tell the business there is no way in changing this, but what if there was a workaround for standard styling of components?
If we explore the generated page of the Design Studio dashboards in Google Chrome with the developer tools, we see that the custom CSS sheet is added behind all standard SAP CSS sheets. This makes it possible to overwrite the layout that was defined by SAP.
Figure 12: Added custom CSS file behind standard SAP CSS files
Say you have a number of button components and they need to have the same layout throughout the whole application. There are two possibilities to implement this:
All options are possible to attain the same goal, but if you ever want to create a company-specific template the first option is more work-intensive to create and especially to adapt to any layout-changes the company ever wants to make. When there is one central CSS definition that is adapted for that company and a company colour changes, it has only to be changed in one place and every dashboard is up-to-date with the new layout, while in the first option every dashboard has to be checked and possibly adapted.
Finding the correct class
If we take a button as an example and we want to change the hover layout of that button, we need to know which class we have to change. This could be a little bit trial and error at first, especially for components that use a lot of CSS classes. To do this I used Google Chrome Developer Tools and the inspect element option.
In the following example, I will change the hover colour and the border colour of the component to orange.
Figure 13: Hovering the button component
As shown in the screenshot above, the button has a darker grey colour when it is hovered and a darker grey border. When we inspect the element, we see the following CSS classes are used:
Figure 14: SAP CSS classes for the button component
If we also add a dropdown component and look at the CSS for this component, we see the following CSS classes.
Figure 15: SAP CSS classes for the dropdown component
As you can see in the screenshots above, it is clear that most, if not all, of the CSS classes used in the standard components have the same prefix “sapUi”.
Overwriting the style sheet
When we go back to our initial requirement, to change the hover colour of the button and the border of the button, we now have to explore and adapt the changes to the standard CSS class. This can also be done in the inspect element feature of the Google Chrome Developer Tools. When an application is executed in Google Chrome, there are three possibilities to open the Developer Tools. There are two keyboard shortcuts, which are “F12” or “CTRL+SHIFT+i) or you could use the menu with the following steps.
Click the “…”-icon in Google Chrome
Navigate to “More Tools” and select “Developer Tools”
The next screen will be opened when using one of the three ways mentioned.
Figure 16: CSS class that handles the button border - before change
Figure 17: CSS class that handles the button border - after change
The first part, being the colour change of the border, is done. However, we also need to change the colours when hovering as the hover border will still take black as border colour. The information for the hover part is also viewable in the styling part of inspect element. This can be done to change the element state in the styles-part of the developer tools, as illustrated below.
Figure 18: CSS classes that handle the button border and background – hover element state
At this point, we can just copy/paste the names of the CSS classes which we need to change from the existing styling in the custom CSS file.
Figure 19: Overwriting the standard CSS class with custom styling
When we save this and run our application, we see the appropriate layout we wanted in our application.
Figure 20: Result of border color change to orange
Figure 21: Result of border -& background-color change to orange
Note: Be aware that the standard CSS classes are used throughout the entire application. Thus by overwriting the standard CSS styling, it is possible that this will lead to conflicting results when you do not want the standard components to be changed in other parts of the application, where this was not intended. But with CSS, there are also ways to apply styling to a class only if it is a child of another CSS class. This other CSS class could be a CSS class defined in the properties of the component. I will not be going into full details on this point, but leave a message if you want to know more.
Happy styling!
But what would you do if the standard SAP styling of a component does not meet the requirements set by business? It is possible to tell the business there is no way in changing this, but what if there was a workaround for standard styling of components?
If we explore the generated page of the Design Studio dashboards in Google Chrome with the developer tools, we see that the custom CSS sheet is added behind all standard SAP CSS sheets. This makes it possible to overwrite the layout that was defined by SAP.
Figure 12: Added custom CSS file behind standard SAP CSS files
Say you have a number of button components and they need to have the same layout throughout the whole application. There are two possibilities to implement this:
- Creating a custom CSS class per report which can be used for every button-component that report
- Creating a custom CSS class in a common CSS file (cross-application) which is general for all reports
- Changing the standard CSS class provided by SAP.
All options are possible to attain the same goal, but if you ever want to create a company-specific template the first option is more work-intensive to create and especially to adapt to any layout-changes the company ever wants to make. When there is one central CSS definition that is adapted for that company and a company colour changes, it has only to be changed in one place and every dashboard is up-to-date with the new layout, while in the first option every dashboard has to be checked and possibly adapted.
Finding the correct class
If we take a button as an example and we want to change the hover layout of that button, we need to know which class we have to change. This could be a little bit trial and error at first, especially for components that use a lot of CSS classes. To do this I used Google Chrome Developer Tools and the inspect element option.
In the following example, I will change the hover colour and the border colour of the component to orange.
Figure 13: Hovering the button component
As shown in the screenshot above, the button has a darker grey colour when it is hovered and a darker grey border. When we inspect the element, we see the following CSS classes are used:
Figure 14: SAP CSS classes for the button component
If we also add a dropdown component and look at the CSS for this component, we see the following CSS classes.
Figure 15: SAP CSS classes for the dropdown component
As you can see in the screenshots above, it is clear that most, if not all, of the CSS classes used in the standard components have the same prefix “sapUi”.
Overwriting the style sheet
When we go back to our initial requirement, to change the hover colour of the button and the border of the button, we now have to explore and adapt the changes to the standard CSS class. This can also be done in the inspect element feature of the Google Chrome Developer Tools. When an application is executed in Google Chrome, there are three possibilities to open the Developer Tools. There are two keyboard shortcuts, which are “F12” or “CTRL+SHIFT+i) or you could use the menu with the following steps.
Click the “…”-icon in Google Chrome
Navigate to “More Tools” and select “Developer Tools”
The next screen will be opened when using one of the three ways mentioned.
Figure 16: CSS class that handles the button border - before change
Figure 17: CSS class that handles the button border - after change
The first part, being the colour change of the border, is done. However, we also need to change the colours when hovering as the hover border will still take black as border colour. The information for the hover part is also viewable in the styling part of inspect element. This can be done to change the element state in the styles-part of the developer tools, as illustrated below.
Figure 18: CSS classes that handle the button border and background – hover element state
At this point, we can just copy/paste the names of the CSS classes which we need to change from the existing styling in the custom CSS file.
Figure 19: Overwriting the standard CSS class with custom styling
When we save this and run our application, we see the appropriate layout we wanted in our application.
Figure 20: Result of border color change to orange
Figure 21: Result of border -& background-color change to orange
Note: Be aware that the standard CSS classes are used throughout the entire application. Thus by overwriting the standard CSS styling, it is possible that this will lead to conflicting results when you do not want the standard components to be changed in other parts of the application, where this was not intended. But with CSS, there are also ways to apply styling to a class only if it is a child of another CSS class. This other CSS class could be a CSS class defined in the properties of the component. I will not be going into full details on this point, but leave a message if you want to know more.
Happy styling!
- SAP Managed Tags:
