New post
AllAccepted answers
Vladimir Iliychev · Jul 19, 2019

Yes, this works if you have one level. But what about if you have second level-something like this:

{
    "statuses": [
        "SW7=ON, SW6=OFF, SW5=OFF, SW4=OFF, SW3=OFF, SW2=OFF, SW1=OFF",
        "Unique Printer ID and Fiscal Memory ID are set",
        "The fiscal memory is formatted"
    ],
    "warnings": [],
    "errors": [],
    "ok": true
}

Vladimir Iliychev · May 15, 2019

Hey Neerav,

From the very beginning I understand what you want, but I'm not sure that tablePane  is designed to use where clause with runtime expression  in the filters . That's why I pointed to you two works around. Here is the third one.

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

Class ZENMVC.MVCMasterDetail3 Extends %ZEN.Component.page
{

Property State As %ZEN.Datatype.string(ZENURL = "Home_State");

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<tableNavigator tablePaneId="table"/>
<tablePane id="table" width="700" tableName="ZENDemo_Data.Patient"
valueColumn="ID" maxRows="25">
<column colName="ID" width="5%"/>
<column colName="Name" width="30%" filterType="text"/>
<column colName="SSN" width="17%" filterType="text"/>
<column colName="MaritalStatus" width="18%" filterType="text"/>
<column colName="City" colExpression="Home_City" width="25%" filterType="text"/>
<column colName="State" colExpression="Home_State" width="10%" filterType="query"
filterQuery="SELECT DISTINCT Home_State FROM ZENDemo_Data.Patient ORDER BY Home_State"
 filterOp="="/>
</tablePane>
<button caption="Filter Value" onclick="zenPage.changeFilterValues();" />
</page>
}

ClientMethod changeFilterValues() [ Language = javascript ]
{
this.getFilterValues();
this.restoreFilters();
zen('table').executeQuery();
}

ClientMethod getFilterValues() [ Language = javascript ]
{
var table = this.getComponentById('table');
var state = table.getColumnFilters();
if (state == null) {
alert('Unable to get filter values!');
}
else {
// save filter state
this.filterState = state;
var p='State'
state[p]='CA'
///state[p]=this.State;
}
}

ClientMethod restoreFilters() [ Language = javascript ]
{
var table = this.getComponentById('table');

if (null == this.filterState) {
alert('No saved filter state found.');
}
else {
table.setColumnFilters(this.filterState);
}
}

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

Just replace 

state[p]='CA' 

with

state[p]=this.State;

Vlado

Vladimir Iliychev · May 14, 2019

Class ZENMVC.MVCMasterDetail2 Extends %ZEN.Component.page
{

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<tableNavigator tablePaneId="table"/>
<tablePane id="table" width="700" tableName="ZENDemo_Data.Patient"
valueColumn="ID" maxRows="1000">
<column colName="ID" width="5%"/>
<column colName="Name" width="30%" filterType="text"/>
<column colName="SSN" width="17%" filterType="text"/>
<column colName="MaritalStatus" width="18%" filterType="text"/>
<column colName="City" colExpression="Home_City" width="25%" filterType="text"/>
<column colName="State" colExpression="Home_State" width="10%" filterType="query"
filterQuery="SELECT DISTINCT Home_State FROM ZENDemo_Data.Patient ORDER BY Home_State"
 filterOp="="/>
</tablePane>
</page>
}

}
 

Vladimir Iliychev · May 13, 2019

Hi Neerav,

Here is an example:

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

Class ZENMVC.MVCMasterDetail1 Extends %ZEN.Component.page
{

Property State As %ZEN.Datatype.string(ZENURL = "Home_State") [ InitialExpression = "CA" ];

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<hgroup>
<spacer width="10"/>
<vgroup valign="top">
<combobox id="combobox" label="State" width="150" dropdownHeight="650"
  valueList="AL,AK,AZ,AR,CA,CO,CT,DE,FL,GA,HI,ID,IL,IN,IA,KS,KY,LA,ME,MD,MA,MI,MN,MS,MO,MT,NE,NV,NH,NJ,NM,NY,NC,ND,OH,OK,OR,PA,RI,SC,SD,TN,TX,UT,VT,VA,WA,WV,WI,WY"
  onchange="zenPage.notifyOnChange(zenThis.getValue());">
</combobox>
</vgroup>
<spacer width="30"/>
<dataController id="source" modelClass="ZENMVC.FormDataModel" modelId="#(%url.ID)#"/>
<vgroup>
<tableNavigatorBar tablePaneId="table" showPageSize="true"/>
<tablePane id="table" width="700"
tableName="ZENDemo_Data.Patient"
whereClause="Home_State=?"
valueColumn="ID"
value="#(%url.ID)#"
maxRows="1000">
<column colName="ID" width="25"/>
<column colName="Name" width="180" filterType="text"/>
<column colName="SSN" width="100" filterType="text"/>
<column colName="MaritalStatus" width="20" filterType="text"/>
<column colName="City" colExpression="Home_City" width="100" filterType="text"/>
<column colName="State" colExpression="Home_State" width="25" filterType="text" filterOp="="/>
<parameter value="#(%page.State)#"/>
</tablePane>
</vgroup>
</hgroup>
</page>
}

ClientMethod notifyOnChange(value) [ Language = javascript ]
{
this.State=value;
zen('table').executeQuery();
}

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

Vladimir Iliychev · Apr 2, 2019

I suggested to load in "Samples" namespace because the class ZENDemo.Data.Employee is  there ready,

and you can see the result  immediately.

If you change the sql query and the fields with yours , you can start it in any namespace.

BTW I use CACHE 2017.2 on Windows 7 system and MS Office 2007.

If you change  "xlsx" with "excel" (which means file extention ".xls")

Parameter DEFAULTMODE As STRING = "excel";

it should work wit MS Office 2003(Excel 1997-2003)

Vladimir Iliychev · Apr 2, 2019

Here is an example with ZenReports. The file opens with MS Excel 2007 directly without warning.

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

/// Test case for EXCEL Zen Report.
Class ZENApp.MyReportExcel1 Extends %ZEN.Report.reportPage
{

Parameter DEFAULTMODE As STRING = "xlsx";

Parameter EXCELMODE = "element";

Parameter XSLTMODE = "server";

/// 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'
sql="SELECT TOP 100 ID,Name,Title,Home_City,HireDate,Salary FROM ZENDemo_Data.Employee">
<group name='Name' breakOnField='Name'>
<element name='id' field='ID' excelName="id"/>
<element name='name' field='Name' excelName="Name"/>
<element name='title' field='Title' excelName="Title"/>
<element name='home_City' field='Home_City' excelName="Home_City"/>
<element name='hireDate' field='HireDate' excelName="HireDate"/>
<element name='salary' field='Salary' excelName="Salary"/>
</group>
</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'>
</report>
}

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

It should be loaded in "Samples" namespace. Don't remove the  ReportDisplay part.

Vladimir Iliychev · Mar 12, 2019

Hmm..I missed this line

   s rs=##class(%ResultSet).%New("%DynamicQuery:SQL")

-----------------------------------------------------------------------------------------------------------------------------------

ClassMethod ExtractXls1() [ ZenMethod ]
{
               Set file=##class(%Library.File).%New("D:\CacheExport\file.csv")
               Do file.Open("WSN")
               Do file.WriteLine("""UNP"",""DateS"",""TimeS"",""DateE"",""TimeE""")
        s rs=##class(%ResultSet).%New("%DynamicQuery:SQL")
     s sql="SELECT UNP,DateS,TimeS,DateE,TimeE FROM Kino_Data.FB"
     s sc=rs.Prepare(sql)
     s sc=rs.Execute(sql)
  while rs.Next() {
  s UNP=rs.Data("UNP")
  s DateS=rs.Data("DateS")
  s TimeS=rs.Data("TimeS")
  s DateE=rs.Data("DateE")
  s TimeE=rs.Data("TimeE")
            Do file.WriteLine(UNP_","_DateS_","_TimeS_","_DateE_","_TimeS)
               }
               d file.%Save()
               d file.Close()
               kill file
}

------------------------------------------------------------------------------------------------------------------------------------

Vladimir Iliychev · Mar 12, 2019

Hi  Ponnumani,

Thank you for sharing this example.

I allow myself to rewrite a little bit your example using SQL.

I think this is a little bit more universal in the sense that you don't have to know the detailed structure of a global.

ClassMethod ExtractXls1()
{
               Set file=##class(%Library.File).%New("C:\Users\Ponnumani\Desktop\Ponnumani Tasks\file.csv")
               Do file.Open("WSN")
               Do file.WriteLine("""Name"",""Address"",""Phone Number"",""Blood Group"",""Date""")
               s sql="SELECT Name,Address,PhoneNumber,BloodGroup,Date FROM User.samplexlsconversion"
     s sc=rs.Prepare(sql)
     s sc=rs.Execute(sql)
     while rs.Next() {
  s Name=rs.Data("Name")
  s Address=rs.Data("Address")
  s PhoneNumber=rs.Data("PhoneNumber")
  s BloodGroup=rs.Data("BloodGroup")
  s Date=rs.Data("Date")
                    Do file.WriteLine(""""_Name_""","_""""_Address_""","_""""_PhoneNumber_""","_""""_BloodGroup_""","_""""_Date_"""")
               }
               d file.%Save()
               d file.Close()
               kill file
}

Vladimir Iliychev · Jan 28, 2019

1. You omit semicolons - in javaScript every statement should finish with ";"

2. table.refresh will not work - it needs - (); in the end ,but in this case you

should use 

table.refreshContents();

3. Add one new method:

/// This client event, if present, is fired when the page is loaded.
ClientMethod onloadHandler() [ Language = javascript ]
{
var pageNomer=1;
var pageNo=zenPage.GetPage();
var table = this.getComponentById('relationTable');
table.setProperty('currPage',pageNo);
table.refreshContents();
}

And your GetPage() method will be:

ClassMethod GetPage() As %String [ ZenMethod ]
{
 If $d(%session.Data("currPage")){quit %session.Data("currPage")}
 else {quit 1}
}

Quit 1 is used when you start  the page for the first time and

%session.Data("currPage")) is not set yet

Vladimir Iliychev · Jan 18, 2019

1.You can use Parent-Child Relationships.

The parent Persistent Class would be MyPackage.Users  with all details for the users including current password.

The Child class MyPackage.Passwords will be for all  the  passwords(If you want you can include property IsCurrentPwd As %Boolean).

Something similar to Invoice an LineItems. 

2.If you prefer to work  directly with globals could be:

^MYUSERS("usr")=UserCode@UserName@CurrentPassword@.......

^MYUSERS("usr","pwd")=Password@IsCurrentPwd@

3.One way for Encription-In your Zen Page you need property

Parameter PASSWORDPATTERN = "3.32ANP";
 

ClassMethod %OnSubmit(pSubmit As %ZEN.Submit, ByRef pValues As %String) As %Status
{
if (pSubmit.%Action="save"){
set userName = pSubmit.%GetValue("userName")

set UserPassword = $SYSTEM.Encryption.SHA1Hash(pSubmit.%GetValue("pwd"))

......

quit $$$OK

}

Vladimir Iliychev · Jan 4, 2019

If you want to use pure MUMPS to transfer your data from global ^Person to persistent class- let's say  ^MyClass.Person, 

 so you can manipulate them like Object Scripts and using SQL you have to:

^PERSON(1) = "MIKE|MALE|DEVELOPER"

^PERSON(2) = "SCOTT|MALE|MASTER PROGRAMMER"

1.Create persistent class  ^MyClass.Person

Class MyClass.Person Extends %Persistent
{
Property Name As %String;
Property Gender As %String;
Property Role As %String;

}

2. Use routine something like this:

c1 s n=""
1 s n=$o(^Person(n)) q:n=""
s a=^Person(n) f i=1:1:3 s a(i)=$p(a,"|",i)
s ^MyClass.PersonD(n)=$LB("",a(1),a(2),a(3))
g 1

 or if you prefer a little be more clear

c2 s n=""
2 s n=$o(^Person(n)) q:n=""
s a=^Person(n) s Name=$p(a,"|",1),Gender=$p(a,"|",2),Role=$p(a,"|",3)
s ^MyClass.PersonD(n)=$LB("",Name,Gender,Role)
g 2

3.Of course If you have indices like properties in the persistent class, the things will be a little more complicated.

for example:

Property Name As %String;

Index NameIndex On Name;

you have to create and global  ^MyClass.PersonI  with structure like:

 ^MyClass.PersonI ("NameIndex"," "_Name,n)=""

c3 s n=""
3 s n=$o(^Person(n)) q:n=""
s a=^Person(n) s Name=$p(a,"|",1),Gender=$p(a,"|",2),Role=$p(a,"|",3)
s ^MyClass.PersonD(n)=$LB("",Name,Gender,Role)
s ^MyClass.PersonI("NameIndex"," "_Name,n)=""
g 3

Vladimir Iliychev · Dec 7, 2018

The main reason I use GOTOs instead of FOR loops is that,

when I use  GOTOs  I can come back (or enter) at any point of the loops,

while in the case with FOR loops  you can not start from the middle (that is, from any point in the loop).

In addition, how many operators do you count in Method A and Method B?

--------------------------------------------------------------------------------------------------------------------------------------------

ClassMethod TestA() As %String [ ZenMethod ]
{
   set under2 = ""
   for {
        set under2 = $order(^checker(under2))
        quit:under2=""
   set Name = ""
      for {
        set Name = $order(^checker(under2, Name))
        quit:Name=""
        set DateBirth = ""
        for {
             set DateBirth = $order(^checker(under2,Name,DateBirth))
             quit:DateBirth=""
             }
           }
        } 
}
ClassMethod TestB() As %String [ ZenMethod ]
{
       s (under,name,dob)=""
1      s under=$o(^checker(under)) q:under="" 
2      s name=$o(^checker(under,name)) g:name="" 1
3      s dob=$o(^checker(under,name,dob)) g:dob="" 2
       g 3   
}

--------------------------------------------------------------------------------------------------------------

Vladimir Iliychev · Nov 20, 2018

One modified example from "Samples" names. 

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

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

Parameter APPLICATION = "ZENTest.TestApplication";

Parameter PAGENAME = "DataGrid Test";

Parameter DOMAIN = "ZENTEST";

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

#dataGrid {

width: 100%;

height: 500px;

}

</style>
}

/// 
/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" xmlns:demo="http://www.intersystems.com/zendemo" title="">
<demo:demoTitle id="title" title="Zen DataGrid Test Page Using The Alternate JSON SQL Provider widget" category="Zen Test Suite" />
<locatorBar id="locator">
<locatorLink caption="Home" title="Home page" href="ZENDemo.Home.cls"/>
<locatorLink caption="Test Suite" title="Test Suite" href="ZENTest.HomePage.cls"/>
<locatorLink caption="DataGridTest" title="DataGrid Test Page" />
</locatorBar>
<titleBox title="Zen DataGrid Test Page" 
subtitle="Use this page to test the various DataGrid box controls." />
<spacer height="25"/>
<altJSONSQLProvider id="json" />
<vgroup width="100%" height="100%">
<hgroup enclosingStyle="background:#F0F0F0;">
<spacer width="600"/>
<label value="Filter current results : "/>
<image src="deepsee/ds2_magnify_18.png" onclick="zenPage.SetFilter(zen('txtFilter'));"/>
<text id="txtFilter" onchange="zenPage.SetFilter(zenThis);"/>
</hgroup>
 <dataGrid pageSize="20"  id="dataGrid" pagingMode="client" controllerId="json" sortMode="client" selectMode="cells" onaction="zenPage.fireAction(row,name,value);" onchangecell="return zenPage.fireChangeCell(value);" ongetlookupdata="return zenPage.fireLookupData();" >
 <columnDescriptor caption="ID" type="string" readOnly="false"/>
 <columnDescriptor caption="Age" type="string" readOnly="false"/>
 <columnDescriptor caption="DOB" type="string" readOnly="false"/>
 <columnDescriptor caption="FavoriteColors" type="lookup" readOnly="false" ongetlookupspec="return zenPage.fireLookupDataFavColors();"/>
 <columnDescriptor caption="Name" type="string" readOnly="false"/>
 <columnDescriptor caption="SSN" type="string" readOnly="false"/>
 <columnDescriptor caption="Spouse" type="lookup" readOnly="false"/>
 <columnDescriptor caption="Home_City" type="string" readOnly="false"/>
 <columnDescriptor caption="Home_State" type="lookup" readOnly="false" ongetlookupspec="return zenPage.fireLookupDataState('Home');"/>
 <columnDescriptor caption="Home_Street" type="string" readOnly="false"/>
 <columnDescriptor caption="Home_Zip" type="string" readOnly="false"/>
 <columnDescriptor caption="Office_City" type="string" readOnly="false"/>
 <columnDescriptor caption="Office_State" type="lookup" readOnly="false" ongetlookupspec="return zenPage.fireLookupDataState('Office');"/>
 <columnDescriptor caption="Office_Street" type="string" readOnly="false"/>
 <columnDescriptor caption="Office_Zip" type="string" readOnly="false"/>
 </dataGrid>
 <hgroup enclosingStyle="background:#F0F0F0;">
 <label value="Show all Names starting with : "/>
 <combobox id="combobox" label="combobox"
onchange="zenPage.changeQuery(zenThis.getValue());"
editable="false">
<option value="" text="" />
<option value="A" text="A" />
<option value="B" text="B"/>
<option value="C" text="C" />
<option value="Z" text="Z" />
</combobox>
 <spacer width="10"/>
 <button caption="Show All" onclick="zenPage.changeQuery('');"/>
 </hgroup>
</vgroup>
</page>
}

ClientMethod SetFilter(pTextBox As %ZEN.Component.text) [ Language = javascript ]
{
zen('dataGrid').setProperty('filterKey',pTextBox.getValue());
zen('dataGrid').renderContents();
}

ClientMethod fireChangeCell(value) [ Language = javascript ]
{
var cCol=zen('dataGrid').getProperty('currColumn');
var cRow=zen('dataGrid').getProperty('currRow');
var cPage=zen('dataGrid').getProperty('currPage');
return value;
}

ClientMethod fireLookupData() [ Language = javascript ]
{
var cCol=zen('dataGrid').getProperty('currColumn');
if (cCol==4) return zenPage.fireLookupDataFavColors(); //Favorite Colors
if (cCol==9) return zenPage.fireLookupDataState('Home'); //Home_State
if (cCol==13) return zenPage.fireLookupDataState('Office'); //Office_State
}

ClientMethod fireLookupDataFavColors() [ Language = javascript ]
{
//var values = ['Red','Orange','Yellow','Green','Blue','Purple','Black','White'];
var FavColString = zenPage.GetFavoriteColors();
var values = FavColString.split(',');
return values
}

Method GetFavoriteColors() As %String [ ZenMethod ]
{
Quit "Red,Orange,Yellow,Green,Blue,Purple,Black,White"
}

ClientMethod fireLookupDataState(what) [ Language = javascript ]
{
var StatesString;
if (what=='Home') StatesString = zenPage.GetStates(true);
else  StatesString = zenPage.GetStates(false);
var values = StatesString.split(',');
//var values = ['MA','NY','OH'];
return values
}

Method GetStates(Home As %Boolean = 1) As %String [ ZenMethod ]
{
set sql="select distinct("_$s(Home=1:"Home",1:"Office")_"_State) as State from Sample.Person order by "_$s(Home=1:"Home",1:"Office")_"_State "_$s(Home=1:"asc",1:"desc")
Set rs=##class(%ResultSet).%New()
do rs.Prepare(sql)
do rs.Execute()
Set StatesString=""
While (rs.Next()) {
Set StatesString=StatesString_rs.Get("State")_","
}
do rs.Close()
Set:$e(StatesString,$l(StatesString))="," StatesString=$e(StatesString,1,$l(StatesString)-1)
Quit StatesString
}

ClientMethod fireAction(row, name, value) [ Language = javascript ]
{
alert(row + ' : ' + name + ' : ' + value + ' : ' + zen('dataGrid').getCurrPage());
}

ClientMethod changeQuery(namestartswith) [ Language = javascript ]
{
var ret = zenPage.ChangeQueryOnServer(namestartswith);
zen('json').reloadContents();
}

Method ChangeQueryOnServer(namestartswith As %String = "") As %Boolean [ ZenMethod ]
{
set %page.%GetComponentById("json").sql = "select * from sample.person "_$s(namestartswith'="":"where name %startswith '"_namestartswith_"'",1:"")_" order by name"
quit 1
}

/// 
/// This callback is called after the server-side page
/// 
/// object and all of its children are created.<br/>
/// 
/// Subclasses can override this to add, remove, or modify
/// 
/// items within the page object model, or to provide values
/// 
/// for controls.
Method %OnAfterCreatePage() As %Status
{
Set provider = ..%GetComponentById("json")
Set provider.sql = "select * from sample.person order by name"
Quit $$$OK
}

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

Vladimir Iliychev · Nov 7, 2018

An old fashioned design:

ClassMethod TestA()
{
        s  (under,name,dob)=""
1      s under=$o(^checker(under)) g:under="" end g:under'="under2" 1
2      s name=$o(^checker(under,name)) g:name="" 1
3      s dob=$o(^checker(under,name,dob)) g:dob="" 2
         s dob1=$zdateh(dob,15)
         if (+$h-dob1)>730 {w name,?30,dob}
         g 3
end q
}

But you should take into account leap years.

In the common case:

ClassMethod TestB(underage,daysofyears)
{
       s (under,name,dob)=""
1    s under=$o(^checker(under)) g:under="" end g:under'=underage 1
2    s name=$o(^checker(under,name)) g:name="" 1
3    s dob=$o(^checker(under,name,dob)) g:dob="" 2
      s dob1=$zdateh(dob,15)
      if (+$h-dob1)>daysofyears {w name,?30,dob}
      g 3
end q
}

Vladimir Iliychev · Sep 10, 2018

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/zen" xmlns:demo="http://www.intersystems.com/zendemo" title="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
}

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

Vladimir Iliychev · Jun 29, 2018

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/zen" xmlns:demo="http://www.intersystems.com/zendemo" title="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('')>
}

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

Vladimir Iliychev · Jun 27, 2018

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/zen" title="" >
<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/zen" title="" 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/zen" title="" valign="top" >
<fieldSet legend="FileImage">
<dataController id="ctrlChildren1" modelClass="PET.ImageFile" modelId=""/>
<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) { 
    s 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) { 
    s filename=obj.Path
    s 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")
    s 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);
}
}

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