Here is a similar example:

===============================================================================================

/// Created using the page template: Default
Class VICS.Reports.MZenR2 Extends %ZEN.Component.page
{

/// Class name of application this page belongs to.
Parameter APPLICATION;

/// Displayed name of this page.
Parameter PAGENAME = "MZenR2";

/// Domain used for localization.
Parameter DOMAIN;

/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
</style>
}

/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen]
{
<page xmlns="http://www.intersystems.com/zentitle="">
<button caption="Run Report" onclick="zenPage.runReport();/>
</page>
}

/// This class method callback is called just before the server-side page
/// object is created.
ClassMethod %OnBeforeCreatePage() As %Status
{
For = 1:1:9 {
Set list1 = $LB("John","Jack","Jim","Joanne","Jen","Jill","Paul","Will","Roger")
Set list2 = $LB("Adams","Anderson","Allen","Nelson","Jenkins","Rotterman","Emerson","Wilson","Jackson")
FirstName=$LG(list1,+i)
LastName=$LG(list2,+i)
Name=FirstName_" "_LastName
Company="Alpha "_i
Email=FirstName_"123@gmail.com"
PhoneWork="(111) 222 333"_i
Note="aaaaaaaa"_i
Set ^testMprint1(i) = Name_"|"_Company_"|"_Email_"|"_PhoneWork_"|"_Note_"|"
}
Quit $$$OK
}

ClientMethod runReport() [ Language = javascript ]
{
  var x zenPage.launchPopupWindow(zenLink('VICS.Reports.MReportPDF2.cls'));
}

}
--------------------------------------------------------------------------------------------------------------------------------------------

Class VICS.Reports.MReportPDF2 Extends %ZEN.Report.reportPage
{

Parameter DEFAULTMODE = "pdf";

/// XML that defines the contents of this report.
XData ReportDefinition [ XMLNamespace = "http://www.intersystems.com/zen/report/definition]
{
<report xmlns="http://www.intersystems.com/zen/report/definition"
name='myReport' call="CreateXML">

</report>
}

XData ReportDisplay [ XMLNamespace = "http://www.intersystems.com/zen/report/display]
{
<report xmlns="http://www.intersystems.com/zen/report/display
  name='myReport' title='HelpDesk Sales Report' style='standard'>
  <pagemaster>
    <masterreference masterReference="first" pagePosition="first">
      <document width="8.5in" height="11in" marginLeft="1.25in" 
        marginRight="1.25in" marginTop="1.0in" 
        marginBottom="1.0in" headerHeight="2.0in"></document>
      <pageheader>
        <class="banner1">Mumps Zen Report</p>
      </pageheader>
    </masterreference>
    <masterreference masterReference="rest" pagePosition="rest">
      <document width="8.5in" height="11in" marginLeft="1.25in" 
        marginRight="1.25in" marginTop="1.0in" 
        marginBottom="1.0in" headerHeight=".75in"></document>
      <pageheader>
        <table orient="col" layout="fixed" width="6in">
          <item style="text-align:left" value="Mumps Zen Report" />
          <item style="text-align:right" special="page-number-of" />
        </table>
      </pageheader>
    </masterreference>
  </pagemaster>
 <body >
<!-- MAIN REPORT GROUP -->
<group name="PersonGroup">
<table orient="row" width="3in" class="table4" altcolor="#DFDFFF">
        <item field="Name" width="2in">
          <caption value="Name:" width="2in"/>
        </item>
        <item field="Company" width="2in">
          <caption value="Company:" width="2in"/>
        </item>
         <item field="Email" width="2in">
          <caption value="Email:" width="2in"/>
        </item>
        <item field="PhoneWork" width="2in">
          <caption value="Work Phone:" width="2in"/>
        </item>
        <item field="Note">
          <caption value="Note:"/>
        </item>
      </table>
      </group>
 </body>
</report>
}

ClassMethod CreateXML()
{
    n=""
1 n=$o(^testMprint1(n)) q:n=""
Name=$p(^testMprint1(n),"|",1)
Company=$p(^testMprint1(n),"|",2)
Email=$p(^testMprint1(n),"|",3)
PhoneWork=$p(^testMprint1(n),"|",4)
Note=$p(^testMprint1(n),"|",5)
    !,"<PersonGroup>"
!,"<Name>",Name,"</Name>"
!,"<Company>",Company,"</Company>"
!,"<Email>",Email,"</Email>"
!,"<PhoneWork>",PhoneWork,"</PhoneWork>"
!,"<Note>",Note,"</Note>"
    !,"</PersonGroup>"
    1
}

}
=======================================================================================

You can use the component %ZEN.Dialog.conformationDialog if you have newer version of Cache.

Something like this:

================================================================================

Class ZENTest.ConformationDialog Extends %ZEN.Component.page
{

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen]
{
<page xmlns="http://www.intersystems.com/zen>
<button caption="Delete" onclick="zenPage.showPopupWindow();"/>
</page>
}

ClientMethod showPopupWindow() [ Language = javascript ]
{
zenLaunchPopupWindow('%ZEN.Dialog.confirmationDialog.cls','confirmationDialog','resizable,width=380,height=180');
}

Method %OnAfterCreatePage() As %Status
{
%session.Data("Confirmation","Messages",1)="DELETING!"
%session.Data("Confirmation","Messages",2)="You are about to delete this file!"
%session.Data("Confirmation","Messages",3)="Proceed?"
%session.Data("Confirmation","btnOk",1) = "Yes"
%session.Data("Confirmation","btnCancel",1) = "No"
Quit $$$OK
}

ClientMethod onPopupAction(popupName, action, value) [ Language = javascript ]
{
switch(popupName) {
case 'confirmationDialog':
if (action='OK'){
if (value=true) {
alert('The answer is Yes!');
//do something
}
}
break;
}
}

}
================================================================================

Just call this page from your csp page.

This is a standard procedure to traverse (iterate over) data stored within a global.

Let’s say this is a global tree(the root is on the top). With

  1. s a=$o(^data(a)) g:a=”” q

we select the first index (a1) on the first level.

  1. s b=$o(^data(a,b)) g:b=”” 1

we select the first index (b1) on the second level.

  1. s c=$o(^data(a,b,c)) g:c=”” 2

we select the first index(c11) on the third level.

                g 3

going back to line 3, we select next indexes (c12 …c1m).

When c=”” we go to line 2 and select the next index (b2) on level 2

and again go to line 3 to iterate through the  third level-c21,c22 …cl etc.

When we finish the second level (b1,b2…bn) and b=””,

 we come back to line 1 and select the next index(a2 - not shown on the picture) on the first level etc.

The picture shows one tree but in common case this is forest of trees.(a1,a2……ak).

This is a standard procedure to traverse (iterate over) data stored within a global.

Let’s say this is a global tree(the root is on the top). With

  1. s a=$o(^data(a)) g:a=”” q

we select the first index (a1) on the first level.

  1. s b=$o(^data(a,b)) g:b=”” 1

we select the first index (b1) on the second level.

  1. s c=$o(^data(a,b,c)) g:c=”” 2

we select the first index(c11) on the third level.

                g 3

going back to line 3, we select next indexes (c12 …c1m).

When c=”” we go to line 2 and select the next index (b2) on level 2

and again go to line 3 to iterate through the  third level-c21,c22 …cl etc.

When we finish the second level (b1,b2…bn) and b=””,

 we come back to line 1 and select the next index(a2 - not shown on the picture) on the first level etc.

The picture shows one tree but in common case this is forest of trees.(a1,a2……ak).

Method Function(a1 As %String, b1 As %String, c1 As %String) As %String [ ZenMethod ]
{
(a1'="")&(b1'="")&(c1'="") a=a1,b=b1,c=c1 1
(a,b,c)=""
1 a=$o(^data(a)) g:a="" g:a=a1 2
2 b=$o(^data(a,b)) g:b="" g:b=b1 3
3 c=$o(^data(a,b,c)) g:c="" g:c=c1 q
    g 3
q a1=a,b1=b,c1=c
    (a1_"|"_b1_"|"_c1_"|")
}

It could be something similar to this:

Method Function(a1 As %String, b1 As %String, c1 As %String) As %String [ ZenMethod ]
{
   i (a1'="")&(b1'="")&(c1'="") a=a1,b=b1,c=c1 1
   s (a,b,c)=""
1 a=$o(^data(a)) g:a="" g:a=a1 2
2 b=$o(^data(a,b)) g:b="" g:b=b1 3
3 c=$o(^data(a,b,c)) g:c="" g:c=c1 q
q a1=a,b1=b,c1=c
    (a1_"|"_b1_"|"_c1_"|")
}

You have to make some changes especially on the first line to meet your needs.

<listBox id="listBox1" label="listBox1" listWidth="150px" 
 onchange="zenPage.notifyOnChange1(zenThis);">
  <option value="1" text="Apple" />
  <option value="2" text="Banana"/>
  <option value="3" text="Cherry" />
</listBox>
<listBox id="listBox2" label="listBox2" listWidth="150px" 
 onchange="zenPage.notifyOnChange2(zenThis);">
  <option value="1" text="Apple" />
  <option value="2" text="Banana"/>
  <option value="3" text="Cherry" />
</listBox>
<text id="currValue" label="Value:"/>
<text id="currText" label="Text:"/>
</page>
}

ClientMethod notifyOnChange1(comp) [ Language = javascript ]
{
  zen('currValue').setValue(comp.getValue());
  zen('currText').setValue(comp.getProperty('text'));
}

Method notifyOnChange2(comp As %ZEN.Component.object) [ ZenMethod ]
{
  Do ..%SetValueById("currValue",comp.value)
  Do ..%SetValueById("currText",comp.text)
}

Replace 

onclick="zenPage.Testing()" 

with: /you were missing the semicolons/

onclick="zenPage.showFileSelectionWindow();"

and add this two methods:

/// Demonstration of launching a file selector window.
ClientMethod showFileSelectionWindow() [ Language = javascript ]
{
zenLaunchPopupWindow('%ZEN.Dialog.fileSelect.cls','FileSelection','status,scrollbars,resizable,width=500,height=700');
}

/// This client event, if present, is fired when the a popup page
/// launched from this page fires an action.
ClientMethod onPopupAction(popupName, action, value) [ Language = javascript ]
{
switch(popupName) {
case 'FileSelection':
if (action=='ok');{
alert('My File is:'value);
///Do something...
}
break;
}
}