Dynamically expand and collapse hierarchies using scripting within Scorecard Component – SAP Business Objects Design Studio

In my previous blog, I showcased how you can use Crosstab to control the hierarchy

interaction within a scorecard. In this blog we will create the hierarchy expand and collapse

functionality directly within scorecard using scripting. As there is no in-built functionality for

hierarchy, we will have to achieve this via scripting.

We follow pretty much the same process as detailed in the previous blog, but we will

enhance our scorecard by adding additional columns for which we will write a code snippet.

I am focusing on the Delta.

Defining the datasource with a hierarchy:

1. Create a blank SAP Design Studio application.
2. Assign a datasource and configure the initial view to have a hierarchy. In my scenario

       I am using a hierarchy on Country dimension, expanded to level 2.

Assigning the datasource to a Scorecard Component:

1. Once you are done configuring the rows and columns, go ahead and press OK

   2. Now we start building and customizing our scorecard component. Drag and drop

       the scorecard component from the Analytic Component panel on the left.

Defining the row scope

1. Assign the datasource and define the row scope up to country dimension and

        press “Generate Initial Scorecard”.

    2.  Let’s start customizing the scorecard columns.

Customizing the scorecard columns and properties

Adding New Columns

1. Let’s start by adding 2 new columns before COLUMN_1: “HIER_EXPAND” and

        “HIER_COLLAPSE”.

   2.  For “HIER_COLLAPSE”, we make the following changes to its properties:

Bind the Icon: Country Dimension

Member Display: Member Node State

Display Mode: set it to “Icon Only”

Bind the Show Icon Property: Country Dimension

Member Display: Member Node State

Show Text is selected.

1. Now we add conditional formatting to Icon property:

        We are assigning icons from SAP UI5 library for “EXPANDED” node state and

         “COLLAPSED” node state. Therefore, the configuration for setting the conditional

           formatting (invoked by pressing the  icon next to the Dimension Member Content

            text box. To add additional conditions, use the +” icon.

       Add 2 conditions, and map it to the icons from SAP UI5 library as shown in the figure below:

Next in the Column Properties, we set the Column width in Pixels to a small value

like 26 or smaller, so that expand and collapse icons are not too far away from text.

  b.  This is where we make the distinction of setting a default conditional formatted value

       for “HIER_COLLAPSE” column. Add a value “EXPANDED” and check it. Uncheck

       the checkbox for default.

   3. Now we set the properties of “HIER_EXPAND”. Everything remains the same

       as what we did for “HIER_COLLAPSE”, except for setting the conditional formatting

        defaulted value to “COLLAPSED”.

I am highlighting the piece where you make the distinction between Collapsed node and

Expanded node. The screenshot below showing the default condition format set to “COLLAPSED”.

       Next in the Column Properties, we set the Column width in Pixels to a small

       value like 26 or smaller, so that expand and collapse icons are not too far

       away from text.

Customizing the Hierarchy Column

1. Click on Column 1 and rename it to “HIER_COLUMN”, and unbind the header text by

       clicking on the triangle below the Header text and choosing “Reset to Default”.

   2.  Key in custom text and name the Header as “Country Hierarchy” and press enter.

        The header text in scorecard is updated accordingly.

Configuring Country Hierarchy column:

1. Select Country Hierarchy, and set the properties as follows. Please note there are

        no conditional formatting required for this column as we have already set them for the previous 2 columns.

   2.  Finally, we now switch to “Cell Layout” to configure the padding property.

        This is required to indent the different levels of hierarchy nodes display.

Cell Padding will take care of the top, right, bottom and left margins for content alignment

1. Data binding for country dimension needs to be defined.
2. Member display needs to be set to “Member Level”, and we set a default value

       as Conditional Format to “10px 10px 10px {value}0px”. Please notice that we have

       a {value} in braces, which will be replaced by the value fetched by the “Member Level” i.e.

       if we have 3 levels in our hierarchy and we select level 2, then the {value} will be replaced

       by 2. As we have {value}0px, the result will be 20px. I hope that explanation helps.

Code snippet for enabling Hierarchy Expand and Collapse

1. Select the scorecard component and in the property sheet, launch the script editor for “On Select” event:

  2. The script for this event is as follows:

//Define variable for selecting the column id and user selections.

var selColumn = SCORECARD_2.getSelectedColumnId();

var selection = SCORECARD_2.getSelection();

var hierKey=“”;

//Loop to access the hierarchy node value based on the key (Z_COUNTRY is the dimension)

1. selection.forEach(function(value, key) {

if(key==“Z_COUNTRY”){

hierKey = value[0];

}

});

//Expand and collapse the nodes based on what the user clicks

if(selColumn==“HIER_EXPAND”){

      DS_2.expandNode(“Z_COUNTRY”, hierKey);

}

if(selColumn==“HIER_COLLAPSE”){

      DS_2.collapseNode(“Z_COUNTRY”, hierKey);

}

Save and launch the Application

Save the application and launch it in local mode:

You can enhance the code to pass the selected values between components. I hope you find

this blog useful. I would also like to thank SAP Design Studio product team for their

valuable inputs.