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)
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: 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:
org-scn-design-studio-community/applications · GitHub
feel free to add as usual…
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
I tried using side navigation.
However, an accordion different from the one I clicked on will be opened.
Do you know about this behavior?
Also, are you planning to release a new version of Side Navigation?
Waiting for your reply.
Thanks in Advance.
can you please make some screenshot of your accordion?
I can confirm Kousuke's finding. Whenever you have an item with expander and you click on it, every other "collapsed" item will uncollapse as well. It seems the collapse event happens for the whole sidenavigation instead of per item. Would you mind looking at it?
I added the sap belize theme to our shared library to make sure the sidenavigation renders correctly with Lumira 2.x.
We are trying to use this component in our application but or not able to add a subitem via a script.
The script we are using is: SIDENAVIGATION_1.addItems("parentkey","subkey","subtext"," ");
Do can you help us out and tell us what we are doing wrong?