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!
nice addition Mike. Good stuff!
Hi Mike,
thats really cool, exactly what helps me a lot in my actual project! Many Thanks!
You made my day!
Dirk
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!
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.
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 have installed the new version and I can see the popover menu now. I will try it out. Thank you for the swift reponse.
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.
Did you restart your MDAS server after installing?
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?
Okay, Thank you. Michael, I will give it a shot...
Hi Michael,
It works now after I restarted all PS servers. thank you for your help.
Hi Mike
Really amazing work that you are doing!
Regards
Derek
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 :
1 last thing, I don't mind it coming out horizontal, its just the icons displayed look a bit messy like this
Change theme to Blue Crystal.
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
Are you using Blue Crystal Theme? Can you provide a screenshot? Which browser are you using?
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.




the correct notation for sap-icon is:
sap-icon://open-folder
you miss the ":" sign before the "//" characters.
Karol
Thank you Karol. Guess I stared at it too long. Now off to figure out why the background color won't change. Jim