[ |../../index.htm#lansa/wbfeng01_0320.htm]
You are here:

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 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
 
     To implement the ListViewer pop up you will extend your web page to:

• Define Array Collection EmployeeColl of xDemoWebPassingWorkingListsEmployeeItem component
• Define a ListViewer pop up component xDemoWebPassingWorkingListsListViewer
• Add two push buttons to the top of the web page
• In each push button's click event:

  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. Below existing Define_Com statements, 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 (Pop_Up component), 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 with a number of employees, for example, Accounts.
• Check that the ListViewer pop up is displayed when each of the "Read…" buttons are clicked.
• Sort the displayed list by clicking one of the column headings. Notice that salary is sorted in descending sequence.
• Check the Read Sorted List button shows the popup displaying employees in sorted sequence.
• Check the Read Loaded List always displays employees in the popup in loaded sequence. This is in employee number sequence.

[ |../../index.htm#lansa/wbfeng01_0320.htm]