Skip to Content

Design Studio 1.2 SDK – Building a SAPUI5 Toolbar

While you can use the BI Action Language (BIAL) in Design Studio to simulate a toolbar, and even play with toggling of states and repositioning hidden buttons, it is a lot of overhead and math to do things like compute margins, etc.  Also, I prefer to have all my click events in one place and not buried in many different buttons.  (Some may prefer the other way, admittedly.)  I wanted to see if I could implement the SAPUI5 Toolbar component with any success.  My main goals were to have a horizontally arranged stack of buttons with the ability to programmatically (as well as one can today using the DS script window) set some properties for the buttons such as enabled, visible, icon, text, and tooltip.  These properties can mostly be done using the script window with the standard buttons, however it’s painful when you must reposition them or dynamically switch visibility to simulate toggle buttons, etc.  In a later post, I’ll probably implement a true toggle button, but maybe someone may find this toolbar interesting.

Source: entmike/ · GitHub

Example Script Window for the OnClick event using Toolbar:


Example interactivity at runtime (Click Image for Animated GIF).


Happy New Year.

You must be Logged on to comment or reply to a post.
  • Hi Michael,

    Cool component.

    But I see that you wrap a UI5 control into our "Div" wrapper using the "placeAt" method. While this may work, it is not recommended. The Design Studio SDK has a mode to support SAP UI5 controls directly. This feature is not yet documented, but soon will be. This would make your component simpler and more robust. Please stay tuned.



    • Thanks, Reiner.  I will stay tuned.  I hope you guys can appreciate me staying with SAP tools by using UI5 instead of a 3rd party library.  Will continue to try to stay within best usages as documentation is made available.

      Thanks again!