Skip to Content

Design Studio SDK Hierarchy Selector Component – Go catch ‘em all

Dear all,

Some time ago I started to make an effort to replace the SAP standard prompt and the dialog based analytics components to enable the Design Studio users to interact with the dashboard in a more integrated way. The release of the sap.m.MultiComboBox as a Design Studio SDK component was a result of that. So using the standard Datefield, the Dropdown and my implementation of the MultiComboBox already covered a lot of common cases working with reporting variables or filters through Design Studio Scripting.

Today I am going to do the last mile to close the remaining gap – of course, hierarchies were missing. Therefore the next thing you can do after downloading this new component is switch of the standard prompt for good. It feels good, doesn’t it?

There are some approaches mentioned on SCN regarding hierarchies which have slightly different purposes and degrees of maturity. One of the most useful ones is implemented by Franck, a colleague of mine from the SCN community SDK team. Find his SCN blog post here. Other options are:

  • A D3.js library based approach also published on the SCN community SDK repository by my colleague Manfred
  • Another one using the standard component Scorecard only
  • And there is also a UI5 based implementation from 2014
  • You could also play around with our SCN community version of the Tree component or SAP’s standard implementation of the tree

All of the above mentioned approaches lack completeness in terms of interaction capabilities when it comes to replacing the standard prompt and providing an alternative way of passing values to the underlying reporting layer in an easy and error prone way.

What you get

A UI5 implementation that satisfies SAP design guide lines and offers an easy to use API. The component requires the hierarchy to have one root node (Cash Flow Statement in example below)


     Fig.1: Screenshot of hierarchy component mixed selection

In contrast to the standard prompt your hierarchical selections are propagated to parent nodes in a “mixed” state so that you can tell if lower levels or tree leafs are selected even if they are collapsed.


     Fig.2: Settings of hierarchy selector

Just assign a data source and locate the key of the dimension which contains the hierarchy, for example using the initial view or BEx query Designer etc. and you are good to go.

On top of that there are some customizing options to influence display behavior like the navigation mode. Using that you get to decide if you favor a paginator over a scrollbar for instance.

This component consumes BW hierarchies and provides methods to use your selections as variable input (setVariableValue*) or for filtering (setFilterExt). In addition to that you don’t need to worry about any string operations to match SAP’s hierarchy selection syntax. The provided ZTL methods take care of that for you. Find some more details below.

For variable input you should call getSelectionKeysBexReady which will return you a string which can be fed into the Design Studio scripting methods setVariableValue and setVariableValueExt right away. The same is true for filtering. You can call getFilterExtBexReady to retrieve a string which can be used with the scripting method setFilterExt immediately. BW hierarchy text nodes will be represented like “+OPERATIVE CASH FLOWS(Text Node)” to match SAP’s syntax requirements.

Untold Secret

Apart from that I am also going to share a secret with you that Reiner Hille-Döring let me in on which is not yet documented. The ResultSet passed to the SDK component is configured to contain only unique keys by default. Your hierarchy however might allow for duplicates or even linked nodes. To reflect that, you will need to add the following option to your property on the contribution.xml file

     <option name=”repeatHierarchyNodes” value=”true”/>.

That option is functional as of release 1.6 SP2. Looping back to the title of this blog post, this is the way to get them all!

Final Words

Now that we are finally able to replace the standard prompt I see a bright future for web applications not only dashboards developed on top of Design Studio. Especially for non-technical users, who don’t understand technical names and data sources, the app acceptance can be increased and rollout hurdles lightened.

You can get the component by installing the latest ConVista SDK repository package.

As usual the code is published open-source on GitHub:

ConVista-ds-sdk-visualizations by MartinPankraz

Free to leave comments and ask lots of follow up questions.



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


      Since my component is databound I would expect it to work with with any SAP datasource, that includes HANA, out of the box. Conent-wise hierarchies should not be a problem too. I haven't tested though. Let me know if you find anything.


      Kind regards


      • Yes, I found that I needed to use the name of the field, not the name of the hierarchy as the key for it to populate. I had another issue with it where it was showing the key instead of text for some of them, but that's likely related to the hierarchy having duplicate nodes.

  • Very nice work - quick question. Is there a way to have the initial state of the control "expanded"? I am using DS1.6 SP3, SAPUI5M library. The control seems to load expanded, then automatically collapses.


    Thanks in advance...


    • Hi Dwayne,


      Thanks for reaching out. The component is supposed to be a filter component and therefore collapses to save space if not needed. If there were a hard requirement I might think of making this customizable.


      Kind regards


    • Hi Angelo,

      Please post a question for this kind of requests instead of putting a comment here. This seems somewhat related but not entirely.

      For my SDK component, mentioned in this blog, I am using the SAPUI5 component "sap.ui.table.TreeTable". So it would indeed be possible to create a SDK component to support hierarchies with fully blown tables.

      So far this is not implemented with our community SDK version of the UI5 table (sap.ui.table.Table).

      Kind regards


      • Hi Martin,


        Thank you for your answer.

        I'm going to research other ideas because I have requirement to have a responsive table option using BW hierarchies and also use the context menu, which I believe is a standard crosstab feature.



        • Hi Angelo,

          You are welcome. The UI5 tree table would solve your first requirement but you will have trouble with the context menu. That menu covers SAP specific BEx features, which are not exposed like that to UI5.

          However SAP says they are enhancing the standard crosstabe in terms of responsiveness in the near future because customers often complain about that. There is a chance this is already in the next release of Lumira Designer 2.*.

          Kind regards


  • Hi Martin,

    When happening is if I use 'getSelectionKeysBexReady(true)' method though I am selecting a Hierarchy Node it is listing out everything under that node including Node it self.
    For example if Hierarchy is like
         -> C
               -> D
                  -> E
               -> F
         -> G
         -> H
         -> I
    and user selects C then  getSelectionKeysBexReady(true)  method will list our C,D,E,F.
    Is there any possible way to get just Node Name, in above case just C.
    This is considering we will passing these to OpenDocument URL so if it is listing all nodes then URL length will keep on increasing.
    Also is it possible to 'Expand first Level on Start'. I could see this property in GIT but somehow it is not appearing in Lumira Designer.
    Swapnil Kulkarni