It is always a lot of fun playing around with CSS (Cascading Style Sheets) ! In this blog, I have showcased some of the cool things I’ve tried to do using CSS in SAP Design Studio. You can also check out these blogs about creating basic animations and custom background patterns using CSS.

To get some basics out of the way, the look of components is determined by the theme of the application. To make changes to the look and feel of a component, we can use the CSS Style Editor and change the UI properties. But if we would like to change a whole bunch of properties, we can group them in a CSS Class and assign that class to the component, in the CSS Class property. We can consolidate multiple such classes, in a single Custom CSS file for the application. This must be located in the root folder of the application. It is very helpful to have a CSS file for the application, with all the classes, because it makes it so much easier to make global UI changes across the application.

Inline CSS – defined using the CSS Style Editor – in the Display properties of the component.

Display Properties - SAP Design Studio

Display Properties – SAP Design Studio

 

CSS Style Editor - SAP Design Studio

CSS Style Editor – SAP Design Studio

Linking a Custom Style Sheet to the application – the .CSS file needs to be placed in the repository folder of the application. The repository location can be accessed from ‘Application -> Open Repository Folder’.

Repository Folder

Repository Folder

 

The style sheet can be linked to the application by specifying the .CSS file name in the ‘Custom CSS’ Display property of the application.

Custom CSS File in SAP Design Studio

Custom CSS File in SAP Design Studio

You can now assign any of the classes to each component by specifying it in the ‘CSS Class’  Display property of the component.

CSS Class

CSS Class

It’s Showtime !

Some of the images / animations shown below may not render well in some of the browsers, particularly IE. Some might give unexpected results…just a word of caution ! If you would like to take a look at the related CSS files used in this blog, feel free to reach out to us at solutions@test.visualbi.com. If you have some crazy CSS ideas, would love to hear from you ! Feel free to send yours with your name, a cool caption and the application file.

To conclude, SAP Design studio is well on its way to becoming the de-facto tool for dashboarding. Coupled with the power and flexibility of CSS, imagination is the only limit !

Show your love to SAP Design studio – HEART

sap-design-studio-graphics

 

The sky is the limit – CSS Animation – CLOUD

sap-design-studio-css-animation

 

Seek Direction – COMPASS

sap-design-studio-css-animation-compass

 

Remembering my First Game – MARIO

sap-design-studio-css-images

 

Save Water – WATER_DROP

sap-design-studio-css-images-2

 

Text and Button Effects :

Hexagonal Button – HEXA_BUTTONS

sap-design-studio-css-buttons

 

sap-design-studio-css-kpi-tile

 

Ribbon Text – RIBBON

sap-design-studio-css-text

 

Stamp Effect – STAMP

sap-design-studio-css-effects

 

Talk Bubble – TALK

sap-design-studio-css-call-outs

 

Text Effects – TEXTEFF

sap-design-studio-css-text-emphasis

 

Learn More

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com