In this step, you will add a List component to the second row and define its columns.
The completed web page will have employee data in a list in row 2. Row 3 will show the selected employee details, displayed on a tab folder. Bearing in mind what we have already observed about web page variables changing due to mouseover, selection or focus events, you will define the EmployeeLists columns using different fields to the xEmployee table columns..
This is a slightly crude solution but of course will work perfectly well.
A more sophisticated answer would be to design the third row, which will contain a tab folder with two tab sheets, as a reusable part. All the employee detail variables would then be held in a separate component.
1. Drop a List component into the second row. On the Layout ribbon:
a. Change Size to Fit Both so that it occupies the whole area.
b. On the Details tab, change its Name to EmployeeList.
2. Create field iiiFullName in the Repository, with description Full Name, as a 40 long, NChar field. Open the field in the editor and change the Input Attributes to included LC (allow lower case).
3. Select the Repository tab and expand the Fields group.
Drag into the list EmployeeList, the fields shown in the table below. Set up the column properties after you add each field. The new columns will be selected on the Details tab as you add each one.
|
Note: The employee fields xEmployeeSurname and xEmployeeGivenName are defined as type nChar. As such they can hold DBCS data, supporting multilingual applications.
4. Once all the columns have been defined, adjust the column widths as necessary. Drag the column heading, so that all columns are shown in the Design view.
5. Create an ItemGotSelection event routine for the EmployeeList.
6. Save your web page.
