Skip to Content
Author's profile photo Michael Howles

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:

/wp-content/uploads/2014/10/popover1_558811.png

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:

/wp-content/uploads/2014/10/popover2_558854.png

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:

/wp-content/uploads/2014/10/popover3_558855.png

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:

/wp-content/uploads/2014/10/popover5_558859.png

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:

/wp-content/uploads/2014/10/popover6_558877.png

And the result:

/wp-content/uploads/2014/10/popover7_558878.png

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!

Assigned Tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jeroen van der A
      Jeroen van der A

      nice addition Mike. Good stuff!

      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      Hi Mike,

      thats really cool, exactly what helps me a lot in my actual project! Many Thanks!

      You made my day!

      Dirk

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      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!

      Capture.PNG

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

      Did you use the .ZIP file or the online repository (recommended, details here: Design Studio SDK - Creating an online SDK Repository) method?

      The online repo method is updated but I didn't update the .ZIP yet but I will this morning.

      Author's profile photo Former Member
      Former Member

      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?

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

      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.

      Author's profile photo Former Member
      Former Member

      Hi Michael.

      I have installed the new version and I can see the popover menu now. I will try it out. Thank you for the swift reponse.

      Author's profile photo Former Member
      Former Member

      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.

      Capture1.PNGCapture2.PNG

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

      Did you restart your MDAS server after installing?

      Author's profile photo Former Member
      Former Member

      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.

      Capture1.PNG

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

      Capture2.PNG

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

      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?

      Author's profile photo Former Member
      Former Member

      Okay, Thank you. Michael, I will give it a shot...

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      It works now after I restarted all PS servers. thank you for your help.

      Author's profile photo Derek Fox
      Derek Fox

      Hi Mike

      Really amazing work that you are doing!

      Regards

      Derek

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      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

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

      Change theme to Blue Crystal.

      Author's profile photo Former Member
      Former Member

      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

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

      Are you using Blue Crystal Theme?  Can you provide a screenshot?  Which browser are you using?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Karol Kalisz
      Karol Kalisz

      the correct notation for sap-icon is:

      sap-icon://open-folder

      you miss the ":" sign before the "//" characters.

      Karol

      Author's profile photo Former Member
      Former Member

      Thank you Karol. Guess I stared at it too long.  Now off to figure out why the background color won't change. Jim