Design Studio: Hierarchical menu for BW Version 2 (SDK Community Package)

[Former Member]

Disclaimer:

This component uses hierarchies from BW. It could be adapted to connect to Hana or a Universe, but these hierarchies have not been tested.

The component has been tested, but you may encounter some bugs. For either bugs or enhancement request, do not hesitate to post an "issue" on our GitHub.

Introduction

If you have read the SCN forum the past year or are interested in SDK extensions, you have probably noticed the SDK Community package initiative, and maybe also a "Multi level Dropdown Menu" article.

This extension has been renamed "Hierarchical menu" and it renders a BW hierarchy into a dropdown menu (similar to one on websites).

This new version includes several bug fixes, and new features that are explained below.

Component overview and explanations

The most common way of drilling down in a hierarchy with Design studio is to use a dimension filter pane, as shown below:

With this article, I propose to use a convenient way to explore a hierarchy, through cascading dropdown menus, similar to a hierarchical structure:

A preview can be found here:

For the end user, it is an easier way to navigate through the hierarchy without losing context.

This dropdown menu has been developed using jQuery, HTML Unordered lists (UL / LI) and CSS to handle the display.

The CSS has been adapted from Simple Pure CSS Drop Down Menu.

You can find the SDK Community package here and the code of the extension here.

You can also import this DS application (made with 1.5 SP02) to test the component. You will only need to configure the 2 datasources:

• DS_MENU: used by the hierarchical menu. Add your hierarchy and some key figures.
• DS_DATA: Actual data, it will be filtered out by the hierarchical menu. Use the same characteristic as in DS_MENU, with the same hierarchy, even if it not displayed.

UPDATE: this component has been improved again for version 1.6. You can find the blog here.

Recommendations

• Use a specific (separated) datasource with the expanded hierarchy and some key figures. If you share a Crosstab datasource with folded nodes, the component will be unable to read the full hierarchy structure
• The query structure should be as follow:
  • Rows: one characteristic with hierarchy, selected and displayed
  • Columns: only key figures
    
• This component uses the datasource data, and some dimension informations
• The hierarchy needs to be fully expanded to be completely read (or the component will miss the collapsed nodes and their leaves ...).
• The datasource can be plugged directly on the masterdata (but you won't have key figures most of the time).
• NO CSS is applied to the generated HTML out of the box. I'll give you some on this page (CSS section at the end). The reason is simple: you can configure display of the component exactly as desired without overriding automatically generated classes.

Possible enhancements

• Possibility to use only one datasource without the current limitations
• Label selection is a bit messy
• Please, propose some !

Features

Add a Root Node

By default, all the first nodes of the hierarchy will be displayed:

Mode	Effect
Without single Node
With Single node

By changing these parameters, you can add a single root node, and select its name:

Also, the event "On Reset" (Script) will be triggered if you click on the newly created Single Root Node.

Methods:

• Boolean isSingleNodeActivated(): return true / false if the Single root node is activated
• void setAddSingleRootNode(boolean activation): activate / deactivate Single Root Node
• string getSingleRootNodeName(): return the text of the Single root node
• void setSingleRootNodeName(string newText): set the text of the Single root node

Reset Button

You can add a Reset button (X) at the left or right of the root nodes to cancel the selection.

The event "On Reset" (Script) will be triggered. Please note that selections on the menu will be removed, even if you have not attached any script. Note that if you have a single root node, clicking on it will have exactly the same effect.

Methods:

• string getResetButton(): return the display mode of the reset button (No, Left, Right)
• void setResetButton(string mode): set the new display mode

On Click event

When you click on an item in the menu, the node key will be retrieved and the OnClick event will be triggered.

You can call the method .getSelectedElemKey() on the component to retrieve the selected key. The method .getSelectedElemText() will give you the text instead. For example:

Some classes will be applied on the html menu on the selection nodes, and its parents:

• li.scn-hier-ddm-sel-node
• li.scn-hier-ddm-sel-parents

Methods:

• string getSelectedElemKey(): returns the hierarchy internal key of the selected node
• string getSelectedElemText(): returns the hierarchy internal text of the selected node

LabelDisplay

You can choose from 3 options:

To understand this setting, you should be aquainted with how the data from BW.

For instance, each node has three attributes:

• The Node Key: Internal hierarchy representation, independent from the characteristic "display as" parameter. For Canada: HIERARCHY_NODE/0D_NW_CNTRY/CA
• The Key: basically the infoobject key, like CA for Canada
• The Text: "Canada"

Pratical Example:

I chose Text+Key label display on the Partner in the query. In DS, both key and text are concatenated as "SAP|1/10000000".

Here, the Text is the Left part and the Key the Right Part.

Depending on the requirement, choose between the 3 available values. Let me know If I can make it more user friendly (maybe with a formatting function ?).

You can access the selected Key and Text with methods .getSelectedKey and .getSelectedText.

This is not the best way to handle the display. It would require some enhancements (1. get the display mode from the char 2. give you the choice to display text or key, but I really doubt SAP will give us this information in a near future).

Methods:

• String getLabelDisplay(): Get the selected display type
• void setLabelDisplay(String value): change the label display mode (NodeKey, Left, Right)

Measure display

One of the new addition is the possibility to display a mesure along the node:

This key figure / measure must be present in the binded query and can be selected either by a script or at the design time in the APS.

Methods:

• boolean isMeasureDisplayActivated(): return true/false if the measure display feature is activated
• void activateDisplayMeasure(boolean activationStatus): activate / deactivate the feature
• string getSelMeasure(): returns the technical name of the displayed key figure
• void setSelMeasure(string keyFigureTechName): set the new key figure to display

Conditional CSS class

If you use a measure, you can dynamically apply CSS classes to each node depending on its value.

Provide a JSON Table with the class to use:

CSS
Result:

The Json table must have the following structure, and can have as many cssClass iterations. The value of cssClass will be applied dynamically to the node menu LI item.

LOW represent the first bound and HIGH the second bound. Both are considered with a superior/lower or equal to its value.

[

  {"cssClass":"DD_RED", "low":"0", "high":"10"},

  {"cssClass":"DD_YEL", "low":"10", "high":"40"},

  {"cssClass":"DD_GREEN","low":"40", "high":"100"}

]

The measure needs to be displayed to make it work, but you could easily hide it with CSS if necessary.

Methods:

• String getColorClass(): get the JSON table
• void setColorClass(String value): set a new JSON table for the color class

"Not assigned Node" text replacement

If you allowed your hierarchy to display the not assigned with the option uncheck below, you'll have a generated text which is pretty unappealing:

=

If you want to change the text, you can use one of the extension feature in the APS, or change it dynamically with the method. It will replace "Not Assigned XXX" by the value:

Methods:

• String getNotAssignedText(): return the name of the Not assigned node in the APS
• void setNotAssignedText(String value): set a new text for the not assigned node

HTML Element and CSS composition

Sample CSS styles

As explained before, the list will be rendered as a pain UL / LI HTML list and you'll need to apply a CSS stylesheet. Many display options can be chosen, and you can find a lot of inspiration on internet (some website propose prebuild CSS stylesheets).

Until now, all of the screenshots of this article were based on the provided CSS below.

Download the CSS file, and import it into DS application as Custom CSS (on the Application element). If you already have one, copy/paste the content into your CSS file. It should not break anything as all the classes are prefixed by scn-hier-ddm-.

Name	Preview	CSS file
Classic Hierarchical dropdown menu		Download

I will add more in the future, and do not hesitate to share yours in the comments if you want. I will post them as well :smile:

HTML

The menu is composed of the elements below. The ones in brackets are optional. Each List (UL) must have one node (LI) and the leaves cannot have other Lists (UL) underneath.

• NAV (Primary container)
  • UL (Root list declaration)
    • LI (Items = Nodes or Leafs from the hierarchy)
      • DIV (Container for texts)
        • Span Text
        • [Span Mesure]
      • [UL] (Only present on a node, contains the childs)
        • LI ...
        • [LI]
    • [LI (node, same pattern as before)]
    • [LI]

CSS classes

Each HTML elements is associated with some CSS classes to ease the work of the developer. The table below contains all of them with some explanations.

HTML Elements	Associated CSS Classes	Description
NAV	.scn-hier-ddm-disp-has-mesure	Applied to the primary container if the menu displays measures. This class and the one below are exclusive.
NAV	.scn-hier-ddm-disp-no-mesure	If you do not display a measure, this class will be applied instead, meaning the measure have not been generated. It is "important" to distinguish these 2 states if you want, for example, to display an arrow at the right of the nodes
UL	.scn-hier-ddm-root-list	Corresponds to the first list. Basically, only the first UL has it.
UL	.scn-hier-ddm-list	Corresponds to underneath lists, inside a node
LI	.scn-hier-ddm-root-node	Applied to each items in the root list (if you want to have a slightly different display from the actual nodes)
LI	.scn-hier-ddm-node	Applied to each items underneath, basically to the nodes of the hierarchy
LI	.scn-hier-ddm-has-sub	Applied to nodes of the hierarchy containing children. If an item do not have this class, it's a leaf instead
LI	.scn-hier-ddm-sel-parents	Applied to the parents of the selected node
LI	.scn-hier-ddm-sel-node	Applied to the selected node
LI	.scn-hier-ddm-reset-button	Applied to the reset button, if used
Span	.scn-hier-ddm-text	Corresponds to the displayed text of the node
Span	.scn-hier-ddm-mesure	If you display a mesure, the generated span will have this class