Design Studio SDK – SAPUI5 Accordion Menu
Update (10/6/2014) – Added additional BIAL Methods – Details at end of original post.
After reading MANOJ KUMAR‘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
Hi Mike,
This is an excellent example of a scenario where it's worth considering developing an SDK component instead of building a "composite component" with standard Design Studio functionality. As with the case of the Accordion Menu, although it is technically possible to build this by combining Button and List components inside a Panel component with supporting BIAL script and CSS, this approach can become difficult to maintain and reuse, so encapsulating all the functionality in an SDK component is certainly worth the effort.
On another point, you've also answered a question I've had in mind regarding the use of SAPUI5 controls within an Additional Properties Sheet. I do have a related question though for clarification. The SAP SDK documentation and sample SDK components demonstrate how to load the SAPUI5 library for access in the component.js file by specifying handler type "sapui5". However, as far as I could see, there was no mention of how to load the SAPUI5 library in the Additional Properties Sheet. I noticed in your additional_properties_sheet.html code the following line of code:
<script src="/aad/resources/sap-ui-cachebuster/sap-ui-core-dbg.js" type="text/javascript" id="sap-ui-bootstrap" data-sap-ui-theme="sap_goldreflection" data-sap-ui-libs="sap.ui.ux3, sap.ui.commons, sap.ui.table"></script>
Based on the Cache Buster documentation (which I came across when researching further after seeing your code), I'm assuming this is what loads the SAPUI5 Library in the Additional Properties Sheet so that UI5 controls can be accessed. Is my understanding correct? Or is the Cache Buster just a mechanism for caching the SAPUI5 library in the browser, which would otherwise be loaded anyway even if the above line of code was not included?
Also, I'm curious to know how you determined the correct URL path for the Cache Buster in Design Studio? 🙂
Thanks,
Mustafa.
Thanks for the feedback, Mustafa.
Let me see if I can answer your questions with one reply:
Based on the Cache Buster documentation (which I came across when researching further after seeing your code), I'm assuming this is what loads the SAPUI5 Library in the Additional Properties Sheet so that UI5 controls can be accessed. Is my understanding correct? Or is the Cache Buster just a mechanism for caching the SAPUI5 library in the browser, which would otherwise be loaded anyway even if the above line of code was not included?
Also, I'm curious to know how you determined the correct URL path for the Cache Buster in Design Studio? 🙂
I derived the URL Path by looking at the Additional Properties Sheet of the delivered SAP Chart Component and saw that path. I simply followed their method to include the libraries, with the assumption that this was an OK approach. I also noticed the cache buster usage, but to be completely honest, I was also perplexed as to the why the needed it for their UI5 library, but I eventually just let it go as an SAP mystery to solve another day. 😀
Thanks for the clarification, Mike. Some clever investigative acrobatics once again 🙂
Perhaps Reiner Hille-Doering will chime in with some official SAP guidance on the subject.
As long as it works, it is Ok 😆 .
Of course is is somehow dangerous to load something from a URL that we don't document. In future we could e.g. change the path completely and load UI5 from somewhere else.
The "sap-ui-cachebuster" part in the path could be anything and is only intended to ensure that browsers load the newest version. Internally we use a kind of timestamp at this position, but as UI5 is not changing, a static string is also fine.
Thanks for the insight as always, Reiner. A follow-up question, can I use sap-ui-cachebuster to bust the cache of my JS includes in my Additional Properties HTML page itself? I've noticed anytime I have to modify my JS, I have to Control+F5 the panel to kill the prior cached copy (this is after restarting DS.) Control+F5 is just a little quicker than the even slower clearing of IE cache so I'm basically wondering if there's even a quicker way 🙂
Hi Mike,
you were really quick on that - and also with additional properties, wow!
This will be good entry into technical and non-technical discussion on best practices which we can start - I have already posted the non-technical part at SDK components - development direction & concepts
The technical will come later, I see many interesting ideas on your code, especially the almost-reuse of the objects between the rendering and advanced properties.
Karol
Thanks, Karol - I'm also looking at your approach - I took note of you BIAL methods and added some primitive equivalents of my own.
Mine does not bother with Keys and just uses Texts, it's not quite as sophisticated as yours however I was able to add the add/remove methods.
Hi Mike,
Excellent article and great work for somebody who is searching an entry point in the advanced property sheet !
Thank you very much !!
Regards Manfred