CSS Design: Enhance Analytics App Look & Feel

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

Widget style coming from CSS classes defined in the Application CSS
Widget style coming from CSS classes defined in Theme level CSS
Widget style settings
Widget style settings defined in Theme

Rating: 0 / 5 (0 votes)

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