There are two ways - via client or server method:

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

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

/// Load it in Samples Namespace
/// 
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen]
{
<page xmlns="http://www.intersystems.com/zenxmlns:demo="http://www.intersystems.com/zendemotitle="Combobox Test Page">
<hgroup>
<group id="group">
</group>
<spacer width="200"/>
<dataCombo id="dataCombo1"
label="dataCombo1" name="dataCombo1"
editable="true"
  unrestricted="true"
searchKeyLen="0"
choiceColumn="1"
valueColumn="2"
maxRows="10000"
displayColumns="1,4,3"
dropdownWidth="50.0em"
sql="SELECT Name,ID,Title,SSN FROM ZENDemo_Data.Employee ORDER BY Name "
columnHeaders="Name,SSN,Title">
</dataCombo>
</hgroup>
</page>
}

ClientMethod onloadHandler() [ Language = javascript ]
{
   zenSetProp('dataCombo1','value', 'Adam,Lisa H.' );
   ///zenSetProp('dataCombo','value', "Please make a choice." );
}

Method %OnAfterCreatePage() As %Status [ GenerateAfter = %OnAfterCreatePage ]
{
   Set tHolder = %page.%GetComponentById("group")
    set tComp = ##class(%ZEN.Component.dataCombo).%New()
    set tComp.id = "dataCombo"
set tComp.label = "dataCombo"
set tComp.value = "Alton,George D."
/// set tComp.value = "Please make a choice"
set tComp.maxRows="10000"
set tComp.dropdownWidth="50.0em"
set tComp.valueColumn="2"
set tComp.choiceColumn="1"
set tComp.sql = "SELECT Name,ID,Title,SSN FROM ZENDemo_Data.Employee ORDER BY Name"
If $IsObject(tComp) {
Do tHolder.%AddChild(tComp)
}
&js<zen('dataCombo1').executeQuery();>
    Quit $$$OK
}

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

To execute load it in Samples namespace:

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

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

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen]
{
<page xmlns="http://www.intersystems.com/zenxmlns:demo="http://www.intersystems.com/zendemotitle="Combobox Test Page">
<hgroup align="center" labelPosition="left">
<dataCombo id="dataCombo"
label="dataCombo" name="dataCombo"
editable="true"
unrestricted="true"
searchKeyLen="3"
dropdownWidth="20.0em">
</dataCombo>
<spacer width="10"/>
<button caption="Refresh" onclick="zenPage.Refresh();/>
<spacer width="10"/>
<button caption="Execute" onclick="zenPage.Execute();/>
</hgroup>
</page>
}

Method Execute() [ ZenMethod ]
{
    Set ctrl= ..%GetComponentById("dataCombo")
    Set ctrl.queryClass="ZENDemo.Data.Employee"
    Set ctrl.queryName="ListEmployees"
    &js<zen('dataCombo').executeQuery('ListEmployees')>
}

Method Refresh() [ ZenMethod ]
{
    Set ctrl= ..%GetComponentById("dataCombo")
    Set ctrl.queryClass=""
    Set ctrl.queryName=""
    &js<zen('dataCombo').executeQuery('')>
}

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

Filters work exactly this way (take a look at ZENTest.TableTest.cls in Samples namespace), but:

"Filtering works only if the <tablePane> is using an automatically generated SQL statement or an OnCreateResultSet callback"

I recently had a case where PDF and even Excel did not work in the Cache and the reason was the lack of Java on one of my computers.

Something to play with:

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

Class PET.ImageStudy Extends (%Persistent, %ZEN.DataModel.Adaptor) [ Inheritance = right ]
{

Property Code As %String [ Required ];

Property Name As %String [ Required ];

Relationship ImageFiles As PET.ImageFile [ Cardinality = children, Inverse = Study ];
-------------------------------------------------------------------------------------------------------------------------------------------------

Class PET.ImageFile Extends (%Persistent, %ZEN.DataModel.Adaptor) [ Inheritance = right ]
{

Property Code1 As %String [ Required ];

Property Name1 As %String [ Required ];

Property Image As %Stream.FileBinary;

Property Path As %String(MAXLEN = 100);

Relationship Study As PET.ImageStudy [ Cardinality = parent, Inverse = ImageFiles ];
--------------------------------------------------------------------------------------------------------------------------------------------------

Class PET.TestA Extends %ZEN.Component.page
{

Parameter APPLICATION;

Parameter PAGENAME;

Parameter DOMAIN;

XData Style
{
<style type="text/css">
</style>
}

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen]
{
<page xmlns="http://www.intersystems.com/zentitle="" >
<hgroup valign="top">
<pane paneName="Study" />
<pane paneName="Image" />
</hgroup>
</page>
}

XData Study [ XMLNamespace = "http://www.intersystems.com/zen]
{
<pane xmlns="http://www.intersystems.com/zentitle="" align="left"  width="400" valign="top">
<fieldSet legend="Study">
<dataController modelId="" id="ctrlParent" modelClass="PET.ImageStudy"/>
<form id="frmId" controllerId="ctrlParent" labelPosition="left">
 <tableNavigatorBar showPageSize="true" id="nav" tablePaneId="table" />
<vgroup valign="top">
<tablePane width="400px" id="table"
    tableName="PET.ImageStudy"
     maxRows="1000" pageSize="5"
     showZebra="true" useSnapshot="true"
     valueColumn="ID"
     onselectrow="zenPage.rowSelected(zenThis,which);">
    <column colName="ID" hidden="true"/>
   <column header="Code" colName="Code" width="30%" />
   <column header="Name" colName="Name" width="70%" />
</tablePane>
</vgroup> <spacer width="15px"/>
<vgroup valign="top">
<text label="Code:" id="Code" name="Code" dataBinding="Code" size="15" required="true"/>
<text label="Name:" id="Name" name="Name" dataBinding="Name" size="30" required="true"/>
<spacer height="10"/>
<hgroup>
<button caption="New" onclick="zenPage.newRecord();/>
<button caption="Save" onclick="zenPage.saveRecord();/>
<button caption="Cancel" onclick="zenPage.cancelRecord();/>
<button caption="Delete" onclick="zenPage.deleteRecord();/>
</hgroup>
</vgroup>
</form>
</fieldSet>
</pane>
}

XData Image [ XMLNamespace = "http://www.intersystems.com/zen]
{
<pane xmlns="http://www.intersystems.com/zentitle="" valign="top" >
<fieldSet legend="FileImage">
<dataController id="ctrlChildren1" modelClass="PET.ImageFilemodelId=""/>
<form id="frmIdChild1" controllerId="ctrlChildren1" labelPosition="left">
 <tableNavigatorBar showPageSize="true" id="nav1" tablePaneId="Table1" />
<hgroup>
<vgroup valign="top">
 <tablePane width="400px" id="Table1"
  tableName="PET.ImageFile"
     whereClause="Study=?" 
     maxRows="1000" pageSize="5" showZebra="true" 
     useSnapshot="true"
     valueColumn="ID"
     onselectrow="zenPage.rowSelectedChild1(zenThis);">
    <column colName="ID" hidden="true"/>
   <column header="Code" colName="Code1" width="10%" />
    <column header="Name" colName="Name1" width="20%"/>
<column colName="Path" header="Path" width="25%" hidden="true"/>
<column colName="Image" header="Image" width="45%" OnDrawCell="DrawCell"/>
<parameter value="zen('ctrlParent').getProperty('modelId');"/>
</tablePane>
</vgroup>
<spacer height="15px"/> <spacer width="15px"/>
<vgroup>
 <text label="Id:" id="Id" name="Id" readOnly="true" dataBinding="%id" hidden="true"/>
  <text label="Code:" id="Code1" name="Code1" dataBinding="Code1" size="15" required="true"/>
  <text label="Name:" id="Name1" name="Name1" dataBinding="Name1" size="30" required="true"/>
 <text label="File name:" id="Path" name="Path" dataBinding="Path" size="60" />
<button id="buttonF" caption="Browse" onclick="zenPage.fileSelect();"/>
  <spacer height="10"/>
 <image id="image" width="100" height="100"/>
 <spacer height="10px"/>
<hgroup>
<button caption="New" onclick="zenPage.newChildRecord1();/>
<button caption="Save" onclick="zenPage.saveChildRecord1();/>
<button caption="Cancel" onclick="zenPage.cancelChildRecord1();/>
<button caption="Delete" onclick="zenPage.deleteChildRecord1();/>
</hgroup>
</vgroup>
</hgroup>
</form>
</fieldSet>
</pane>
}

Method DrawCell(pTable As %ZEN.Component.tablePane, pName As %String, pSeed As %String) As %Status
{
  Set id=%query("ID")
    Set obj=##class(PET.ImageFile).%OpenId(id)
    If (obj)
    filename=%query("Path")
Set stream=##class(%FileBinaryStream).%New()
Do stream.LinkToFile(filename)
Set oid=stream.%Oid()
&html<<image src="%25CSP.StreamServer.cls?STREAMOID=#(..Encrypt(oid))#">
        
   Quit $$$OK
}

Method Image(id As %String) As %Status [ ZenMethod ]
{
    set img=..%GetComponentById("image")
    Set obj=##class(PET.ImageFile).%OpenId(id)
    If (obj)
    filename=obj.Path
    filename=$tr(filename,"\","/")
Set stream=##class(%FileBinaryStream).%New()
Do stream.LinkToFile(filename)
Set oid=stream.%Oid()
set img.streamId=oid
        
   Quit $$$OK
}

Method ShowImage(id As %String, filename As %String) As %Status [ ZenMethod ]
{
    set img=..%GetComponentById("image")
    filename=$tr(filename,"\","/")
Set stream=##class(%FileBinaryStream).%New()
Do stream.LinkToFile(filename)
set img.streamId=stream.%Oid()
   Quit $$$OK
}

ClientMethod fileSelect() [ Language = javascript ]
{
  var Dir='c:/InterSystems/TryCache/csp/broker/';
  var wildcard='';
  zenLaunchPopupWindow('%ZEN.Dialog.fileSelect.cls?Dir='+encodeURIComponent(Dir)+'&wildcard='+wildcard,'FileSelect','resizable,width=600,height=700');
}

ClientMethod onPopupAction(popupName, action, value) [ Language = javascript ]
{
 
  switch(popupName){
  case 'FileSelect':
  if (action == "ok") {
  var id zen('Table1').getValue();
zen('ctrlChildren1').setDataByName('Path',value);
  zen("Path").setValue(value);
var x=this.ShowImage(id,value);
zen('image').refreshContents();
  }
  }
}

ClientMethod resetTable1() [ Language = javascript ]
{
var table1 zen('Table1');
table1.setProperty('initialExecute',false);
table1.executeQuery(true);
zen('frmIdChild1').reset();
}

ClientMethod rowSelected(table, which) [ Language = javascript ]
{
 var controller zen('ctrlParent');
   if (controller.getModelId()==table.getValue()) { return; }
    else{
    if (('keypress' == which)||(zenRefreshMode==1)) {
        // defer this action in case the user is arrowing through aCode of items
        var id table.getValue();
        var action new Function("zen('ctrlParent').setProperty('modelId','"+id+"' );");
        zenSetDeferredAction(action,200);
     }
    else {
        var id table.getValue();
        controller.setProperty('modelId',id);
    
// Update the child section
var Table1 zen('Table1');
Table1.setProperty('parameters',1,id);
Table1.selectRow(-1);
zen('frmIdChild1').reset();
}
}
}

ClientMethod rowSelectedChild1(table1, which) [ Language = javascript ]
{
  var controller1 zen('ctrlChildren1');
    if (controller1.getModelId()==table1.getValue()) { return; }
    else {
    if (('keypress' == which)||(zenRefreshMode==1)) {
        // defer this action in case the user is arrowing through a Code of items
        var childid1 table1.getValue();
        var action new Function("zen('ctrlChildren1').setProperty('modelId','"+childid1+"' );");
        zenSetDeferredAction(action,200);
    }
    else {
        var childid1 table1.getValue();
controller1.setProperty("modelId",childid1);
var x=this.Image(childid1);
zen('image').refreshContents();
}
}
}

ClientMethod newRecord() [ Language = javascript ]
{
this.resetTable1();
zen('ctrlParent').setProperty('modelId','');
}

ClientMethod newChildRecord1() [ Language = javascript ]
{
var controller zen('ctrlParent');
var id controller.getModelId();

if ('' == id) {alert('Nothing selected!'+'\n'+'Please select row in Parent table!');}
else {zen('ctrlChildren1').setProperty('modelId','');}
}

ClientMethod saveRecord() [ Language = javascript ]
{
zen('frmId').save();
zen('table').executeQuery(true);
zen('ctrlParent').setProperty('modelId','');
this.resetTable1();
}

ClientMethod saveChildRecord1() [ Language = javascript ]
{
var controller zen('ctrlParent');
var id controller.getModelId();

if ('' == id) {alert('Nothing selected!'+'\n'+'Please select row in Parent table!');}
else {
zen('ctrlChildren1').setDataByName('Study',zen('ctrlParent').getProperty('modelId'));
zen('frmIdChild1').save();
zen('Table1').executeQuery(true);
zen('ctrlChildren1').setProperty('modelId','');
zen('Table1').selectRow(-1);
zen('frmIdChild1').reset();
}
}

/// cancel the current action
ClientMethod cancelRecord() [ Language = javascript ]
{
zen('table').selectRow(-1);
zen('frmId').reset();

var table1 zen('Table1');
table1.setProperty('initialExecute',true);
zen('Table1').selectRow(-1);
}

ClientMethod cancelChildRecord1() [ Language = javascript ]
{
zen('Table1').selectRow(-1);
zen('frmIdChild1').reset();
}

/// Delete current item from database
ClientMethod deleteRecord() [ Language = javascript ]
{
var controller zen('ctrlParent');
var id controller.getModelId();

if ('' == id) {alert('Nothing selected.');}
else if (confirm('Are you sure you want to delete the record?')){
controller.deleteId(id);
zen('frmId').reset();
zen('table').executeQuery(true);
this.resetTable1();
}
}

/// Delete current item from database
ClientMethod deleteChildRecord1() [ Language = javascript ]
{
var controller1 zen('ctrlChildren1');
var childid1 controller1.getModelId();

if ('' == childid1) {alert('Nothing selected.');}
else if (confirm('Are you sure you want to delete the record?')){
controller1.deleteId(childid1);
zen('frmIdChild1').reset();
zen('Table1').executeQuery(true);
}
}

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

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).