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.
I am using a hierarchy on Country dimension, expanded to level 2.
2. Now we start building and customizing our scorecard component. Drag and drop
the scorecard component from the Analytic Component panel on the left.
press “Generate Initial Scorecard”.
2. Let’s start customizing the scorecard columns.
“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.
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.
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.
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
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.
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)
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 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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
13 | |
10 | |
10 | |
7 | |
6 | |
5 | |
5 | |
5 | |
4 | |
4 |