SAP Design Studio is a widely used tool by Data Analyst as it promises a lot with cross tab enhancements, improved Bookmark, Tool tips, RRI and lot more that makes the life of an analyst easier. With that said, what happens when you ask a Product Engineer to play around in SAP Design studio? I spent the weekend exploring some CSS possibilities from the web onto SAP Design studio and this is a result of that. Let the craziness begin!

Defining the CSS

Some of the CSS in this are inline applied to the particular panel or Text while some of them are from the CSS file that is linked to the application. Since SAP Design Studio design time features embedded browser, it may not be able to render all of the CSS3 properties and animations. Also some of this does not work in IE! Some might give crazy results inside the tool! Just a word of caution.

Inline CSS

Inline CSS is usually applied by defining the CSS style in the display properties of a Panel or Text component.

Just enter the required style in and it will be applied to the component.

Linking Style sheet

The style sheet can be linked by placing the CSS file inside the repository folder. The repository location can be accessed through the Application -> Open Repository Folder. This is specific to the each application.

Now the placed style sheet can be linked to the whole application by specifying the file name (along with .css extension) in the Custom CSS of display property of application.

You can now assign the necessary class for the components through the property.

What’s next?

I am putting together all these in this documents, along with the Application/Source for the same. You can download it from https://github.com/sgsshankar/SAP-Design-Studio-CSS

I would be updating this document as a collection of crazy CSS things done in SAP Design Studio. Feel free to contribute yours to the comment below (along with your name, cool caption and the application file) and I would be adding it to this document with your application name and Credit, or give me a pull request in GitHub with your application.

To conclude, SAP Design studio is growing to be the de-facto tool for Dashboards, but with its power, it can turn the Data Analyst into a Web Developer! Imagination is the only limitation with CSS and SAP Design Studio.