Keep the values of a complex type property in a Zen Page

Question

I am trying to keep the values of a Zen Page's property, that is an array of a complex type, but I am not having success. When I set an object in this array and the method when I am doing this finishes, the array is cleared. The same does not happen when I have, for instance, the property as an array of %String.

Here is the code from my Zen Page:

Class so1.Page Extends %ZEN.Component.page
{

Property ValueArray As array Of so1.ComplexType;

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<button caption="Fill Array" onclick="zenPage.FillArray()"/>
<button caption="Show Array" onclick="zenPage.ShowArray()"/>
</page>
}

Method FillArray() As %Status [ ZenMethod ]
{
    Set tComplexType = ##class(so1.ComplexType).%New()
    Set tComplexType.Name = $Case($Random(2)+1,1:"Value1",2:"Value2",3:"Value3")
    Set tComplexType.Value = ($Random(2)+1)*10
    Set tKey = ..ValueArray.Count()+1
    Set tSC = ..ValueArray.SetAt(tComplexType,tKey)
    &js<alert(#(..ValueArray.Count())#);>
    Quit tSC
}

Method ShowArray() As %Status [ ZenMethod ]
{
    &js<alert(#(..ValueArray.Count())#);>
    Quit $System.Status.OK()
}

}

Here is the code from my complex type class:

Class so1.ComplexType Extends %RegisteredObject
{

Property Name As %String;

Property Value As %String;

}

Testing the Zen Page, when I click on the "Fill Array" button, I set an object in the array of the ValueArray property. Then I display the array elements number. When I click on the "Show Array" button, I notice that the array of the ValueArray property does not have the object anymore.

Is there a way to keep the object in the array of the ValueArray property? Or the unique way to keep the values is saving them in a persistent object?

Thanks in advance.

Answer 1

The problem is that Zen doesn't know how to serialize your complex objects, so it can't represent the contents when you move between the client and server.

While you can make the objects serializable by extending %ZEN.Component.object, I would recommend that you investigate using the %ZEN.Auxiliary.jsonProvider component in your page to manage your object between the server and the client, in large part because it allows you to maintain a consistent object model across the client and the server, as well as making you more conscious of when you are making server calls, and where manipulation of the data should occur. In your example above, calling ShowArray() and FillArray() from the client is expensive because the entire page needs to be serialized back to the server. It can also make it tricky to work out when the data is being manipulated on the server and when it is being manipulated on the client, and which one should be performing updates.

My strong preference is to use Javascript to manipulate objects on the client, and then perform saves/updates of the entire structure when needed.