[CLOSED] Adding a pop up window for a drill down report

September 17, 2014, 11:06 AM

Matt Olson

Currently I am using TARGET='_blank' to display my drill down report in a second window. I would like to change this to have the drill down report display in a pop up window that is smaller than the originating window. How do I do this? I have tried to use the following example from a prior forum post with no luck.

  -DEFAULT &COUNTRY = 'FOCNONE';

TABLE FILE CAR
SUM
SALES
BY COUNTRY
BY CAR
BY MODEL
WHERE COUNTRY EQ '&COUNTRY'

ON TABLE SET STYLESHEET *
TYPE=DATA, COLUMN=COUNTRY, FOCEXEC=CAR1 (COUNTRY=COUNTRY), TARGET=WINCAR1, $
ENDSTYLE

ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<script type="text/javascript">
self.moveTo(0,0);                                     // Move to the top left corner
self.resizeTo(screen.availWidth,screen.availHeight);  // Resize to the available screen size
self.focus();                                         // Bring window to the front
</script>

!IBI.FIL.H001;
-HTMLFORM END

Any help on this would be appreciated.

Thanks.
Matt

This message has been edited. Last edited by: <Kathryn Henning>,

September 17, 2014, 11:54 AM

Tony A

A quick question - are you prepared to jump into using something like jQuery?

If so then you could lookup using a modal div in jQuery or something of the like. That would give you quite a "neat" method of displaying your drilldowns.

Your stated version is 7.6 which does not have jQuery installed with it, so you would have to download a version and get permission to install it. If you were on WF8 then it (jQuery v1.7) would already be installed.

T

September 17, 2014, 02:51 PM

Matt Olson

Thanks Tony. We are on version 8.008. I will look into the modal div in jQuery.
Matt

September 17, 2014, 02:57 PM

Tony A

If anyone in the UK would like to know how to do this with jQuery, then come to the User Group meeting on 16th October and I'll show you how to achieve this.

For those not lucky enough

to be in the UK then I will post the code shortly after the 16th.

T

September 17, 2014, 11:20 PM

Norb Eckert

Hi Tony,

I hope all is well with you.

I'd be curious to see your clever popup technique.

Cheers,

Norb

September 18, 2014, 03:16 AM

Tony A

Hey Norb,

Long time no speak! I am well and I wish you the same.

I would post the code now but, as it forms part of a presentation that I have, I don't want to post a "spoiler".

Apologies for that but I will post a simple version plus one that uses the modal pop-up soon after the UK User Group.

T

October 20, 2014, 06:03 AM

Tony A

As promised, this is a "hand cranked" version of a pop-up widnow for a drill down using jQuery.

Note that, although I have used an HTMLFORM pair this could as easily be included within an HTML composer page.

-DEFAULT &COUNTRY = '_FOC_NULL';

TABLE FILE CAR
  SUM SALES
   BY COUNTRY
   BY CAR
   BY MODEL
WHERE COUNTRY EQ '&COUNTRY'
ON TABLE SET STYLESHEET *
TYPE=DATA, COLUMN=COUNTRY, JAVASCRIPT=drillto('CARINST' COUNTRY 'Example Drilldown using jQuery'), $
ENDSTYLE
ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<head>
<style type="text/css">
-* I'm using the id of each div to assign CSS
  #divdrill {
    position: absolute; top: 100px; left: 200px; background-color: #fff; z-index: 100; border: 1px solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }
  #hdrdrill {
    background-color: #f00; width: 100%;
    -moz-border-top-left-radius: 5px; -moz-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px; border-top-right-radius: 5px;
  }
  #btndrill {
    height: 16px; width: 20px; float: right;
    background-image: url(/ibi_html/javaassist/icons/Exit16.gif);
    background-repeat :no-repeat;
  }
  span {
    padding: 3px;
  }
</style>

<!-- Within WF8, these JS and CSS Libraries are installed as standard -->
<script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script>
<script src="/ibi_apps/jquery/jquery-ui.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/ibi_apps/jquery/jquery-ui.css" />

<!--
      This is thejQuery that is executed on drilldown click
      All it does is to remove the drilldown div (in case it already exists)
      and then create an outer div containing 3 inner divs, 2 for the heading
      and 1 for the drill down report content.
      The 2 heading divs contain the title plus the image for closing the pop-up.
-->
<script type="text/javascript">
function drillto(fex, country, title) {
// If the drill down div exists then "close it"
  if ($("#divdrill")) {closeit();}

// Build the div collection that will house the drill down report
  var myhtml  = "<div id='divdrill'>";
      myhtml += "<div id='hdrdrill'><span>"+title+"</span>";
      myhtml += "<div id='btndrill' onclick='closeit();'></div>";
      myhtml += "</div><div id='divnum_1'></div></div>";

// Append the div collection to the document body
  $("body").append(myhtml);

// Build the URL required to execute the drill down report
  var _ajaxurl =  "/ibi_apps/WFServlet?IBIAPP_app=ibisamp";
      _ajaxurl += "&|IBIF_ex="+fex+".fex&|COUNTRY="+country;

// and insert the html from the drill down report as the innerHtml
  $.get(_ajaxurl, function(data){$("#divnum_1").html(data)});

// This is the "magic" that allows the drill down div to be dragged!
  $( "#divdrill" ).draggable();
}

// Remove the div collection
function closeit() {
  $("#divdrill").remove();
}

</script>
</head>
<body style="overflow: hidden;">
!IBI.FIL.H001;
</body>
</html>

-HTMLFORM END

October 20, 2014, 06:05 AM

Tony A

... of course there is a much better method by making the pop-up modal.

Same comment on including within an HTML composer page ....

-DEFAULT &COUNTRY = '_FOC_NULL';

TABLE FILE CAR
  SUM SALES
   BY COUNTRY
   BY CAR
   BY MODEL
WHERE COUNTRY EQ '&COUNTRY'
ON TABLE SET STYLESHEET *
TYPE=DATA, COLUMN=COUNTRY, JAVASCRIPT=drillto('CARINST' COUNTRY 'Example Drilldown using jQuery'), $
ENDSTYLE
ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<head>
<style type="text/css">
</style>

<!-- Within WF8, these JS and CSS Libraries are installed as standard -->
<script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script>
<script src="/ibi_apps/jquery/jquery-ui.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/ibi_apps/jquery/jquery-ui.css" />

<!--
      This is thejQuery that is executed on drildown click
      All it does is to remove the drilldown div (in case it already exists)
      and then create an outer div containing 3 inner divs, 2 for the heading
      and 1 for the drill down report content.
      The 2 heading divs contain the title plus the image for closing the pop-up.
-->
<script type="text/javascript">
function drillto(fex, country, title) {
// If the drill down div exists then "close it"
  if ($("#divdrill")) {closeit();}

// Build the div collection that will house the drill down report
  var myhtml  = "<div id='divdrill'></div>";

// Append the div collection to the document body
  $("body").append(myhtml);

// Now set attributes on the drill down div to define it as a modal dialog
 $("#divdrill").dialog( {
         autoOpen      : false
        ,closeOnEscape : true
        ,resizable     : true
        ,width         : 600
        ,height        : 350
        ,position      : ""
        ,show          : {effect: "clip", duration: 300}
        ,hide          : {effect: "clip", duration: 300}
        ,stack         : true
        ,modal         : true
    })

// Build the URL required to execute the drill down report
  var _iframeurl =  "/ibi_apps/WFServlet?IBIAPP_app=ibisamp";
      _iframeurl += "&|IBIF_ex="+fex+".fex&|COUNTRY="+country;

  var _url  = "";
      _url += "<iframe style='width:99%; height:99%;' src='"+_iframeurl+"'>";
      _url += "</iframe>";
      $("#divdrill").html(_url);
      $("#divdrill").dialog("open", "");
      $("#divdrill").dialog("option", "title", title);
}

// Remove the div collection
function closeit() {
  $("#divdrill").remove();
}

</script>
</head>
<body style="overflow: hidden;">
!IBI.FIL.H001;
</body>
</html>

-HTMLFORM END

January 20, 2015, 08:18 AM

Gaurav

quote:

Originally posted by Tony A:
... of course there is a much better method by making the pop-up modal.

Same comment on including within an HTML composer page ....

-DEFAULT &COUNTRY = '_FOC_NULL';

TABLE FILE CAR
  SUM SALES
   BY COUNTRY
   BY CAR
   BY MODEL
WHERE COUNTRY EQ '&COUNTRY'
ON TABLE SET STYLESHEET *
TYPE=DATA, COLUMN=COUNTRY, JAVASCRIPT=drillto('CARINST' COUNTRY 'Example Drilldown using jQuery'), $
ENDSTYLE
ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<head>
<style type="text/css">
</style>

<!-- Within WF8, these JS and CSS Libraries are installed as standard -->
<script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script>
<script src="/ibi_apps/jquery/jquery-ui.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/ibi_apps/jquery/jquery-ui.css" />

<!--
      This is thejQuery that is executed on drildown click
      All it does is to remove the drilldown div (in case it already exists)
      and then create an outer div containing 3 inner divs, 2 for the heading
      and 1 for the drill down report content.
      The 2 heading divs contain the title plus the image for closing the pop-up.
-->
<script type="text/javascript">
function drillto(fex, country, title) {
// If the drill down div exists then "close it"
  if ($("#divdrill")) {closeit();}

// Build the div collection that will house the drill down report
  var myhtml  = "<div id='divdrill'></div>";

// Append the div collection to the document body
  $("body").append(myhtml);

// Now set attributes on the drill down div to define it as a modal dialog
 $("#divdrill").dialog( {
         autoOpen      : false
        ,closeOnEscape : true
        ,resizable     : true
        ,width         : 600
        ,height        : 350
        ,position      : ""
        ,show          : {effect: "clip", duration: 300}
        ,hide          : {effect: "clip", duration: 300}
        ,stack         : true
        ,modal         : true
    })

// Build the URL required to execute the drill down report
  var _iframeurl =  "/ibi_apps/WFServlet?IBIAPP_app=ibisamp";
      _iframeurl += "&|IBIF_ex="+fex+".fex&|COUNTRY="+country;

  var _url  = "";
      _url += "<iframe style='width:99%; height:99%;' src='"+_iframeurl+"'>";
      _url += "</iframe>";
      $("#divdrill").html(_url);
      $("#divdrill").dialog("open", "");
      $("#divdrill").dialog("option", "title", title);
}

// Remove the div collection
function closeit() {
  $("#divdrill").remove();
}

</script>
</head>
<body style="overflow: hidden;">
!IBI.FIL.H001;
</body>
</html>

-HTMLFORM END

Good Morning Tony,

I have a query regarding the awesome example you displayed. When I replace it with my procedure and put my fex name instead of 'CARINST' then the dialog box displays message that my fex not found. can you please suggest how to give name of fex.

Thanks & Regards,
Gaurav Tyagi

January 22, 2015, 09:53 PM

David Briars

@Tony - Both examples of creating a small jQuery 'popup' worked great for me. We currently use the JavaScript window.open method to render our drill downs. It will be great to have a possible alternative, especially when we want to go modal.

@Gaurav - In addition to changing the fexname, you'd also need to change the application folder, in the 'url build' code section, to the folder you are using. If you are not working in an application folder at all, and are in either WF 7 Managed Reporting or WF 8 Repository Content, then your 'url build' code would need to change quite a bit more.

January 23, 2015, 01:19 AM

Gaurav

Hello Daivd,

Thanks for your reply.

I'm working in WF 8 Repository Content. Can you give me an Idea what the url might be?

Let me give you my folder Hierarchy

Content -> Operations and Regulatory Reports -> Standard Reports -> GauravTyagi -> MyFile.fex

Thanks & Regards,
Gaurav Tyagi

January 23, 2015, 03:42 AM

Tony A

@David,

Glad to have given you some useful code

@Gaurav,

Locate your drill fex in App or Dev Studio and right click on the parent folder. Select Properties and look at the Full Path.
This should give you some of what you require for the URL.

http://[server][:port]/ibi_apps/WFServlet?IBIF_webapp=/ibi_apps&IBIC_server=[servername]&IBIWF_msgviewer=OFF&IBIAPP_app=[app folder names]&&IBIMR_drill=IBFS,RUNFEX,IBIF_ex,true&IBIF_ex=IBFS:/WFC/Repository[/rest of full path]/[your fex name]

January 23, 2015, 10:13 AM

David Briars

Upon upgrading to WF 8, we began to use RESTful web services, per IB's recommendation, for a calls to reports within the Content Repository.

We used the following manual section as our source of information:
Manual : WebFOCUS RESTful Web Services Developer's Guide
Chapter: 2. WebFOCUS Managed Reporting RESTful Web Service Requests
Section: Running a Report From WebFOCUS Managed Reporting

An RESTful URL call like this, from this section of the manual, is what we've been using in 8:

http://localhost:8080/ibi_apps/rs/ibfs/WFC/Repository/RESTful_Web_Services/
Car_Reports/Sales_for_a_Specific_Country.fex?IBIRS_action=run&COUNTRY=JAPAN

February 03, 2015, 05:08 AM

Gaurav

Hello David and Tony,

Sorry for late reply but I have been very sick lately. Joined office this monday again. I tried both your ways but no luck so far.
Let me give you my server details hope that helps to make working url.

Server Name:Port = localhost:80
complete path = IBFS:/wfprod/WFC/Repository/operatio/std_reports/GauravTyagi/Working

Pls Help.

I have not been able to get desried fucntionalities because of this.

David I have brought jquery tab inside jquery dialog box it is amazing man. My bosses love it. Thanks for all the help you guys have been so far.

Thanks & Regards,
Gaurav Tyagi

February 03, 2015, 08:26 AM

Gaurav

Thanks Dave we don't have any webservices yet thats why my url is not working. I had chat with my admin he said we are in process of buying it. But he said it will take time.

Thanks Man.

June 17, 2015, 08:49 AM

Chad Miller

I have completed another example that can be seen here using JQuery: http://forums.informationbuild...917087676#3917087676

June 17, 2015, 04:37 PM

susannah

i do something mind-bendingly simple, and it still works in 7706 (and i think i've been doing it since IV.III )
2 parts:
in the presentation part, in the -HTMLFORM BEGIN
i put some js in the script tags in the head section like this:

<script>
function pop2(url,winname) {
window.open(url, winname , "width=750,scrollbars=yes,resizable=yes, top=230, left=180, height=600");
}
</script>

then in the fex itself, i define whatever thing i want the drill to run from. In this case , its an image, and the drill is an existing html page.
But that makes no difference, the thing could be a field and the link to a fex...

_icon_js/A450= 
'<A HREF=''javascript:pop2("/approot/exec_welcome/exec_alerts_def.htm","FAQ")''>'| info_icon |' </A>';

painless. works. you can change the size and position easy as pie.

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10