Step 1. Display List in Loaded or Sorted Order

In this step, you will add a Pop-Up component to the web page using the web demo components (reusable parts) described above, to display the employee list entries in loaded or sorted sequence.

1.  Copy web page iiiListBasics to create:

     Name: iiiListBasics_B

     Description: List Component with Sorting

     Framework: Personnel & Payroll

     To implement the ListViewer pop up you will extend your web page to:

  • Add each entry to array collection ListEmployees
  • End Read
  • Invoke the ListViewer's Show method passing EmployeeColl as a reference.
  • Read all EmployeeList entries

2.  Select the Source tab. Define an Array Collection, with the name EmployeeColl, collecting xDemoWebPassingworkingListsEmployeeItem:

* Collection of Employee Items that acts as a list

Define_Com Class(#Prim_acol<#xDemoWebPassingWorkingListsEmployeeItem>) Name(#EmployeeColl)

 

3.  On the Repository tab, locate the reusable part, xDemoWebPassingWorkingListsListViewer.

   Switch to the Design tab, drag the Pop_Up component onto the top row. You will correct its position in a moment.

4.  Select the Pop-Up component and using the Home ribbon, use the Bring Forward button option Bring to the Front to bring the Pop_Up to the front of the web page display.

5.  On the Details tab, change the Pop-Up component's Name to ListViewer.

6.  Drag the ListViewer component centered over the employee list.

7.  Drag and drop a push button onto the top row of the web page.

a.  Using the Layout ribbon change Alignment to Center Left and a Flow to Right.

b.  Change its margin Left to 50.

c.  Using the Details tab, change Caption to Read Loaded List.

d.  Change Name to Button_Loaded.

e.  Change Width to 120.

f.  Create a Click event routine.

8.  Add a second push button onto the top row:

a.  Change Alignment to Center Left and Flow to Right.

b.  Change margin Left to 50.

c.  Change Caption to Read Sorted List

d.  Change Name to Button_Sorted.

e.  Change Width to 120.

f.  Create a Click event routine.

9.  To read the list in loaded order, you must use a Selectlist/endselect loop. Complete the Button_Loaded.Click event routine by adding code to perform the following:

Clear the list EmployeeColl (actually an array collection)

Read all EmployeeList entries using Selectlist

  Add each entry to collection EmployeeColl

End of SelectList

Invoke the ListViewer's Show method, passing a reference to the collection EmployeeColl.

     Your code should look like the following:

Evtroutine Handling(#Button_Loaded.Click)

Clr_List Named(#EmployeeColl)
Selectlist Named(#EmployeeList)
Add_Entry To_List(#EmployeeColl)
Endselect
#Listviewer.Show(#EmployeeColl)

Endroutine

 

10. To read the list in sorted order, you must process it in a For/Endfor loop. This logic was used in exercise WBF025. Use F2 on the List control to discover the property EmployeeList.Items, which is a collection of list view item components, that is, each list entry.

     Complete the Button_Sorted.Click event routine by adding code to perform the following:

Clear the list EmployeeColl (actually the array collection)

For each "Employee" in the collection EmployeeList.Items

  Get entry Employee.Entry from list EmployeeList

  Add an entry to collection EmployeeColl

End For

Invoke the ListViewer's Show method passing a reference to the collection EmployeeColl.

Your code should look like the following:

Evtroutine Handling(#Button_Sorted.Click)

Clr_List Named(#EmployeeColl)
For Each(#employee) In(#EmployeeList.items)
Get_Entry Number(#employee.entry) From_List(#EmployeeList)
Add_Entry To_List(#EmployeeColl)
Endfor
#Listviewer.Show(#EmployeeColl)

Endroutine

 

11. On the Design tab, select the list component EmployeeList.

     Select each of the columns Postal Code, Department and Salary and change the SortOnClick property to True. Number, Surname and Given Names were made sortable in the previous exercise.

     Change the Salary column to SortDirection = Descending.

12. Compile the web page.

13. Test the web page. Select a department that has a number of employees, for example, Accounts.