Adapting the standard CSS-styles for corporate styling (1/2)

[cubis_kennyp]

Introduction

The following document is based on examples created in SAP Design Studio 1.6, but the same methodology can be applied to Lumira Designer as well.

When an application designer creates a new application, certain objects are created by the tool and some common files are used. When generated once the designer saves the report, an application in Design Studio basically is an HTML5-page with standard SAP CSS-files and if applicable your own created CSS-file.

Sometimes the standard SAP CSS does not meet the customer’s layout requirements. Most large companies want to work with a customized layout throughout the entire business. In the beginning when you work with Design Studio, you might get lost in all the CSS possibilities. There is the standard CSS styling which is applied to a component, but also the possibility to add a custom CSS class or apply inline CSS styling to a component.

To use the custom CSS class-method, you need to link the Design Studio report to a customized CSS file. Inside this custom CSS-file it is possible to overrule the standard SAP stylesheet to provide a customer specific layout that can be applied on every separate dashboard.

Concluding, it is possible to create a customer-specific styling template which is reusable in the complete dashboard solution, for most of the Design Studio components. In the following articles, I will explain 2 basic CSS techniques which can be used to customize the layout. To close the articles, I will provide some examples on how to overrule the standard SAP CSS layout for Design Studio components.

CSS styling/CSS-classes

Changing the CSS-style of a specific component SAP Design Studio

It is easy to set styling in the properties of the component itself. This is basically the same as in-line CSS styling in HTML. For example: changing the colour of a text from black to white, as illustrated below.



Figure 1: CSS Style of a text component - before change



Figure 2: CSS Style of a text component - after change

It is also possible to add more than one line in the inline CSS Style. You can add as much inline CSS as is necessary, as illustrated below.



Figure 3: CSS style of a text component - Add as much inline CSS as needed

Adding a CSS class in SAP Design Studio

To use a customized CSS class, you need to define the class in a custom CSS files. There are 2 ways of doing so:

• Add the CSS class to the component(s) first and afterwards add and style the CSS class in the custom CSS-file


• Add the CSS class in the custom CSS-file and add if to the component(s) afterwards.

It does not really matter which method you choose, if the CSS class exists in your custom CSS-file and is applied to the appropriate component(s).



Figure 4: CSS Class of a text component - before change

Adding the custom CSS to the application

First the custom CSS must be created on the BI Platform before you can start using it. Adding a custom CSS can easily be done as follows:

1. Inside the application, you go to the APPLICATION-object and the properties are listed.

Figure 5: Adding a custom CSS - APPLICATION-object properties

2. In the properties of the APPLICATION-object, you have a property called “Custom CSS”. After clicking on the icon inside the property, a folder-structure of your BI platform will open.

Figure 6: Adding a custom CSS - BI Platform folder structure

1. For demo purposes, I will add a custom CSS-file in my “Favorites”-folder. If you want the custom CSS file to be used for multiple users, store it in a common folder. In the dialog box, there are 5 actions available.
   
   
   
   1. Add a folder
   
   
   2. Rename a folder
   
   
   3. Delete a folder
   
   
   4. Upload a local CSS-file
   
   
   5. Add a CSS-file
   
   
   
   


2. To create a new file, you click on the  action and the system will ask a name for the custom CSS-file which will be stored in the folder you are currently located in.

Figure 7: Adding a custom CSS - Provide name for custom CSS

5. After providing the name, a CSS-file is created and this can be opened immediately.

6. After opening, the custom CSS-file is immediately customizable and linked to the application you are currently working on.

7. When going back to the APPLICATION-object, you also see the reference to the CSS-file added.

Figure 8: Adding a custom CSS – APPLICATION-object properties after adding

Opening the custom CSS

You can open the custom CSS file quickly by pressing the button in the ribbon.



Figure 9: Opening the custom CSS file for the application

Adding the CSS class with its styling

In the example below, the effects of creating the “CSS_TXT_TITLE_BIG”-class and adding it to a text component are illustrated. Do not forget to save the custom CSS-file to be able to see the changes in Design Studio and when you run the application.



Figure 10: Adding the CSS class and its styling to the custom CSS



Figure 11: Result of adding a CSS class to a text component

 

You can find more information about overwriting the CSS of the standard SAP classes by clicking here.