Skip to Content

Design Studio SDK (1.3) – In-App Modal Browser Popup

October 16, 2014 | 1,334 Views |
 business objects design studiodashboardsdesign studiosap bo design studiosap businessobjects design studiosap design studiosap zen
Follow

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:

/wp-content/uploads/2014/10/browser1_565166.png

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:

/wp-content/uploads/2014/10/browser2_565167.png

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:

/wp-content/uploads/2014/10/browser3_565168.png

And at runtime upon clicking a tile (Real report, enjoy some trippy gaussian blur effect instead 🙂 ):

/wp-content/uploads/2014/10/browser4a_565172.png

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!

To report this post you need to login first.

13 Comments

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

    1. Mike Howles
      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 😉

      (0) 
  2. Former Member

    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.

    (0) 
      1. Former Member

        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.

        (0) 
  6. Former Member

    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

    (0) 
  7. Former Member

    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

    (0) 
  8. Former Member

    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

    (0) 

Leave a Reply