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!

13 Comments

You must be Logged on to comment or reply to a post.

Karol Kalisz October 16, 2014 at 8:09 pm

very good move, will this solve the mobile issue with openUrl?

like (0)
1. Mike Howles Post authorOctober 16, 2014 at 8:11 pm
  
  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 😉
  
  like (0)
Meng Wang March 25, 2015 at 6:24 am

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.

like (0)
Meng Wang March 25, 2015 at 6:35 am

This is really cool.

It can be used together with the Fiori Launchpad to create a real KPI landing page.

like (0)
1. Karol Kalisz March 25, 2015 at 10:52 am
  
  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
  
  like (0)
Shady Shen April 28, 2015 at 12:55 am

It seems that it is not possible to open another Design Studio app in the MODAL browser, right?

like (0)
1. Mike Howles Post authorApril 28, 2015 at 2:31 am
  
  Probably anything that crawls parent DOM windows or uses Frame-busters won’t work.
  
  like (0)
  1. Shady Shen April 28, 2015 at 3:03 am
    
    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.
    
    like (0)
Meng Wang January 7, 2016 at 7:04 am

Which component should i choose in the Dessign Studio 1.6 SDK Version 3.0 to have the similar function.

a popup window?

like (0)
1. Karol Kalisz January 7, 2016 at 12:31 pm
  
  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
  
  like (0)
Syeda Sara Batool Jaffri May 28, 2016 at 7:07 am

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

like (0)
Ruben Valdez June 24, 2016 at 11:05 pm

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

like (0)
Piyush Pimplapure December 30, 2016 at 12:53 pm

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

like (0)