Skip to Content

Design Studio 1.3/1.4 SDK: Multi level drop down menu from a hierarchy


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.


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:

Screen Shot 2014-12-08 at 3.43.07 PM.png

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:

Screen Shot 2014-12-08 at 3.49.41 PM.png

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 (

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:

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
Screen Shot 2014-12-08 at 4.28.36 PM.png Screen Shot 2014-12-08 at 4.30.44 PM.png

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

Screen Shot 2014-12-08 at 4.22.07 PM.png

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.

Screen Shot 2014-12-08 at 4.34.58 PM.pngScreen Shot 2014-12-08 at 4.22.20 PM.png

The event”On Reset” (Script) will be triggered.

Screen Shot 2014-12-08 at 4.36.57 PM.png

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:

Screen Shot 2014-12-08 at 4.40.13 PM.png

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

You must be Logged on to comment or reply to a post.
  • Hi Franck,

    this is looking very nice - as you probably have seen - we try to create SDK development community (SCN Design Studio SDK Development Community) to centralize all components which are offered for free use.

    would you like to participate in the community - then we could include your component into the same package and you will be defined as author and contributor into the community?


  • Hi Franck well  done ! this blog is amazing !

    I am sure this will help many others and bring added value in an innovative as well as creative way to handle hierarchies.

    Take care


  • Hi Franck,

    this component is exactly what we are looking for. But I don't find it in the community package (stable). So I used the link to your deployable archive above.

    My datasource is a query with infoobject 0CS_UNIT as dataprovider. Infoobject has the hierarcy but no attributes. Your Additional Properties dialogue doesn't Show any Dropdown source char in the dropdownlist. So I entered "0CS_UNIT" manually. I used your css as it is with class #primary_nav_wrap.

    When I run the application I don't see any Dropdown List, just the crosstab with data below.

    Any idea?

    Thanks, Evelyn

    • Hello Evelyn,

      Glade you found it !

      Please note this component has style some small issues. For instance, first, add the component to the application, save it and close/reopen it. You should be able to see the component especially if you have linked a DS to it.

      I recommand to use a separate datasource on the targeted infoobject, with its own bex query with the active hierarchy. Unfortunately, the current behavior takes only the availables nodes from your transactionnal data ... For instance, after the filter, if the component and the crosstab are linked to the same datasource, you hierarchical menu will be filtered as well (maybe by changing the masterdata access you could fix that).

      I am planning to work on it and fix the differents issues. Also, I'll post a new blog entry on the new version and its improvements.

      Stay tuned 🙂

      Have a good day.

      • Hi Franck,

        your hints solved my issue and I got it to run 🙂 .

        I'm looking forward to your further improvements!

        Only thing you should also check is: I can not pick the last entry on lowest hierarchy level. The mouse just does not get to that position.

        Do you have the same issue at your end?

    • Great news, Franck!

      I'll have a look at it next week after my return.

      Currently I use your component separately (not with community package) and got it to run without issues. Just struggling a bit with selected text nodes which include spaces in our hierarchies.

      Now I'm going to switch to SDK Community Package in order to test your new version. Does it run on DS 1.4 as well?

      • Yes it should, from what I know, although I am using 1.5 since several months now.

        What is your issue with the spaces ? I'll try your usecase to see what happens.

        • Our BD hierarchy consists of characteristics nodes (0CS_GROUP) + text nodes (0HIER_NODE):

          BD Hierarchy.PNG

          With your dropdown component I can select both without issues. But the result of method GetClickedElemKey() is different:

          a) characteristics node: HIERARCHY_NODE/0CS_GROUP/AZBD061


          To filter DS on it I need:

          a) DS_1.setFilterExt("0CS_GROUP", "+AZ/BD061(0CS_GROUP)")

          b) DS_1.setFilterExt("0CS_GROUP", "+ALLIANZ\\ WORLD\\ BD\\ (Text\\ Node)

          To convert the result string into the format for setFilterExt I use Convert.subString().

          But for b) I also have to replace spaces with "\\ ".

          BD Hierarchy.PNG
          • Screen Shot 2015-11-04 at 11.11.34 AM.png

            I created a node with space and it was working with this version.

            Note also our package v2 is for 1.5. Version 1 for 1.4 is not "supported" and the new devs are not available in it.

            You probably should do exactly as you did for now: using the extension standalone, or maybe download a copy of the Package V1 and copy/paste my new code. Running the build script should do the trick after that.

            Screen Shot 2015-11-04 at 11.11.34 AM.png