Design Studio SDK (1.3) – In-App Modal Browser Popup
Use Case:
- You want to open a web page inside your BI Application without opening in a new window or overwriting your BI App state in your current page
Approach:
I wrote a small Browser Popup Component to help.
Design-Time Properties:
- URL: URL of Site. Can also be set at runtime with setURL()
- Open Method:
- Modal Browser Dialog – Opens up URL in an embedded IFRAME contained in a modal sap.m.Dialog window.
- New Window – Does basically the same thing that APPLICATION.newWindow does.
- Show Button (true/false): By default, you will get a button for this component to launch the URL, however if you’d rather use BIAL to open it via a different component, you can hide it.
- Button Icon: Icon of Button (optional)
- Button Text: Text of Button (optional)
- Button Type: Different styles of sap.m buttons – Details here: (JsDoc Report – SAP UI development Toolkit for HTML5 – API Reference – sap.m.ButtonType)
- Modal Browser Title: Title of Modal Dialog Box (optional)
- Modal Browser Icon: Icon for the Modal Dialog Box (optional)
- Show Modal Browser Title (true/false): Save some screen real-estate by hiding, if you wish.
- Show Modal Browser Close Button (true/false): Show Close Button to close modal window (Escape key will also close) – Perhaps useful to leave on for Mobile devices (I have NOT tested this in BI Mobile, FYI)
- Modal Browser Width (CSS px or %): Width of Modal Browser
- Modal Browser Height (CSS px or %): Height of Modal Browser
BIAL Methods:
- click() – Used to invoke click method of the button if it’s been set as invisible. Useful if you want to open the URL from say another component. (e.g. BUTTON_1 click event could be as follows:)
BROWSERPOPUP_1.click();
- setURL(url) – Sets the URL to be used.
- getURL() – Gets the URL
And, now some pictures:
Design-Time example:
At runtime, after clicking. I threw in a link to w3schools.com just to demonstrate how you could link in-app help that may reside elsewhere on a different corporate intranet site:
Also as a second example of how you could potentially use this within your BI Platform, you could possibly use an OpenDocument link and embed/change it depending on the report you want to drill into. Example BIAL on my LaunchPad tile select event:
And at runtime upon clicking a tile (Real report, enjoy some trippy gaussian blur effect instead 🙂 ):
This has been updated in my Utility Pack that you can download and get source code here:
Design Studio 1.2/1.3 SDK – Design Studio Utility Pack
Have fun!
very good move, will this solve the mobile issue with openUrl?
Thanks, Karol.
I don't have my iPad with me at the moment but I'll test next time I can wrestle it out of my kid's hands 😉
Just realize that for this component have
Visible: true or false and Show Button: true or false to hide the Component.
Show Button can be used to hide the button.
but Set Visible to false will disable the whole function.
This is really cool.
It can be used together with the Fiori Launchpad to create a real KPI landing page.
you can also use the EmbeddedFrame from community offering if you want to place some external content w/o popup.
Embedded Frame - SCN Design Studio Community
It seems that it is not possible to open another Design Studio app in the MODAL browser, right?
Probably anything that crawls parent DOM windows or uses Frame-busters won't work.
I guess it is related to the session management. The embeded DS is opened in MODAL browser and actually works. But the parent DS is not working anymore.
Which component should i choose in the Dessign Studio 1.6 SDK Version 3.0 to have the similar function.
a popup window?
the component is "Modal Browser". Modal Browser 0.X - SCN Design Studio Community.
try always to search in the component palette by name, we try to not change the visible names.
Karol
HI,
i am a student of Vic UNi, and studying SAP ERP, MY question is that how to close the application in SAP design studio....
i want to make CLOSE button but unable to find the script for the close application...
Kindly help me
SARA
Hi,
in design studio 1.6 not working: ModalBrowser.SetVisible(false);
the close button it used without body in the footer whit a button.
I have tried to use other elements but no way .
buton also the close of the modal does not work to make a call from the DS.
regards
Hi
This is cool , just one thing is there any way I can have width and height set for almost covering screen,I tried setting width & height as 200% but its not working , or any other way to view the browser size fit to screen
I am using css class .sap.m.dialog is that the right one?
Thanks