Skip to main content

Exercise 1: Adding the Phone Table

Here is an outline of the steps for adding the Phone table to Zen Contacts:

  1. Add a tablePane component to HomePage.cls. Here are the requirements for the tablePane:

    • It contains a column that stores the ID of the PhoneNumber object. This column can be hidden.

    • It contains a column that displays the PhoneNumberType of the PhoneNumber object.

    • It contains a column that displays the Number of the PhoneNumber object.

    • It contains a column that displays the edit link.

    • It use the following query to retrieve its data: "SELECT ID, Number, PhoneNumberType From ZenTutorial.PhoneNumber Where Contact=?".

    • It uses a <parameter> element to provide the value of query parameter. See the note below for more information on <parameter>.

    • Note that the style information provided on HomePage.cls for the Contact table styles the Phone table.

  2. Add a displayPhones method to HomePage.cls. This method is invoked when the user clicks the show phones link on the Contact table. The method causes HomePage.cls to display the Phone table with all of the phone information for the selected contact. Here are the requirements for the method:

    • It is a client-side (JavaScript) method.

    • It accepts a single argument, representing the ID of the Contact object whose phones the table is to display.

    • It sets the value of the Phone table query parameter to the ID value passed to the method as an argument.

    • It “unhides” the Phone table. That is, it causes HomePage.cls to display the Phone table which is hidden by default.

Note:

For more information on using query parameters and the <parameter> element, read the Query Parameters section of the Zen Tables of Using Zen Components.

FeedbackOpens in a new tab