Skip to main content

Hiding, Displaying, and Loading Data into the Form

We want our page to be interactive. That is, we want it to respond to user actions. In particular, we want our form to have the following behavior:

  • By default the form is hidden on the page.

  • When a user clicks the edit link on a row of the Contact table, the page displays the form and the form fields display the data for the selected contact.

We implement this activity using client-side JavaScript functions. These functions will execute inside the browser in response to user actions on the page.

First, add the following client-side JavaScript function to HomePage.cls. Place it after the XDATA Contents block.


ClientMethod showContactForm(id) [ Language = javascript ]
{
  var controller = zenPage.getComponentById('contactData');
  controller.setProperty('modelId',id);
  var contactFormGroup=zenPage.getComponentById("contactFormGroup");
  contactFormGroup.setProperty('hidden',false);
}

The method does the following:

  1. Sets the value of the modelId attribute of the <controller> element to the id value passed into the method. This causes the controller component to load the data for the specified Contact object into the form.

  2. Sets the value of the hidden attribute of the <fieldSet> element to “false”. This causes the page to display the fieldSet component and its contents.

Next, change the default value of the <fieldSet> element's hidden attribute to “true”. This causes the page to hide the fieldSet component and its contents by default.

<fieldSet id="contactFormGroup" hidden="true" legend="Edit Contact">
</fieldSet>

Finally, note the <column> element that defines the tablePane edit link column. This <column> is already defined.


<column header="" width="5%" linkCaption="edit" 
     link="javascript:zenPage.showContactForm('#(%query.ID)#');"/>

The value of the link attribute defines the action that is taken when the user clicks the link. In this case, clicking the link executes showContactForm. Note the following about the link attribute:

  • It uses the zenPage object to invoke showContactForm.

  • It passes the ID value of the Contact object represented by the tablePane row to showContactForm. The runtime expression #(%query.ID)# inserts this value into the function call when the page is generated.

Note:

To learn more about the zenPage object, read %page and zenPage in the Zen Applications section of Developing Zen Applications.

To learn more about Zen Runtime Expressions, read Zen Runtime Expressions in the Zen Applications section of Developing Zen Applications.

FeedbackOpens in a new tab