Design Studio SDK - SAPUI5 Accordion Menu

[mike_howles4]

Update (10/6/2014) - Added additional BIAL Methods - Details at end of original post.

After reading n.manojkumar's creative post on Accordion Menus using a combination of boxes and listboxes (Accordion Menu in SAP Design Studio), I wanted to see if I could perhaps leverage SAPUI5's Accordion Menu that they have (SAPUI5 SDK - Demo Kit)

I decided on using the SAPUI5 handler and wanted to offer simple functionality of creating sections, and child items for each section.  I also wanted to provide 2 events, one for when you expand a section, and then one for when you click on an item.  This is also a good example of how the Advanced Property Sheet code can end up getting larger than the actual component code, as I wanted to provide a somewhat easy to use UI for building a list of sections.  The code which you can browse on your own also give and example of how to use SAPUI5 for your property sheet as well.

Property Sheet source code (171 lines): DesignStudio1.3UtilityPack/accordionMenu.js at master · entmike/DesignStudio1.3UtilityPack · GitHub

Component Code (105 lines) DesignStudio1.3UtilityPack/accordionMenu.js at master · entmike/DesignStudio1.3UtilityPack · GitHub

This also serves and a foundational example of how to handle serializing arrays or complex property types by JSON serializing them as a string.  You will see that all the sections and child items are saved under one property called 'itemConfig' and are serialized and deserialized in the getters and setters.

The end result is shown in the illustration below:

Also I offer 3 BIAL functions:

getSectionClicked() -- Returns last expanded section (e.g. KPIs)

getItemClicked() -- Returns child item clicked (e.g. TPS Coversheet Compliance)

getFullyQualifiedItemClicked() -- Returns both section and item (e.g. KPIs-TPS Coversheet Compliance)

Also 2 events:

On Section Change -- Fires when expanding a section

On Item Select -- Fires when selecting a child item

An example BIAL command would be as such:

And putting it all together, we can see the text change:

This component is now available as part of my Utility Pack that you can find out more about here:

Design Studio 1.2/1.3 SDK - Design Studio Utility Pack

Github Source can be found here:

entmike/DesignStudio1.3UtilityPack · GitHub

Those who are using my online repository (Explained here: Design Studio SDK - Creating an online SDK Repository) can simply run an update and see the Accordion Menu come in right now!

Also a reminder those who will be at TechEd && d-code this month, my session is SAP TechEd && d-code Las Vegas | October 20–24, 2014 | Home (EA211)

Enjoy!

Additional BIAL Methods now available and shown below thanks and credit to karol.kalisz's example in his SDK component Design Studio SDK: (dynamic) Accordion Component