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:
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
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
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.
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.
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
Hi Boujema !
Thank you for the comment ! It was funny to build as well.
Take care too, hoping to see you in MTL sometimes 🙂
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
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
in the community package it is called "Hierarchical Menu". I hope you find this one.
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?
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.
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
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.
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):
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 "\\ ".
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.
Hi,
Any way to disable hierarchy navigation in dimension filter component just like we have a this feature for cross tab.