Step 6. Add a Tab Folder

In this step, you will add a tab folder with two tab sheets to the bottom of the web page. Selecting an employee in the list will display employee details on one tab sheet and a list of employee notes on the other tab sheet.

1.  Switch to the Design tab and drag a Tab Folder component onto row 3. On the Controls tab, display All Controls to find the Tab Folder.

      The tab folder has two tab sheets initially. The tab sheets are initially named Sheet1 and Sheet2 with Captions of Page1 and Page2.

     Click on the Page1 tab and then click to the right of the tabs to select the tab folder component.

       Select the Layout tab and give the tab folder a Size of Fit Both. It will expand to fill row 3.

       Note: As mentioned earlier, this step has added a 1 x 1 Table Layout to tab sheet Sheet1.

2.  Click on the tab sheet, Page1 tab and then click in the middle of the sheet to select Sheet1.

a.  On the Details tab change its Caption to Details.

b.  Change its Name to SheetDetails.

3.  Click on the Page2 tab and then click in the middle of the sheet to select it.

a.  Changes Caption to Notes.

b.  Change Name to SheetNotes.

4.  Select the Details tab sheet again. On the Repository tab locate the xEmployee file and expand its definition.

a.  Hold down the Shift key and select fields by clicking field xEmployeeIdentification followed by xEmployeePostalCode and drag them onto SheetDetails.

b.  Hold down the Control key and click on fields xEmployeeSalary, xEmployeeStartDate and xDepartmentCode and drag them onto SheetDetails

5.  Select all fields on the tab sheet. On the Layout ribbon:

a.  Change Alignment to Top Left and Flow to Down.

b.  Change Margin Left to 20 and margin Top to 5

6.  Select field Gender and change its MarginLeft to 150 (using the Details tab).

     Your design should look like the following:

7.  Switch to the Source tab. Create a GetEmployee method routine to perform the following:

Define a map for input, class xEmployeeIdentification with the Name EmployeeID

Define a component for the server module xEmployeeDataServer / Find srvroutine, name GetEmployee.

Assign group_by xEmployee to null

Execute GetEmployee asynchronously, passing / receiving field xEmployeeIdentification, Group_By xEmployee and field IO$STS

Include an event routine for GetEmployee.Completed

No code is required in this routine.

     Your code should look like the following:

Mthroutine Name(GetEmployee)

Define_Map For(*INPUT) Class(#xEmployeeIdentification) Name(#EmployeeID)

Define_Com Class(#iiixEmployeeDataServer.find) Name(#GetEmployee)

#xEmployee := *null

#GetEmployee.ExecuteAsync( #EmployeeID #xEmployee #IO$STS )

Evtroutine Handling(#GetEmployee.Completed)

 

Endroutine

Endroutine 

8.  Complete the EmployeeList.ItemGotSelection event routine which you created earlier, based on the following:

Assign Group_By xEmployee the value *null

Invoke the GetEmployee method routine passing STD_OBJ

i.e. the column which contains employee ID.

     Your code should look like the following:

Evtroutine Handling(#EmployeeList.ItemGotSelection)

#xEmployee := *null

#COM_SELF.GetEmployee( #std_obj )

Endroutine 

9.  Compile your web page.

10. Test your web page. Use a name or department search to populate the employee list with a number of entries.

     Click on any employee in the employee list. The Details tab should display the correct details for the selected employee.

     Click on a different employee in the list. The fields on the Details tab sheet should be cleared while waiting for the GetEmployee srvroutine to return data.