Design Studio SDK (1.3 SP0 & SP1) – Popover Buttons

Update (10/10/2014):

1.3 SP0 had an issue with sap.m Components that have a property called ‘type’.  This is fixed in SP1 which I am on so I didn’t notice this bug until someone told me.  I have a workaround now for anyone on 1.3 SP0, however I’d highly recommend getting off of SP0 ASAP.

Original Post:

I remember the first webinar that I sat on that was previewing the new Analytic Template that we all now have.  On the surface, it looked a lot like many Fiori-type interfaces we’ve seen since.

I really was glad to see the simple and clean interface.  I also saw what I thought was going to be some new components like what we can see in many sap.m examples such as the PopOver (SAPUI5 Explored example of PopOver)

This is the type I am referring to in Design Studio that looks similar:

After all, it even had the sap-icon ‘action’ being shown (Icon Explorer)..

Of course sometimes things are not what they seem… Upon opening the template ourselves, we see that it in fact is a combination of several individual components creatively/carefully arranged as to simulate a PopOver with a list of items inside:

I’ve counted them for you, that’s 7 components, and a lot of BIAL to make it all work.  Now, if this were a one-off, no big deal, however the settings buttons on the bottom left has the same design, and then other variants elsewhere in the template…

Can we maybe simplify some of this repetitive development?  Yes!

I’ve made a simple SDK component called PopOver Button to allow for some of this creation to be done easier in one component.  A side-by-side comparison is below:

As you see I also added the (optional) ability to add some icons next to each entry as well.  Now, it’s not dark grey like the Design Studio component, however using standard CSS styling for UI5 classes, you can make it look however you need to.  The sample I am showing you is how the Blue Crystal CSS theme out of the box handles it.

What else is available?

Title: The optional title that can be shown along with the list:

Icon: The icon for the Button

Popover Width/Height: CSS width/height of popup.  ‘auto’ will autosize.

On Select: BIAL event code to handle when you click an item

Type: The type of PopOver Button to show (Details and Examples: SAPUI5 Explored Button)

Placement: Whether the menu should show Above, below, left, right, etc relative to the button

And most importantly, managing the item entries can be done in 2 ways, via the Advanced Property Sheet at design time, or in BIAL at runtime:

Design Time example:

And for BIAL runtime, we have 4 methods:

getItemClicked() – Returns last item clicked.

removeAllItems() – Removes all items

addItem(“Example”) – Add an item with no icon

addItem(“sap-icon://delete|Delete”) – Add an item with an icon

removeItem(“Example”) – Remove an item

Here’s a snippet of BIAL added on app load and how it would change the sample shown above:

And the result:

So in summary, I hope this is a good example of showing you how a small amount of SDK work can cut down on manual labor

• Reusable
• Designtime and Runtime flexibility
• Simpler to maintain

As with my other entries, the source code will be updated on my Github Repository that you can read about here.

Design Studio 1.2/1.3 SDK – Design Studio Utility Pack

Feedback is welcomed.  Enjoy!