Design Studio SDK (1.3) – In-App Modal Browser Popup
- 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
I wrote a small Browser Popup Component to help.
- 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
- 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:)
- setURL(url) – Sets the URL to be used.
- getURL() – Gets the URL
And, now some pictures:
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: