Displaying the Phone Numbers

We have to do a bit more work to display the phone numbers on our Zen page than we had to do to display the address. This is because we designed the database schema to store the phone numbers separately from the contacts. In order to display the phone numbers we must add another Zen GUI component like we did for the addresses. In addition, however, we must provide the logic for retrieving the phone numbers and displaying them on the page. The code generated by the wizard will not automatically handle the phone numbers.

Here is a summary of the changes we must make:

• Add a Zen GUI component to display the phone numbers.

• Add a method that retrieves the phone numbers for a contact based on the ID value for the contact. The method must then update the Zen GUI component with the phone number data.

• Add a line of code to the wizard generated getRecord method that invokes our new method. The getRecord method executes when the user clicks a link on the search table.

Here are the steps:

1. First, add the following <textarea/> element to the XDATA Contents block of the Zen page. Place it after the <text/> elements that you added to display the address.

   
   <textarea id="PhoneNumbers" name="PhoneNumbers"  label="PhoneNumbers" title="Enter a value"  cols="25" height="23" />
   
   

   

2. Next, add the following method to ContactForm. Place it anywhere in the class definition.

   
   Method GetPhoneNumbers(id As %String) [ ZenMethod ]
   {
    Set tContact = ##class(ContactDB.Contact).%OpenId(id)
    Set PhoneNumbers=""
    If $IsObject(tContact) {
      
      for i=1:1:tContact.PhoneNumbers.Count()
     {
      if (PhoneNumbers '= "")
      {
      Set PhoneNumbers 
       =PhoneNumbers_$$$NL_tContact.PhoneNumbers.GetAt(i).Type_
      ":"_tContact.PhoneNumbers.GetAt(i).Number
       }
      else
      {
       Set PhoneNumbers 
        =PhoneNumbers_tContact.PhoneNumbers.GetAt(i).Type_
        ":"_tContact.PhoneNumbers.GetAt(i).Number 
       }
     }
   
      }
    Do %page.%SetValueById("PhoneNumbers",PhoneNumbers)
   }
   

   

   There are several interesting things to note about this method:

   • The code is ObjectScript (COS). This is InterSystems' proprietary scripting language.

   • The method executes on the Caché server. This is signified by the [Zen Method] tag. In this case, the method is invoked by a method executing on the client (Web browser).

   • The method retrieves the phone numbers associated with a particular contact. The contact is determined by the id passed to the method from the client. The method puts the phone numbers into a space delimited string.

   • The last line of the method uses the %page special variable to write the string containing the phone numbers to our <textarea/> on the Web page.

3. Finally, we must add a line of code to the getRecord method. This method was originally generated by the Zen Form wizard. Find getRecord in the ContactForm definition and add the following line of code to the end of the method body.

   
    zenPage.GetPhoneNumbers(idText);
    
   

   

   This line of code uses the zenPage special variable to invoke our GetPhoneNumbers method; passing it the id of the contact to be displayed on the form.

   With the new line of code, the method looks like this.

   
   ClientMethod getRecord(id As %Integer) As %Status [ Language = javascript ]
   {
    var controller = zen('mvc');
    controller.setModelId(id);
    var idText = id.toString();
    zenPage.MyId = idText;
    
    var id = zen('ID');
    id.setValue(idText);
    
    //line added to support display of phone numbers
    zenPage.GetPhoneNumbers(idText);
   }
   
   

   

   Note the following about this method:

   • The code is JavaScript. Note the [Language = javascript] tag.

   • The method executes inside on the client (Web browser). Note the ClientMethod keyword in the method declaration.

   • It invokes the server-side GetPhoneNumbers method using the zenPage special variable.

   • The method is invoked by the user interacting with the form, for example, double-clicking a contact id on the search table.