Hiding, Displaying, and Loading Data into the Form

We want the form component to display the following behavior:

• By default the form is hidden on the page.

• When the user selects a row of the Persons table, the page displays the form and loads the data for the selected PERSON into the form controls.

Remember that the tablePane component on PersonPage.cls already contains the following attributes:

onselectrow ="zenPage.displayForm(zenThis);"
valueColumn="ID"

Note the following about this code:

• The onselectrow attribute designates a JavaScript function named displayForm to handle row selection events. This JavaScript function executes in the web browser and not in Caché.

• The code uses the zenPage and zenThis special variables. The zenPage variable represents the page object in client-side code while zenThis represents page and other component objects in client-side code.

• The valueColumn attribute designates a column of the selected row as the value of the component. The component's getValue function returns the value in this column. In this case the column holds the object ID of MVFILE.PERSON object.

Add the following JavaScript event-handling function to PersonPage.cls. The function executes when the user selects a row on the tablePane. Be sure to place the method out-side of the XDATA Contents or XDATA Style blocks.

ClientMethod displayForm(table) [ Language = javascript ]
{
 //retrieve id column of selected row
 var id = table.getValue();
            
 //set controller to selected person
 var controller = zenPage.getComponentById('personData');
 controller.setProperty('modelId',id);
            
 //display form 
 var contactFormGroup=zenPage.getComponentById('personForm');
 contactFormGroup.setProperty('hidden',false);
}

Note the following about this code:

• It includes the ClientMethod keyword. This specifies that the function is a client-side function that executes in the user's browser and not on the Caché server.

• It retrieves the object ID of the selected MVFILE.PERSON using the getValue function of the tablePane component.

• It sets the value of the modelId attribute of the dataController component to the object ID of the selected MVFILE.PERSON object.

• It sets the value of the hidden attribute of the form component to “false”. This allows the page to display the form.