Skip to Content
Author's profile photo Michael Howles

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


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:);
  • 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 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!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Karol Kalisz
      Karol Kalisz

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

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

      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 😉

      Author's profile photo Meng Wang
      Meng Wang

      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.

      Author's profile photo Meng Wang
      Meng Wang

      This is really cool.

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

      Author's profile photo Karol Kalisz
      Karol Kalisz

      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

      Author's profile photo Shady Shen
      Shady Shen

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

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

      Probably anything that crawls parent DOM windows or uses Frame-busters won't work.

      Author's profile photo Shady Shen
      Shady Shen

      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.

      Author's profile photo Meng Wang
      Meng Wang

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

      a popup window?

      Author's profile photo Karol Kalisz
      Karol Kalisz

      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.


      Author's profile photo Former Member
      Former Member


      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


      Author's profile photo Former Member
      Former Member


      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.


      Author's profile photo Piyush Pimplapure
      Piyush Pimplapure

      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?