Skip to Content
Author's profile photo Tammy Powlas

Learning about Custom Style Sheets and Classes in Design Studio

After reading two great blogs How To: Create a manila folder like vertical tabs using CSS by Murali Balreddy and New in 1.1 : CSS classes by Jeroen van der A I started to look more at CSS with Design Studio.

First, I watched this tutorial by the SAP In-House Product Education team:

I thought I would try some different things myself, given I completed a CSS class by CodaGogy last month.

I decided not to use the RGB codes provided in the tutorial; instead I copied something simple from class:


Setting the background to color indigo is something we learned in class.  The above screen shot is from one of my class exercises using Notepad++

Then I opened Design Studio, and looked at changing the CSS style on the panel container component.


I use the code below background: indigo; instead of the RGB codes shown in the tutorial.


Next, see how the background color changed to indigo in the application:


Following the tutorial, I decided to create my own custom CSS using Notepad so it could be reused in multiple components.


I place this custom.css in the Properties of the application:


I place the “myPanel” CSS class on two text components – see changes below:


Notice how the two text boxes are now indigo.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Starostecki
      Michael Starostecki

      Dear Tammy,

      nice to see a documentation for CSS here. I have been playing around with DS1.1 for a couple of weeks and I have seen that there are quite a few features that can be used.

      There are still some issue when using CSS "transition" with Charts. Seems that there is a bug that prohibits the custom transition.

      The only way to solve that is using a Panel and placing the Chart inside of it.

      A little bit of work is also to place a "background" url( xxx ); sadly the pictures stored in the folder are not taken into account and the full URL must be specified.

      Another part part is when trying to use "@keyframes" including a custom loading screen is not quite possible.

      but so far, i would like to show you an example of what is possible with CSS with the follwing pictures and some information to it:

        1. the navigation is created using CSS mouse over and active, focus and hover effects are visible
        1. Moving mouse over the navigation, colors fade, the icon has a transition around it and the menus slides out
        1. Menu is maxed out including a soft border at the bottom and the colors of the other items are still as grayed out.
        2. Please look at the background picture and the color of it.
        1. after selecting the menu goes back in border stays because it is active and focues
          1. been using CSS "content" to add a hidden char in order to no use functions for setting CSS styles.
        2. The background slowly moves to the right and the color is changing slowly
        3. The chart slowly fades and a new slide will appear
        4. The click on the menu ( is the only "OnClick" action ) only sets a new CSS for the chart which then activates a transion on the chart and background.
        1. Shows you the full setup and layout

      all in all, the version 1.1 is really good, still missing a few features and i am really looking forward for the SDK so that i can built my own components like a maps plugin.

      Author's profile photo Tammy Powlas
      Tammy Powlas
      Blog Post Author

      Michael - excellent comment, thank you for sharing - you should turn this response into a document.



      Author's profile photo Michael Starostecki
      Michael Starostecki


      I am working on bigger documentation for the company and i will try to take out certain parts and share them here. including CSS and coding.

      But at the moment I must finish the code for iPhones and iPads as developing one application that can be used on several devices is a must for us.

      best regards


      Author's profile photo Murali Balreddy
      Murali Balreddy

      Hi Michael,

      CSS transition  and @keyframes are not supported on IE9, the underlying browser engine of Design Studio. That is the reason why they don't work in DS. It is not a short coming of DS but IE9.

      Runtime rendering will probably be fine on other browsers as well as IE10.

      Also, I have a feeling that other than custom CSS file and image component location, all references to files and object in CSS has to be fully qualified URL.



      Author's profile photo Michael Starostecki
      Michael Starostecki

      Hi Murali,

      that is true, i have now started working on updating my keyframes and yes, they work on Chrome, Safari and Opera but IE9 is still a bit behind so IE10 would be the prefered option.

      And yes, you are right about the URLs they must be fully qualified else things do not work as they are intended to. I am currently trying to load the images onto the BI servers and pick them from there... using the provided url but i guess i will need to place them in the images folder on the tomcat as the URL part doesn't seem to like to have a request call...

      Though i am not really a fan of IE at all so i only develop for browsers that do what i want. Anyway we have Chrome as standard browser and we use iPads and iPhones as well.

      But my only point was, that some rendering is still buggy and it is important to find a solution. I will try to provide once a document here how certain web features can be rebuild, for the mean time...

           1) create 2 different charts

           2) place them over each other

           3) then use the z-index to visualize the first chart and hide the one that was on top first

           4) --> seems not to work as the chart can not be selected anymore...

      but there is always a way how to bypass that behavior.

      Thanks for the remark of IE


      Author's profile photo Murali Balreddy
      Murali Balreddy

      Regarding your charts, since they are layered, only the top one receives interaction. Use a button to toggle.between charts either using setVisible method of chart or setCSS method to a style with changed z-index.

      Author's profile photo Former Member
      Former Member


      in my custom CSS class I would like to use the command "background-image: url..." using an image I uploaded on the mime repository on Netweaver but I don't know what address to write in the URL. How I can find out the complete URL?



      Author's profile photo Former Member
      Former Member

      Hi Michele,

      one option would be to use Base64-encoded images as CSS backgrounds. When deciding to use Base64-encoded images you should consider the good and the bad in regards to your BI App scenario - see the following discussion: Is embedding background image data into CSS as Base64 good or bad practice?

      You can find out the url of the image for example with the following technique (might not be the only one, but since I don't work with NW I don't know of other ones): Add an image component temporarily to your bi app and assign the image to it from your mime repository folder: If your Design Studio is connected to a SAP NetWeaver platform, click on the Browse button that is displayed. The Open Image dialog box opens where you can select the image or icon from the MIME repository.

      Save and open the BI App in your browser (Chrome): open Developer Tools and there the Network tab, reload the BI App again if needed - you should see your image there, click on it and you will get the information about the full complete url path to this image.

      This is how it should look like (screenshot is not taken from NW but from local startup mode):




      Author's profile photo Former Member
      Former Member

      Hi David,

      it works!

      Many thanks,