BO Design Studio CSS Tips & Tricks: Creating Alerts by Data Cell Binding in CSS Class

Data Cell Binding is a very powerful tool in SAP BusinessObjects Design Studio 1.5 to better visualize your data ( I am following up a blog post by Jeroen van der A back in June ). One of the use cases for this function demonstrated in this post is to format your data display according to data value by changing CSS Class of the text component. Let’s look at the customized KPI tile below, where we have the following requirements:

Change in percentage > 0: text in green color with an up-arrow suffix.

Change in percentage < 0: text in red color with a down-arrow suffix.

Such color-based alert will give users instant insight about the business performance. This styling can be achieved in two simple steps.

1. Define your styling properties in CSS file

I have two separate CSS Classes to define the styling for negative and positive values, respectively percChangeDown and percChangeUp.

Here I have define basic styling properties for color, font-size and font-weight for each class. To display picture of an arrow after the text, I use pseudo-element selector ::after and ::before to add an arrow with property content. The images used in this example,  and , are converted to Image URI (You can find online converter here). Note that when creating the images of these arrows, make sure to match their color to the text color for better visual presentation.

Upload your CSS file.

1. Bind CSS Class Property with your data value

In the Property Panel of your Text Box displaying percentage change, Click on CSS Class and the Binding Icon on the top right corner, select Data Cell Binding.

Next, Expand CSS Binding Options by Clicking on the before CSS Class 

Select Data Source and Data Cell that you want to base your styling on. Then Click OK.

Add a New Function in the Formatter Function Option. Note that a Global Script Object must be created first. Here I have created a function call GLOBAL_SCRIPT_1.signChange

Here is the scripts for this function. It will return “percChangeUp” when the value is positive and “percChanegDown” when the value is negative for CSS Class Property of this Text Component.

Once you have created this function it will show up under Technical Components. Just click on it to edit.

Please note that the data will not be formatted in your Design Studio workplace. The formatting will be applied when you execute the application.

Hope you find the simple trick above helpful for your dashboard project!

P.S: Here are the images URI for the arrows above if you would want to use them for your dashboards:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHdJREFUeNpiYBh+IGUBewA+eSY8GvuB1HognYBLDSMOjSAN85GEDOck/LxAUDNQowGQOo8m/AGIFYEGfMDpbKBGBSC1H4tjBEDiQHkBrJqhEuuhCrEBkIv6cdncD1WADyQALWlA8TNUoJ6EWAwE+n/DEE2BAAEGALGdHjLKo8W4AAAAAElFTkSuQmCC

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE5NzQ4MjhCNjNDQzExRTVBNTI0QUU2MkI2QkE1Q0QzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE5NzQ4MjhDNjNDQzExRTVBNTI0QUU2MkI2QkE1Q0QzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTk3NDgyODk2M0NDMTFFNUE1MjRBRTYyQjZCQTVDRDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTk3NDgyOEE2M0NDMTFFNUE1MjRBRTYyQjZCQTVDRDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4zQsCxAAAAmElEQVR42mL8//8/A7mAiYECQJFmFhBx3EAwAEitJ0Ffo+WF9w1gm60uftgAEiBS4wKg+gYUZ0MFFhDQeAGIC3H5uRCqABv4AMSBQEs+wAQYQVHFyMgIV3FMX0AASN0HYgE0zYZAjXCDQfowQhtqsiOacCKyRgZkE7ABoAsSgPg/EPdjkwfrw5fCgBoDcMmBvTs0kydAgAEAXPs+vc37KU4AAAAASUVORK5CYII=