Purpose
Another response to MANOJ KUMAR's Accordion Menu in SAP Design Studio, and caused by public holiday and weekend trip - unfortunately also to the post by Michael Howleson the SDK way of doing in Design Studio SDK - SAPUI5 Accordion Menu.
There are 2 reasons why I place this component:
- the fist one is - I have already started it directly after Manoj has posted the blog and before Michael has posted his version (work interrupted by no time at evening)
- and the second one (more important for me) is - this one has completely different approach - and in a blog which I want to write a bit later I would like to have an open discussion on good/not so good ideas and approaches.
How does it looks like? (click to animate GIF)
or with big images like this.
| Styles | ||
| scn-pack-Accordion | the accordion style | |
| scn-pack-Accordion-SelectedValue | the selected value style | |
| scn-pack-Accordion-Label | the label style | |
| scn-pack-Accordion-Image | the image style | |
| scn-pack-Accordion-Layout | the item layout style | |
Available Properties
| Property Name | Description |
|---|---|
| defaultImage | image property for default image (must be set for use with images) |
| withImage | flag for "Use Images" |
| maxSectionHeight | Max Height for Section in px |
| imageSize | Size of the Image (16 or 32 px) |
Scripting Functions
| Scripts | Short Description |
|---|---|
| void removeAllElements () | removes all elements (and sections) |
void addSection ( /**Element Key (must be unique)*/String elementKey, /**Element text*/String elementText, /**Image URL, if not set, no image*/String imageUrl) | adds a section with unique key |
void addElement ( /**Element Key (must be unique)*/String elementKey, /**Element text*/String elementText, /**Image URL, if not set, no image*/String imageUrl, /**The Key of the parent Element*/String parentElementKey) | adds an element (represented by label with image or without image) to the section |
| String getExpandedKey () | returns the expanded key |
| String getSelectedKey () | returns the selected key (by click on the node or leaf) |
| void setMaxSectionHeight (String height) | sets the max height for a section |
Events
| Event | Short Description |
|---|---|
| onSelectionChanged | Event triggered when element is selected |
| onFirstExpand | Event triggered when the section is expanded for first time (this is the even where you can load more content) |
Example Application
An Application with example can be downloaded at the BIAPP Repository:
- KarolKalisz/DesignStudioBiAppRepository · GitHub
- or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub
Releases
Source Code & Licensing
This component is for free use. It is under the Open Source Apache Version 2.0 License.
Important MaintenanceNotice (... as I am SAP Employee)
The component is NOT delivered under SAP maintenance license.
You cannot claim any Support on this component from SAP!
The components are created on "private" basis - you can use them as is. I can modify, correct or improve - but there is no obligation to do it. Of course I will try to correct bugs or improve the component as long I can.
Have Fun!
for other components see: Karol's SDK Components