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=

To report this post you need to login first.

23 Comments

You must be Logged on to comment or reply to a post.

  1. Carlos Weffer

    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.

    Tiles1.png

    Cheers,

    Carlos Weffer

    (0) 
  2. Jyoti Jain

    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

    (0) 
    1. Trang Nguyen Post author

      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

      (0) 
  3. babu k

    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

    (0) 
    1. Carlos Weffer

      Hi Babu

      Verify you are maintaining both css class and text input bindings in your text component:

      DS_Bindings.png

      CSS Class Input Binding determines what CSS Class is applied to the component.

      Text Input Binding determines what value is displayed.

      Regards

      Carlos

      (0) 
      1. babu k

        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

        (0) 
        1. Trang Nguyen Post author

          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

          (0) 
        2. Carlos Weffer

          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:

          Babu.jpg

          These steps should discard any issues with the css file set up.

          Cheers,

          Carlos

          (0) 
  4. Mathivanan M

    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

    (0) 
    1. Trang Nguyen Post author

      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

      (0) 
      1. Mathivanan M

        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

        (0) 
        1. Trang Nguyen Post author

          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

          (0) 
          1. Mathivanan M

            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.

            /wp-content/uploads/2015/12/2015_12_15_192755_851906.png

            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?

            /wp-content/uploads/2015/12/2015_12_15_193026_851907.png

            Regards

            Mathivanan

            (0) 
              1. Mathivanan M

                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

                (0) 
    1. Trang Nguyen Post author

      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.

      (0) 

Leave a Reply