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/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);
}
}

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

Perhaps you can stand on the basis of SchedulePane component.

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
{
s %session.Data("Confirmation","Messages",1)="DELETING!"
s %session.Data("Confirmation","Messages",2)="You are about to delete this file!"
s %session.Data("Confirmation","Messages",3)="Proceed?"
s %session.Data("Confirmation","btnOk",1) = "Yes"
s %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.

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

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

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

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

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

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