SAP Design Studio affords developers the ability to dig into the CSS code and modify content to suit the needs users are looking for in their UI (User Interface). If you are new to CSS this may seem a bit daunting when you are first starting out, but Google Chrome has a great feature in their browsers that can make life easier for you. It’s called Chrome DevTools and it can come in handy when you know the component you want to change, but you don’t know what the technical name is to modify it with CSS code. (Developer tools are also available in Safari and Firefox but I find the tools in Chrome afford you the most flexibility and user-friendliness).
Let’s take a look at a simple example below. We will build a standard bar chart based on our trusty e-Fashion universe for Cities by Sales Revenue. The data for the chart we wish to visualize looks like the following:
Let’s say your boss says that he wants the hover box to stand out a bit more and have a green background with white bold fonts on the left and white italicized font on the right.
Those are some pretty specific requirements and not all of those changes can be made within the properties dialog box for the bar chart directly inside Design Studio.
Here’s where Google Chrome comes in handy. Go ahead and preview your Design Studio application in your Chrome browser. (If your application opens up in a different browser, you may copy the link and paste it into a Chrome browser or you could change your default browser to point to Chrome).
To activate developer tools in Chrome, select Control + Shift + I in Windows. We then are able to view the elements of the JavaScript and CSS code on the right while simultaneously viewing the components of the application on the left. There is a magnifying glass on the upper left hand of the DevTools box that allows you to highlight components and view the accompanying code for it on the the right when activated.
Since our focus of interest is on the hover box, we look for the class that is associated with that. We find the main class to be called “v-m-tooltip” and subsequent classes to be called “v-background” and “v-tooltip-dimension-measure”.
It will be these classes and sub-classes that will be modified in our own CSS file to change the background and fonts.
Open up a blank text file and name it BarChart.css.
For the first line of code we will use the following to get the background switched from standard white to green. This utilizes the “v-background” class.
.v-m-tooltip.vbackground {background: green !important;} /*this code will change the class for the background to go from standard white to green*/
Now, as we modify the text inside of the hover, we want to treat the component as if it is a table with 4 cells in a 2×2 Rows and Columns format such as the example below.
The class that needs to be modified here is called “v-tooltip-dimension-measure”. The accompanying code will help us make those changes.
.v-m-tooltip table.v-tooltip-dimension-measure tr :nth-child(1) {color:white !important; font-weight:bold;}
/*font will be white and bold for the first column*/
.v-m-tooltip table.v-tooltip-dimension-measure tr :nth-child(2) {color:white !important; font-style:italic;}
/*font will be white and italicized for the second column*/
Now the above code is added to the css file along with the first one for the background.
At this point we are done. We can now update our CSS file to the application and publish our css file to the repository and then preview our new bar chart.
Tweaking the components to get the desired font and style requires a bit of CSS knowledge but the hard part of identifying which class is appropriate for change is easily done with the DevTools inside of Google Chrome. The more you become comfortable with the component and class locations, the less you will need to rely upon the DevTools. But if you are a novice programmer and are not too familiar with CSS or JavaScript vernacular, the DevTools in Chrome can be your best friend.
Learn more about Chrome DevTools