Disclaimer:

This component uses hierarchies from BW. It may be adapted to be connected to Hana or Netweaver, but these source system have not been tested.

Introduction

Hello everyone,

I would like to share a SDK component for Design Studio (1.3/1.4) that I developed.

It has been created with several purposes in mind:

• Ramp up on the SDK
• Replicate a neat feature inspired from the different websites
• Add a creative approach to handle hierarchies navigation in Design Studio

Component overview and explanations

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

With this article, I propose to use a easier way to explore and select the nodes, by using a cascading dropdown menus, as a hierarchy is already represented:

A preview can be found here:

For the customer, it is an easier way to navigate through the hierarchy without losing context. The development is a proof of concept and it could be enhanced.

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

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

I have been inspired by the content found on the SCN and the SDK extensions developed by the SCN contributors (List of Design Studio SDK Components), especially the ones from Michael Howles and Karol Kalisz.

The code can be viewed here (franckblais/com.sample.dropdownmenumultiv1 · GitHub) and a deployable archive can be downloaded from here (https://github.com/franckblais/com.sample.dropdownmenumultiv1/raw/master/feature/DDMLV1_Extension.zip).

Thank you for reading this article. Do not hesitate to post questions or remarks.

As you can see, this component is usable and can be improved.

Thank you 🙂

How to use it

Step 1

If you want to use the main query to fill the dropdown menu list, please note that only the initially displayed nodes in the query will be used in the menu.

Therefore, if the hierarchy is expanded (?)to the level 2, you will not be able to see the children beyond this level.

For my proof of concept, I preferred to use a query on the Masterdata itself, with only the characteristic and its hierarchy, without any key figures (The content of the hierarchy is extracted from the dimensions members, not from the retrieved content) If you change the explanded levels by default to the maximum, the entire hierarchy will be displayed in the dropdown menu.

Don’t forget to change the members display also to “Key + Text”.

Step 2

Select the characteristic with the hierarchy in the Additional Properties.

Please note that all the characteristics, and the key figures, are displayed even if they are not usable.

Step 3

Include a CSS template and set the options.

CSS template

The menu is entirely displayed as a cascading dropdown menu with CSS.

You can include use my CSS in your Design studio application to have the same behavior and style as me:

https://rawgit.com/franckblais/com.sample.dropdownmenumultiv1/master/res/js/dropv1.css

The dropdown menu is included in a NAV tag with the ID “#primary_nav_wrap”.

A lot of resources can be found on internet for different dropdown menu CSS styles.

Use a single root node

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

With single node	Without single node

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

Add a “reset” button at the left or right

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.

On Click event

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

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

About the author

I am a SAP BI architect and technical consultant, working for Beyond Technologies in Montreal. I have been working mainly on SAP BW, Hana, ABAP and lately on BO.

LinkedIn profile: Franck BLAIS | LinkedIn