Skip to Content

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.

a.PNG

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”.

c.PNG

    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”.



fig_1.PNG


   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.

fig_2.PNG

  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.fig_1a.PNG

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

fig_2a.PNG

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.

fig_2c.PNG

  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.

fig_2b.PNG

   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”.

fig_3.PNG

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”.

fig_3a.PNG

       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.

fig_3b.PNG

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”.

fig_4.PNG

   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.

fig_5.PNG

   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.

fig_5a.PNG

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.

fig_5b.PNG

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:

fig_6.PNG

  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:

fig_7.PNG

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.

To report this post you need to login first.

5 Comments

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

  1. Ragesh Kurup

    Hi Ravin,

    I am looking for the similar hierarchical view. I tried to replicate the above instructions but was not able to get the final output working (it shows the simple score card with 3 additional columns and no image for expand / collapse with repeated Level 1 text). Does this require a database which supports hierarchy?

    I don’t think my database has hierarchical nodes, is it possible to create a table in Sybase IQ with hierarchical nodes?

    (0) 
    1. Ravin Angara Post author

      Hi Ragesh,

      I am using SAP BW as a datasource which has an attribute hierarchy. Yes, you will require a DB which supports hierarchy. I have not worked on Sybase IQ, so I am not sure.

      Best,

      Ravin

      (0) 
  2. Kirill Bondarenko

    Hi Ravin,

    Thank you for your post.

    Have you any experience with getting a node state?

    I mean that every node has a state ( EXPANDED / COLLAPSED )

    I want to get data about state someway likes this

    var cell = DS_2.getDataAsString( “DAJKZVLWDW4O3PDK5CMQ0E044”, {“ZTRMANUF”:”HIERARCHY_NODE/ZTRMANUF/PR0206″});

    regarding settings for scoretab i need to use “/nodeState” somehow.

    Do you have any experiense in using “getDataAsString” for getting directly node state?

    Rgds,

    Kirill

    (0) 

Leave a Reply