Skip to Content
Technical Articles
Author's profile photo Fabien AUBERT

How to use CSS capabilities to design the look and feel of analytic applications ?

In general, when developing an application, we spend most of our time on the technical aspects to meet business user needs. But to make an application attractive it is also important to spend time on its visual aspect. Often companies define visual charters that must be respected. In order to meet this constraint, you can now use the Cascading Style Sheet technology in Analytics Designer

In this blog I will show you how to use CSS code to embellish your applications.

Where to start?

In analytics Designer there are 2 ways to style an application. You can create a theme in Analytics Designer and apply it to any application. The process is very easy because you have a graphical interface that allows you to select for each widget their style properties

This is a good way to style an application if you only want to change the basic properties of a widget.

Now if you need to style your application in a more sophisticated way, then you can add CSS code. This will allow you to have access to more style properties. To show you how it works I will start from a simple application which contains few charts, a table, a filterline, a title and a shape.

As you can see the Light Theme is applied by default. In my case I would like to have a dark theme.

Add a global CSS class

As I want a dark theme, I want to change the background color of the application. To do that you need to edit the application CSS. In this CSS file you can view all supported class names and properties of each type of widget and popup

First, I declare a new custom CSS class “my-theme” and I change the background-color property.

To apply the CSS class defined in my Application CSS I declare the “my-theme” class as the “Global default class name” for my Canvas. After that, all widgets, popups and canvas will automatically apply CSS setting corresponds to this specific custom class name.

 

 

Change the style of the widgets at the application level

To make the different widgets compatible with the dark theme I need to change some style properties of the widgets. Basically, I have to change the text colors to white and modify the background color of the text and shape widgets

Here is the CSS code in the main body of the script editor in the Application CSS

/*Define a dark style for my application*/
.my-theme .sap-custom-shape {
	fill: #3F4E61
}

.my-theme .sap-custom-text-widget {
	background-color : #3F4E61
}

.my-theme .sap-custom-text {
	color:white
}

.my-theme .sap-custom-chart-title {
	color: white
}

.my-theme .sap-custom-chart-subtitle {
	color: white
}

.my-theme .sap-custom-chart-data-labels{
	fill : white
}

.my-theme .sap-custom-number-chart-primary-values{
	color:white
}

.my-theme .sap-custom-table-title {
	color: white
}

.my-theme .sap-custom-table-title {
	color: white
}

.my-theme .sap-custom-table-subtitle{
	color: white
}

.my-theme .sap-custom-table-column-row-headers{
	color: white
}
.my-theme .sap-custom-table-dimension-header-cell{
	color: white
}
.my-theme .sap-custom-table-dimension-member-cell{
	color: white
}
.my-theme .sap-custom-table-data-cell{
	color: white
}

The script is usually composed of a custom class name, CSS selector elements, properties and pseudos.

And here is the result.

 

Use pseudos

I can change the default style of my axis labels of a chart when the mouse cursor hovers them. I want them to become yellow with a bold style. To do so I need to use the pseudo “hover” associated to the “.sap-custom-chart-category-axis-label” class.

.my-theme .sap-custom-chart-category-axis-label:hover{
	fill : yellow;
	font-weight : bold;
}

I can also highlight a specific row in my table by using the nth_child(n) pseudo. In my case I highlight in gray the child number 7 which corresponds to the product “Dark beer”

.my-theme .sap-custom-table-row:nth-child(7){
	background-color: grey;
}

To know which class supports a pseudo refer to the Application CSS script editor. If you select a widget, you will see which class supports a pseudo.

Define a CSS class at the widget level

You can define a CSS class at the level of a widget. For instance, I can define a CSS class for my table in the Styling panel of this widget.

By adding the following code in my application CSS I change the background color of my table.

/*CSS Table widget level*/
.my-table-theme  {
	background-color : white
}

 

So far, we have seen how to define CSS classes at design time, but we can also do it at runtime.

Let say that I want to have an overview of the result of my Sales manager.

I want to display the Gross Margin (in my 1st numeric point chart) in green if the value is greater than 30 000 000 $ and in red if the value is less than 10 000 000$.

For that in the application CSS I define 2 new classes “my-theme-numeric-point-positive” and “my-theme-numeric-point-negative” and I set some properties: title color, subtitle color and the value color.

/*Class for top performer Sales Manager*/
.my-theme-numeric-point-positive .sap-custom-chart-title{
	color: white;
}

.my-theme-numeric-point-positive .sap-custom-chart-subtitle {
	color: white
}

.my-theme-numeric-point-positive .sap-custom-number-chart-primary-values{
	color: green;
}

/*Class for low performer Sales Manager*/
.my-theme-numeric-point-negative .sap-custom-chart-title{
	color: white;
}

.my-theme-numeric-point-negative .sap-custom-chart-subtitle {
	color: white
}

.my-theme-numeric-point-negative .sap-custom-number-chart-primary-values{
	color: red;
}

I can see a manager’s results by filtering on his name by using the filterline widget. In order to style my result, I need to assign a CSS class to the NumericPoint_1 widget at runtime.

For instance, I can view the results for Kiran Raj and Ed Young

To do that I use setCssClas() method in the “OnResultChanged” event of my NumericPoint_1 widget. Here the widget specific class overwrites the global “my-theme” class and take effect.

// Fetch data cell from the Numeric point chart
var res = NumericPoint_1.getDataSource().getResultSet([{"@MeasureDimension":"[Account_BestRunJ_sold].[parentId].&[Gross_MarginActual]"}]);
var obj = res[0];

for (var item in obj)
	{
		var test = obj[item].formattedValue;
	}

//Evaluate the value and assign a CSS style
var val = ConvertUtils.stringToInteger(test);
if (val > 30000000){
		NumericPoint_1.setCssClass("my-theme-numeric-point-positive");
	} 

else if(val < 10000000){
		NumericPoint_1.setCssClass("my-theme-numeric-point-negative");
	}
else{
	NumericPoint_1.setCssClass("");
}

 

Combine Theme and CSS

As we saw at the beginning of this blog post you can style your application by applying a theme but with certain limitations. To get rid of these limitations, you can add CSS code to a theme.  The CSS code will be part of the theme.

To do this you need to enable Theme CSS and load the Application CSS

At this point you may wonder what are the priority rules between the different styles?

Here is the answer:
Priority order

  1. Widget style coming from CSS classes defined in the Application CSS
  2. Widget style coming from CSS classes defined in Theme level CSS
  3. Widget style settings
  4. Widget style settings defined in Theme

 

In Conclusion

In this blog post we learned how to create a new style for an application by using CSS code. Compare to a custom theme it brings more flexibility to your styling. The styles conform to CSS standard and are no longer limited to the existing styling properties provided by Analytics Designer. On top of that you can combine themes and CSS. Now it’s up to you to design beautiful applications !!

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jef Baeyens
      Jef Baeyens

      Can we use variables in the CSS code (so we don’t need to repeat color code for each object)?
      Any support planned for CSS preprocessors (SASS or LESS)?

      Author's profile photo Fabien AUBERT
      Fabien AUBERT
      Blog Post Author

      Hi Jef,

      No, for the moment variables and CSS preprocessors are not supported. It is not in our short-term plans but you can add this requirement on our Customer Influence website.

      Kind Regards

      Fabien

      Author's profile photo Kil Fre
      Kil Fre

      I like this little introduction.

      Is there an option for changing the color of Delta/Variance of KPIs/Numeric Measures (sap-custom-number-chart)?

      Is the CSS Class already supported?

      Author's profile photo Fabien AUBERT
      Fabien AUBERT
      Blog Post Author

      Hi Kil,

      This is not feasible at the moment. I encourage you to create an new idea on our Cutomer Influence website

      Kind Regards

      Fabien

      Author's profile photo Alexander Blasl
      Alexander Blasl

      Hi Fabien AUBERT

      thanks a lot for your post. I have a question regarding changing the filling color of a normal bar chart. So I got a bar chart for instance with orders per year (2010-2020) and I want that every bar is filled green except the last year 2020 should be red. So always the last of the bars should be colored in a specific way. Is there any chance to do that?

      Best Regards

      Alex

      Author's profile photo Fabien AUBERT
      Fabien AUBERT
      Blog Post Author

      Hi Alexander,

      No you can't. We don't support data point specific CSS

      Kind Regards

      Fabien

      Author's profile photo Sebastian Niessner
      Sebastian Niessner

      Hi Fabien AUERT

      Thanks for your manual! Is there a way to css-format Dialog boxs like these for Variable entries which open at the start of a application? I guess there must be css classes like sapMDialog... or .sapM ...

      Appreciate youre help!

      Best regards

      Sebastian

       

      Author's profile photo Fabien AUBERT
      Fabien AUBERT
      Blog Post Author

      Hi Sebastian,

      Yes you can do that. The dialog box for variables is a Popup. To see all available CSS classes, just open the Application CSS and select the "Popup" widget.

      Kind Regards

      Fabien

      Author's profile photo Sebastian Niessner
      Sebastian Niessner

      Hi Fabien

      Thank you for your answer!

      Unfortunately is the Varible Dialog not seen as a Pop up and the CSS for PopUp doesnt work on it...

      The Classes for Variable Dialog Header for example is (according to console):

      class="sapMBarChild sapMDialogTitle sapMTitle sapMTitleMaxWidth sapMTitleNoWrap sapMTitleStyleAuto sapUiSelectable"

      Best regards
      Sebastian

      Author's profile photo Rajan Sharma
      Rajan Sharma

      Thanks for the good introduction. When we select any bar in the horizontal bar chart, the selected bar color changes, can we get the CSS class of such selection and apply the same css class to another corresponding chart?