Skip to Content

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!

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

      I am just wondering what you did after you installed and uploaded the SDK to BI server?

      I can only preview the component in the local mode. If I run the application using the component in server mode, it shows errors.  Have you restarted all APS server?

      Thank you.

  • Hi Mike,

    I have installed the utilities on the BI server, however, I am not able to see the component  popover buttons. Do you know the reason? Many thanks!


      • okay. I will using the zip files, Thats why.

        Thank you for the swift reponse.

        I will check it when you have uploaded the latest version. We will usei it in real project. The zip version is more reliable eventually.

        When you add it to the zip file, I just need to install it again? Does it overwrite the previous version automatically?

        • The .ZIP file is now updated.  If you save the new downloaded version on top of wherever you installed the prior .ZIP from, you can just do an update from Help -> About -> Installation Details -> Select Utility Pack -> Click Update...

          If you saved the .ZIP elsewhere, you can just uninstall and reinstall the .ZIP file, so not a big deal.

          Let me know if you have issues.

          • Hi Michael,

            I am testing the component.  However, I got some errors when I run the application on the server. The component is not shown up.  The application works fine in local mode. I have installed the SDK both locally and on the server.  Do you have any ideas why?

            Thank a ton.


          • Do you mean this one? I have just restarted the Analysis Server, which has Multi dimensional analyis services in "Common services.".   It still shows the same errors.


            Right click "Edit Common Services", I can see the listed services below.


          • Yes that would be MDAS.  I probably won't have time to test this today, but I'll try to reproduce the issue on my sandbox later.  However if you are able to, can you just restart all your APS servers in the CMC or using SIA and see if this clears it up?

  • Hi Michael,

    I found another problem with the component. When I use it in the desktop application, the scroll bar appears when the number of items exceeds the screen size. However, the scroll bar doesn't appear in the mobile version, so I can't choose the items which are listed outsize the ipad screen. Do you know the reasons? Thankyou.

  • Hey guys , Michael great work as always, just 1 question that is driving me nuts.

    Is there a way of resizing the icons (they come up way to small I think..) and

    how do you get the pop up items to be listed vertically (one over the other) check my picture :/wp-content/uploads/2015/03/popover_667761.png

    1 last thing, I don't mind it coming out horizontal, its just the icons displayed look a bit messy like this

  • I have the popoverbutton working except all I can get is a black balloon around the icon.  I can change the settings and get the black balloon to move to top or bottom etc.  Any ideas what I could be doing wrong here in DS 1.4? Thank

      • Michael, Thank you for your follow-up.  I am using Blue Crystal.  I added the items in the OnStartUp.  When I added them in Additional properties they disappear when I run the app.  Below you will see what I get and the CSS.  I am using DS 1.4. Thank you./wp-content/uploads/2015/03/popup_2_672031.png/wp-content/uploads/2015/03/popup3_672095.png/wp-content/uploads/2015/03/popup_4_672096.png/wp-content/uploads/2015/03/popup_5_672097.png/wp-content/uploads/2015/03/popup1_672018.png