[SOLVED] Drill Down in Modal

I am looking to create a drill down from a line graph. When a position on the graph, such as a date, is clicked, I want to drill to another report with details from that date in a modal window or some sort of pop-up that is on the same webpage. The issue is that all I am able to do is replace the current report with the drill down report in the same window, or open it in a completely new tag. I have searched for documentation and found little to nothing on specifying where the drill down opens, other than in the same window on the other report, or a whole new window.

This message has been edited. Last edited by: Chad Miller,

WebFOCUS 8105
Windows, All Outputs

Posts: 22 | Registered: May 14, 2015

eric.woerle

Master

posted

Hide Post

Chad,

You would need to create a Javascript call to do this. you can call Javascript functions through the drill down.

Essentially what I would do, is have the javascript write a modal div tag (with an iframe in it, and the modal hidden)using Jquery, then use jquery to issue update the source of the iframe to the drill down report. Then have the function display the modal. this isn't so much WebFOCUS functionality as it is taking advantage of the HTML page that displays the report.

Here is a Sample HTML page and Fex that I built for a modal overlay. The concept will be the same except you will be writing your modal frame dynamically

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD>
<META id=RLT_STANDARDS_MODE_META content=IE=9 http-equiv=X-UA-Compatible>
<META name=mycharsetmeta content="text/html; charset=ISO-8859-1" http-equiv=Content-Type>
<META name=Generation content="Created in release 8008, Generation 3">
<SCRIPT type=text/javascript>//confidential_id=IBI_OptionsScript
var szHtmlAlias="/ibi_apps/ibi_html";var szRunTimeHtmlAlias="runTimeHtmlAlias";var cgipath="cgipath";var ibirls="ibirls3";var rltdyncalendar="rltdyncalendar";var map="ibimap";var olap="olap";var olappanebase="olappanebase";var olapdrill="olapdrill";var ibiOptions = new Array(cgipath,ibirls);var nlsScript="/javaassist/nls.js";var nlsVarsScript="/javaassist/nlsvars.js";var glbScript="/javaassist/ibi/html/js/ibigbl.js";var replacePart="<replace>";
var scriptTemplate='<SCRIPT src="'+replacePart+'" type="text/javascript"><\/SCRIPT>';if(typeof(szRunTimeHtmlAlias) === 'string' && szRunTimeHtmlAlias.indexOf('/') == 0)szHtmlAlias=szRunTimeHtmlAlias;document.write(scriptTemplate.replace(replacePart, szHtmlAlias + nlsScript));document.write(scriptTemplate.replace(replacePart, szHtmlAlias + nlsVarsScript));document.write(scriptTemplate.replace(replacePart, szHtmlAlias + glbScript));</SCRIPT>

<SCRIPT type=text/javascript>//confidential_id=IBI_ibigblloadCss
if(typeof ibigblloadCss === 'function'){ibigblloadCss(null);addIntlTranslatedJS("composertrans.js");}else {alert("JavaScript alias '/ibi_apps/ibi_html'  is not valid");window.location("about:blank");}</SCRIPT>
<TITLE>HtmlPage</TITLE>
<SCRIPT for=window type=text/javascript eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>

<SCRIPT>//confidential_id=clientEventHandlersJS

//Begin function window_onload
function window_onload() {
 
UpdateData();
 
// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload

$(function() {
    $( "#text1" ).dialog({
      modal: true,
	  autoOpen: false,
	  width: "600",
      height: "auto",
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

//Begin function button1_onclick
function button1_onclick(ctrl) {

$("#text1").html("<iframe src='/ibi_apps/WFServlet.ibfs?&IBIMR_action=MR_RUN_FEX&IBIMR_sub_action=MR_STD_REPORT&IBIMR_fex=/WFC/Repository/.../JSChart.fex' width='100%' height='95%'></iframe>");
$("#text1").dialog({ position: {	my: "center", at: "center",	of: window},
					title: 'My Modal Graph',
					modal: true,
	  				autoOpen: false,
	  				width: "800",
      				height: "600",
      				buttons: {
        				Ok: function() {
          					$( this ).dialog( "close" );
        					}
      					}
				   	});
				if ($("#text1").dialog("isOpen") == false) {
					$("#text1").dialog("open");
				}
}
//End function button1_onclick
</SCRIPT>
<LINK id=ITEM2 rel=stylesheet type=text/css rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/default_theme.css"><LINK id=IBI_THEME_CSS rel=stylesheet type=text/css desc="Information Builders" rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/ibi.css"><LINK id=ITEM5 rel=stylesheet type=text/css rtFileName="/WFC/Repository/.../jquery-ui.css">
<SCRIPT id=ITEM3 type=text/javascript rtFileName="/WFC/Repository/.../jquery.js"></SCRIPT>

<SCRIPT id=ITEM4 type=text/javascript rtFileName="/WFC/Repository/.../jquery-ui.js"></SCRIPT>
</HEAD>
<BODY style="OVERFLOW: auto" class=IBI_PageBg maptype="0" thumbnailscale="4" elementtype="21" edaconnectionrequired="true">

<a href='javascript:button1_onclick();' style="POSITION: absolute; WIDTH: 410px; HEIGHT: 310px; TOP: 30px; LEFT: 610px" >
<IFRAME  onclick=button1_onclick() id=graph1 style='width:100%;Height:100%;position:absolute;' title=JSChart.fex scrolling=no elementtype="3" autoExecute="true" requests_list="0" size_to_fit="1" name="graph1"></IFRAME>
	
</a>

<DIV id=text1 elementtype="4">This is my Modal Message.<BR><BR>Isn't it pretty?
</DIV><INPUT style="Z-INDEX: 3; POSITION: absolute; WIDTH: 190px; HEIGHT: 60px; TOP: 400px; LEFT: 50px" id=button1 language=javascript class="IBIfield IBI_button" tabIndex=1 onclick=button1_onclick(this) value=Button type=button name="button1"><INPUT style="POSITION: absolute; TOP: -100px; LEFT: -100px" id=layoutinfo type=hidden resourcectrlids="ITEM2;IBI_THEME_CSS" name="inputhidden1">
<xml id=focus_xmlelement><script type="text/xml"><rootxmlnode focoption="_FOC_NULL"><variables></variables>
<input_controls></input_controls><requests nextrequestsid="0">
<request requestid="0" targettype="iframe" targetname="graph1" sourcetype="typeFex" ibif_ex="/WFC/Repository/Apollo_Global/~ewoerle/JSChart.fex" ibiapp_app="Apollo_Global" activereport="0"></request></requests><other_bound_objects></other_bound_objects></rootxmlnode></script>
</xml></BODY>
<SCRIPT type=text/javascript>//confidential_id=IBI_loader
if(typeof doBeforeLoad === 'function'){doBeforeLoad();}function AdjustChildrenPosition(){
}
</SCRIPT>
</HTML>
<!-- cc kknt -->

Here is my sample fex I created for this.

  ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
GRAPH FILE CAR
SUM CAR.BODY.DEALER_COST
BY CAR.ORIGIN.COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART AS IBIFIL_TST
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT='WebFOCUS Report', $
-*TYPE = DATA,
-*	JAVASCRIPT=parent.button1_onclick(),
-*$
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
ENDSTYLE
END

In the HTML code I removed the path to my files and replaced with "...". You will need to update the paths accordingly to work for you.

Eric Woerle
8.1.05M Gen 913- Reporting Server Unix
8.1.05 Client Unix
Oracle 11.2.0.2

Posts: 750 | Location: Warrenville, IL | Registered: January 08, 2013

Ignored post by eric.woerle posted

Show Post

eric.woerle

Master

posted

Hide Post

The HTML page isn't pretty. I built this for me to test with So don't fault me for ugliness and bad coding

A Modal Overlay Drill option would be a good NFR by the way. I think you should open a request for one.

Eric Woerle
8.1.05M Gen 913- Reporting Server Unix
8.1.05 Client Unix
Oracle 11.2.0.2

Posts: 750 | Location: Warrenville, IL | Registered: January 08, 2013

Ignored post by eric.woerle posted

Show Post

David Briars

Master

posted

Hide Post

Tony gave a nice example of creating a modal window, upon a drill down request here:
http://forums.informationbuild...7007276?r=4887014476

It worked fine for me in testing.

We haven't used it in production yet, because everytime it looks like our users want modal, they change their minds, and go back to asking for/preferring the popup window.

Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster

Posts: 822 | Registered: April 23, 2003

Ignored post by David Briars posted

Show Post

Chad Miller

Member

posted

Hide Post

I have gotten the result that I am looking for through the use of multiple resources. One thing that is worthy to note is that I coded the .htm on my own without the help of the composer, but the same thing could be achieved using the composer. I also had the help of Bootstrap UI, JS, and JQuery. Here are my three files.

This is the first chart file that is being drilled FROM:


ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
BY CAR.ORIGIN.COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setUseSeriesShapes(true);
setMarkerSizeDefault(50);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
-SET &COUNTRY = N1
TYPE=DATA, COLUMN=N2, TARGET='modal', JAVASCRIPT=parent.getCountry(&COUNTRY), $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

This is the second chart that is drilled TO:


ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
WHERE CAR.ORIGIN.COUNTRY EQ &COUNTRY. (|FORMAT=A10).COUNTRY.QUOTEDSTRING;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 2
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

And this is the HTML file that host the first chart, and opens the second in a modal window.

< !DOCTYPE html>
<html>
<head>
	*NEED TO INCLUDE BOOTSTRAP UI FOR CLASSES TO WORK.
        *NEED TO INCLUDE A JAVASCRIPT LIBRARY
        *NEED TO INCLUDE A JQUERY LIBRARY
		
		$(document).ready(function(){
			var page = repositoryPathFex + "Common/~chad-mi/CarChart1.fex";
			$("#drilldown").css({ height: $("#drilldown").width() });
			$("#drilldown").attr('src', page);
		})
		
		function getCountry(COUNTRY) {
			var page = repositoryPathFex + "Common/~chad-mi/CarChart2.fex&COUNTRY=" + COUNTRY;
			$("#modal").css({ height: $("#modal").width() });
			$("#modal").attr('src', page);
			showModal();
		}

		function showModal() {
			$('#myModal').modal('show');
		}
	</script>
	<style>
		#drilldown {
			height: 550px;
			width: 1000px;
		}
		.clickable {
			cursor: pointer;
			*cursor: hand;
		}
	</style>
</head>
<body>
	<div class="clickable">
		<iframe id="drilldown" ></iframe>
	</div>
	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
	<div id="myModal" class="modal fade" role="dialog">
  		<div class="modal-dialog">
		    < !-- Modal content-->
		    <div class="modal-content">
			    <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">×</button>
			        <h4 class="modal-title">Modal Header</h4>
			    </div>
			    <div class="modal-body">
			        

Some text in the modal.</p>
			        <iframe id="modal" name="modal" style="left: 170px; top: 150px; width: 690px; height: 390px; position: absolute; z-index: 1;"></iframe>
			    </div>
			    <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			    </div>
		    </div>
		</div>
	</div>
</body>
</html>
< !-- cc nnfv -->

WebFOCUS 8105
Windows, All Outputs

Posts: 22 | Registered: May 14, 2015

Ignored post by Chad Miller posted

Show Post

David Briars

Master

posted

Hide Post

Thanks Chad. Very nice.

I'll make a note to look at the Bootstrap Modal Plugin, the next time my users want to take a look at a modal window.

Posts: 822 | Registered: April 23, 2003

Ignored post by David Briars posted

Show Post