Design Studio SDK: Side Navigation Component

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.

Events

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

onItemSelected()

APPLICATION.log(“Sel: ” + SIDENAVIGATION_1.getItemSelectedKey());

onFixedItemSelected()

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: http://org-scn-design-studio-community.github.io/sdkinstall/web/components/index.html

Download & Use

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

Example as BIAPP:

NAME: SDK_SIDE

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