Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 

There is already Design Studio SDK: (dynamic) Accordion Component, there is a Design Studio SDK: Tree Component. And now in SAPUI5 version 2.34 there is a new component for navigation purposes.. SAPUI5 Explored Side Navigation.

Since today you can use this control in Design Studio.

The Use Case

you want to create a side navigation which is collapsable (only icons are visible) and expandable (then the texts are visible).

The component has 2 sections - one on the top and second (fixed) on bottom side.

It looks like this (expanded and collapsed):

Functions are quite simple.

1. You can collapse and expand (property and script)

2. you can define items - in 2 levels (the original component has undefined number of levels, but in design studio we have only 2)

3. you can also define fixed items (those bound from bottom)

In Runtime

when collapsed, you see only icons and the menu is a popup.

When expanded, it looks like a accordion or at least very similar.


to avoid collisions in keys, there are 2 events with example script.


APPLICATION.log("Sel: " + SIDENAVIGATION_1.getItemSelectedKey());


APPLICATION.log("Sel: " + SIDENAVIGATION_1.getFixedItemSelectedKey());

with this you can react on the selection.

Events & Spec

The button has selection event, press event and in the specification you can also use multi select. If you use single select, you can use toggle mechanism (pressed button is marked) or just a button w/o marking selection.

Help / API Specification

Go directly to the help site and find the component:

Download & Use

This component is available on the community package, as in SCN Design Studio SDK Development Community

Example as BIAPP:


org-scn-design-studio-community/applications · GitHub

Any thoughts?

feel free to add as usual...

Enhancements Ideas?

in this case it is just a start of development...

if you have good ideas (to those who would like to contribute but cannot code...) - place an "issue" with tag "enhancement" under Issues · org-scn-design-studio-community/sdkpackage · GitHub