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

[Martin-Pankraz]

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.

Yours

Martin