In PMF 522 most pop-up windows were removed from the application. In their place we use a technology called ModalBox. This is a tool that enables the application to open a virtual window without creating another instance of the browser that can be lost behind other windows. These virtual windows are modal to the application, and can be coded to either use only a cancel or close button, or click out of the virtual window to close.



For this example we will need to use two focexec's. One is the main calling report, and the second is a small response report. In example1 you will find much of the standard PMF code involved throughout the framework, co-mingled with a standard TF CAR. There is a drilldown to a JavaScript function on the CAR column which calls another JavaScript function, which sends a single value of a CAR to the function myModalForm().



To get this working, there is some environment setup in the HTML. Specifically there are 4 library includes to the ModalBox technology; modalbox.js, pmf_lib.js, scriptaculous.js, and prototype.js. For this article we will stick with what we see, and explain the rest in the next article.



In example1.fex the sample function we are creating, myModalForm(), contains only one statement which calls the openModalForm() function, as located in pmf_lib.js, sending 4 parameters. The first parameter is the FOCEXEC you want to drill to, which we have named example2.fex. The second parameter won’t be used for this example. The third parameter is the information to be sent to the drill FOCEXEC. The fourth, and of most interest, is the ModalBox parameter block. With this block, you can change height, width, and title, and it will reflect in your example.



Try to make some changes to the options, or if you're motivated, you could add one that is not in use from the doc on their website for the tool (http://wiki.github.com/okonet/modalbox/methods-reference)



The next issue will move into more of the where, why, and how of our calls to explain a bit more in depth. Post replies to any and all questions about this or any other topic you would like to see in future Developer Series postings.

example1.fex:

-INCLUDE A_DEFAULTS

TABLE FILE CAR
PRINT CAR
BY COUNTRY

ON TABLE HOLD AS CAR_RPT FORMAT HTMTABLE

ON TABLE SET STYLE *
COLUMN=CAR,
JAVASCRIPT=myModalForm(CAR),
$
ENDSTYLE

END
-HTMLFORM BEGIN



<script language='javascript'>
var ibiOptions = new Array("multidrill","cgipath","ibicookie");


<script src='/ibi_html/javaassist/nls.js'>
<script src='/ibi_html/javaassist/ibi/html/js/ibigbl.js'>
<script src='/ibi_html/javaassist/ibi/html/maint/browserSniffer.js'>
<script src='/approot/!IBI.AMP.PMF_DIR;/js/prototype.js'>
<script src='/approot/!IBI.AMP.PMF_DIR;/pmf_lib.js'>
<script src="/approot/mainstreet/js/scriptaculous.js" >
<script src="/approot/mainstreet/js/modalbox.js">

<script>
function myModalForm(carType)
{
openModalForm("example2", "", "&|CAR_TYPE=" + carType, {height:320,width:600,title:'Car Detail'});
}



!IBI.FIL.CAR_RPT;

-HTMLFORM END

example2.fex

-INCLUDE A_DEFAULTS

-DEFAULTH &CAR_TYPE = 'JAGUAR' ;

TABLE FILE CAR

HEADING
"Car info for &CAR_TYPE"

PRINT
MODEL
SEATS

WHERE (CAR EQ '&CAR_TYPE') ;

END