Quantcast
Channel: SAP BusinessObjects Design Studio
Viewing all articles
Browse latest Browse all 662

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

$
0
0

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:

browser1.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:

 

browser2.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:

 

browser3.png

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

 

browser4a.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!


Viewing all articles
Browse latest Browse all 662

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>