Skip to Content
Author's profile photo Michael Howles

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/com.ipaper.sample.menu · GitHub

Example Script Window for the OnClick event using Toolbar:

/wp-content/uploads/2013/12/tb1_353716.png

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

/wp-content/uploads/2013/12/tb_anim_353738.gif

Happy New Year.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      I believe this will help out our users (developers) immensely! Thank you!

      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      Hi Michael,

      thanks for sharing. Interesting new way for a toolbar. Looking forward for the next part with the true toggle button.

      Dirk

      Author's profile photo Reiner Hille-Doering
      Reiner Hille-Doering

      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.

      Regards,

      Reiner.

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      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!