Skip to Content
Author's profile photo Former Member

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

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:

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 (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
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

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Karol Kalisz
      Karol Kalisz

      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?

      Karol

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Karol,

      I would be delighted to be a part of the community. What do I need to do/change to help you integrate it ? 🙂

      Thank you.

      Author's profile photo Michael Howles
      Michael Howles

      Karol Kalisz has already asked but consider my post the same request 🙂

      Karol has started an initial technical document here about how we've got it set up in Github currently:

      SDK Development Community Git Repository (sdkpackage)

      Perhaps start here, and let us know if you have questions and after, we can get you added once you are comfortable.

      Author's profile photo Boujema Bouhazama
      Boujema Bouhazama

      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

      Boujema

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Boujema !

      Thank you for the comment ! It was funny to build as well.

      Take care too, hoping to see you in MTL sometimes 🙂

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi all,

      since yesterday this component is available in the community package.

      Thanks Franck for sharing the code and including it into the community SDK package. Now you are the 3rd official member 😉

      for download, follow the link (SCN Design Studio SDK Development Community)

      Karol

      Author's profile photo Evelyn Wilknitz
      Evelyn Wilknitz

      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

      Author's profile photo Karol Kalisz
      Karol Kalisz

      in the community package it is called "Hierarchical Menu". I hope you find this one.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Evelyn Wilknitz
      Evelyn Wilknitz

      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?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Evelyn,

      No, it is working fine ... I am not sure though I understood your problem.

      Are you saying that you cannot click on a leaf ? Maybe that's because of the CSS ?

      In the next version, I'll propose CSS styles but none will be embedded, so that the developer will have the freedom to configure the menu the way he wants.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Oh, by the way, don't hesitate to post an issue on our Github directly. I'll have a look if you want.

      Link: Issues · org-scn-design-studio-community/sdkpackage · GitHub

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello,

      Please find here a blog entry describing the new version:

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

      Evelyn, let me know if you encounter any issue using it. I'll have a look as soon as possible.

      Thank you.

      Author's profile photo Evelyn Wilknitz
      Evelyn Wilknitz

      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?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Evelyn Wilknitz
      Evelyn Wilknitz

      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

      b) text node: HIERARCHY_NODE/0HIER_NODE/ALLIANZ WORLD BD

      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 "\\ ".

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Mihir L Kiri
      Mihir L Kiri

      Hi,

      Any way to disable hierarchy navigation in dimension filter component just like we have a this feature for cross tab.