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.
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 sheets again. Using the Layout ribbon add a Table Layout with 1 row and 2 columns. Move the column divider left. Your design should look like the following:
5. On the Repository tab, locate the xEmployee table and expand its definition.
a. Hold down the Control key and select fields xEmployeeIdentification, xEmployeeTitle, xEmployeeSurname, xEmployeeGivenName, xEmployeeStreet and xEmployeeCity and drag them into column 1 on SheetDetails.
b. Hold down the Control key and click on fields xEmployeePostalCode, xEmployeeCountry, xEmployeeSalary, xEmployeeStartDate and xDepartmentCode and drag them into column 2 on SheetDetails
6. Hold down the Shift key and select all fields on the Details 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
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.
