Skip to Content

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.

Inline Style - CSS Style property.PNG

Inline Style - CSS Style Editor.PNG

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.


CSS Style - Repository Folder.png

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.

CSS Style - Adding Style to Application.PNG

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

CSS Style - Adding class to components.PNG

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.

You can follow Part 2 of the Document at Crazy CSS Fun with SAP Design Studio – Part 2

Showcase


Show your love to SAP Design studio – HEART

Showing love to SAP Design Studio.PNG

Cloud is the Limitation (CSS Animation) – CLOUD

Cloud is Limitation.gif

Seek the direction – COMPASS

Seek the direction.PNG

Remembering my first game (Mario) – MARIO

Mario.PNG

Save Water – WATER_DROP

Save Water.PNG

Hexagonal Button – HEXA_BUTTONS

Hexagonal Buttons.png

KPI Title – KPITITLE

KPITITLE.png

Ribbon Text – RIBBON

Ribbon Text.png

Stamp Effect – STAMP

Stamp.png

Talking KPI – TALK

Talk.PNG

Neon and Project Text Effect – TEXTEFF

Text_Effect.PNG

3D Text – 3DTEXT

3D Text.PNG

Animated Border – ANIMATEDBORDER

Animated Border.PNG

Bubble – BUBBLE

Bubble.PNG

Exit Button Animation – EXITBUTTON

EXITBUTTON.PNG

Pulse Menu – PULSEMENU

PULSEMENU.png

Batman– BATMAN

Cold Beer– BEER

BOY & GIRL– BOYGIRL

MACBOOK PRO– MACBOOK

APPLE IPHONE– IPHONE

US FLAG – USFLAG

OSXWINDOW – OSXWINDOW

3D BUTTON Animation- 3DBUTTON

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply