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.
- 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.
- 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=
Hi Trang
Thanks a lot for sharing this. I just followed your instructions and was able to apply data binding to my personal tile.
This is an alternative way for displaying the icon:
1.- Add this two entries to your custom app css:
.ICON_UP:after {
font-size: 14px;
font-family: 'SAP-icons';
content: "\e1e4";
speak: none;
}
.ICON_DOWN:after {
font-size: 14px;
font-family: 'SAP-icons';
content: "\e1e3";
speak: none;
}
2.- Then update your signchange script to return css class and icon at the same time:
var css = " " ;
if (value >= 0) {
css = "percChangeUp ICON_UP";
}
else {
css = "percChangeDown ICON_DOWN";
}
return css;
This approach is using images already available at Icon Explorer.
Text and icon colour will be applied at the same time.
Cheers,
Carlos Weffer
HiĀ Carlos Weffer,
I tried as u said above but its not working in Design studio 1.6 . Please suggest.
Thanks,
Arjun
Thanks Carlos ! I agree Icon Explorer is very helpful.
Dear Trang,
Blog is quite helpful. Can you please tell me which version you are using as I am unable to see any CSS Binding Options in my Text component. I am currently using DS 1.5 SP
Regards,
Jyoti
Hi Jyoti,
I am also using DS 1.5. Please refer to the second image in my post. If you Click on the CSS Class Property in the Properties Panel of your Text Component, the Gold binding icon will light up on top right corner. Please click on it and select Data Cell Binding.
Then you would need to expand the CSS Class (which is now marked as <bound>)
For extensive description of this function you can read this post:
Getting to know 1.5 : Data Binding - A feature that deserves a lot of attention
Sincerely,
Trang
Hi Trang,
I am not able to see the golden icon - I don't get it. It should be there, right?
I use DS 1.6
Best,
.CV
Hi All, I have a requirement of showing the alerts (UP and Down arrows) based on the values.I tried to implement by following one of the below post ,but was unable to get the desired result. I tried in couple of ways by binding the CSS class and also by binding the textbox and assigning the css class to it but nothing worked.I was getting the css class name as the final ouput in the textbox instead of the arrows. Please helpout. http://scn.sap.com/community/businessobjects-design-studio/blog/2015/10/29/bo-design-studio-css-tips-tricks-creating-alerts-by-data-cell-binding-in-css-class More details : I have used one of the template(KPI Dashboard) to develop the analytic. As per steps in the above link I have added the css classes in the existing CSS file(NEW_DESIGN_FONT) ICON_UP:after { font-size: 14px; font-family: 'SAP-icons'; content: "\e1e4"; speak: none; } .ICON_DOWN:after { font-size: 14px; font-family: 'SAP-icons'; content: "\e1e3"; speak: none; } .percChangeUp { font-size:16px; font-weight:bold; color:#64A007; } .percChangeUp:: after { content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHdJREFUeNpiYBh+IGUBewA+eSY8GvuB1HognYBLDSMOjSAN85GEDOck/LxAUDNQowGQOo8m/AGIFYEGfMDpbKBGBSC1H4tjBEDiQHkBrJqhEuuhCrEBkIv6cdncD1WADyQALWlA8TNUoJ6EWAwE+n/DEE2BAAEGALGdHjLKo8W4AAAAAElFTkSuQmCC); } .percChangeDown { font-size:16px; font-weight:bold; color:#C62F10; } .percChangeDown:: after { content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE5NzQ4MjhCNjNDQzExRTVBNTI0QUU2MkI2QkE1Q0QzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE5NzQ4MjhDNjNDQzExRTVBNTI0QUU2MkI2QkE1Q0QzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTk3NDgyODk2M0NDMTFFNUE1MjRBRTYyQjZCQTVDRDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTk3NDgyOEE2M0NDMTFFNUE1MjRBRTYyQjZCQTVDRDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4zQsCxAAAAmElEQVR42mL8//8/A7mAiYECQJFmFhBx3EAwAEitJ0Ffo+WF9w1gm60uftgAEiBS4wKg+gYUZ0MFFhDQeAGIC3H5uRCqABv4AMSBQEs+wAQYQVHFyMgIV3FMX0AASN0HYgE0zYZAjXCDQfowQhtqsiOacCKyRgZkE7ABoAsSgPg/EPdjkwfrw5fCgBoDcMmBvTs0kydAgAEAXPs+vc37KU4AAAAASUVORK5CYII=); } I have also created below Global Scripts var css = " " ; if (value > 0) { css = "percChangeUp"; } else { css = "percChangeDown"; } return css; var css = " " ; if (value > 0) { css = "ICON_UP"; } else { css = "ICON_DOWN"; } return css; When executed the analytic locally I was only getting the text either Perchangeup or ICON_UP but not the arrows with values . Please let me know where im going wrong. Thanks in Advance
Hi Babu
Verify you are maintaining both css class and text input bindings in your text component:
CSS Class Input Binding determines what CSS Class is applied to the component.
Text Input Binding determines what value is displayed.
Regards
Carlos
Hi Carlos, Thanks for the quick response. As I said Im working with KPI Dashboard template and trying to implement this changes and observed that even though I have added the below script in the class,was unable to see the icons. One strange thing I observed is that if I tried to use the already existing classes I was able to see the icons related to the particular class(i.e. left arrow or Right arrow),but was unable to get the Up and down arrows as per my requirement. Even i tried by changing the existing code (ICON_ARROW_LEFT and ICON_ARROW_RIGHT) to have up and down arrows (i.e. "\e1e4" and "\e1e3") its not getting reflected and showing the same left and right arrows. Please help out
Hi Babu,
Based on the issue you described, it seems to me that the GLOBAL Script you applied was for text instead of for CSS binding. Referring to Carlos comment:
If you could take a screenshot of your Text Components Properties and your CSS code maybe we can understand the problem better.
Sincerely,
Trang
Hi Babu
Please verify your ICON_UP is working when set directly (no data binding).
1 - Check the .ICON_UP entry exist in your NEW_DESIGN_FONT.css file used by standard template KPI Dashboard. Ensure the css file is in the app repository folder.
2 - Go to TILE_1_VALUE text component and add ICON_UP to the component class.
3 - Reload the App from the Menu: Application -> Reload.
Screenshots:
These steps should discard any issues with the css file set up.
Cheers,
Carlos
Thanks All for your help..it's working now ..I uploaded my CSS file to repository and it worked like a charm š
Hi Trang,
I have add css script in NEW_DESIGN_FONT.css file and did all as in your blog. But I am facing an issue. I am getting only perChangeDown format even the condition is in positive.
below is the script for formatter function
var css = "";
if(value > 100){
css ="perChangeUp";
}
else
{
css ="perChangeDown";
}
return css;
Here, its is returning perChangeDown even though the value is more than 100 and i am getting red alerts instead of green.
but if I manually add perChangeUp/perChangeDown in css class I am getting green/red alert.
Where i have gone wrong. Please help
Regards,
Mathivanan
Hi Mathivanan,
Have you checked and make sure you bind the CSS properties with the right data cell?
Your condition is > 100 so unless the number is larger than 100 it will return perChangeDown.
Regards,
Trang
I have given input binding for CSS class. For text i did not bind using data binding but for time being i have given manually 200.
So, my understanding is it will work only when I bind the data for cell using data binding? it will not work if we manually enter value for a text?
Regards,
Mathi
Hi Mathivanan, the "value" variable in your script is whichever data cell you bind with CSS Class. You can still input the text manually but the CSS class will depend on the data cell you bind in CSS Class Properties.
CSS Class Binding and Text Binding is different from each other.
Regards,
Trang
Hi Trang,
I have bind the data for both CSS class and Text and given the formatter function script with the if condition as in your blog. below is the screenshot of text box properties.
What i did is, In both CSS Class and Text I bind the same data cell and same formatter function. Is that right?
but when i execute i just get the text with green color and up arrow but not the values below is the screenshot. Where i went wrong?
Regards
Mathivanan
Hi Mathivanan,
The text itself shouldn't have a Formatter Function. It's only for the CSS.
Sincerely,
Trang
Thank you Trang. That helped!! š I just confused with you screenshot for Babu there you mentioned formatter function for text too. That made me confuse. Now I got it.
Regards,
Mathivanan
Sorry for the confusion š It's quite a lot of settings and binding to do. Good luck with your project.
Hi,
I cannot see the data cell binding in DS 1.6
What should i do ?
Best,
Christoforos
Hi Christoforos,
Great question! On DS 1.6 you need to click the "+" sign next to the CSS Class/Text property to bind data. Then you would expand the options and do the same as the instruction above.
just moved to 1.5 to get things done but thank you for the info.
Let's hope it will remain the same when upgrade to 1.6 again, so I won't need you ask you again š
I don't see all icons from ICON_EXPLORER are working in DS1.6. Ex: Circle \e266 š
Hello Experts ,
I am trying to implement the variable ICON approach as described here but my scenario is little different .
My Text Box should show Incoming Order Value Amount .Ā But it's colourĀ will be GREEN if it's Value is Less than BUDGET Amount which basically another column in the same data source .
The formatterĀ function by default comes with Two variablesĀ defined - Value and FormattedValue .
The Value variable has to somehow match with the Budget value .
Any idea how to accomplish this ?
** My design studio expertise level is - BASICĀ .Ā So consider this question as aĀ dumb one .
Thanks a lot .