Objective

• This exercise will extend the List Component Basics web page. The Employee list columns will be set to allow the list to be sorted by column.
• A Pop-Up component will be added which displays the employee's list in loaded or sorted order.
• Push buttons will populate an Array Collection of employee items.
• A Pop-Up component is passed as a reference to the collection and displays employees in a list.
• Use a Theme to change the web page's appearance.

To achieve these objectives, you will complete the following:
Step 1. Display List in Loaded or Sorted Order
Step 2. Change the Web Page Appearance
Summary
Before You Begin
Complete exercise WBF015A, WBF015B and WBF055A.
Concepts
This exercise uses two reusable parts which are part of the shipped demonstration web page applications:

• xDemoWebPassingWorkingListsEmployeeItem is a non-visual component which stores details for a single employee.
• xDemoWebPassingWorkingListsListViewer is a pop-up component which displays a list of employee data.

The code for reusable part object xDemoWebPassingWorkingListsEmployeeItem is as follows:
Begin_Com Role(*EXTENDS #PRIM_OBJT *listFields #Employee)
 

• These field values will be mapped in to this object as part of the instance being created
• They will also be mapped in to the component when the collection is accessed using list Selectlist and Get_Entry
  Group_By Name(#Employee) Fields(#xEmployeeIdentification #xEmployeeTitle #xEmployeeSurname #xEmployeeGivenNames #xEmployeeDateofBirth #xEmployeeGender #xEmployeeStreet #xEmployeeCity #xEmployeeState #xEmployeePostalCode #xEmployeeCountry #xEmployeeHomeTelephone #xEmployeeBusinessTelephone #xEmployeeMobilePhone #xEmployeeSalary #xEmployeeStartDate #xEmployeeTerminationDate #xDepartmentCode #xEmployeeImageThumbnail #xEmployeeImage)
   
  End_Com 
  The Begin_Com statement's keyword Role() contains *listfields #Employee, which means fields in the Group_By Employee will be automatically mapped into this component whenever an instance is created, for example, when it is added to a collection.
  The Pop-Up component xDemoWebPassingListsEmployeeListViewer displays a list control with columns for employee fields.
  
  The Pop-Up component has a Show method routine, as follows:
  Mthroutine Name(Show)
  Define_Map For(*Input) Class(#Prim_acol<#xDemoWebPassingWorkingListsEmployeeItem>) Name(#Employees) Pass(*by_reference)
  Clr_List Named(#List1)
  Selectlist Named(#Employees)
  Add_Entry To_List(#List1)
  Endselect
  #Com_owner.ShowPopup
  Endroutine
   
  Note the highlighted Define_Map statement
  This passes a reference to an array collection of Employee Item components, which the web page populates from its employee list in loaded or sorted order. The Show method then reads the array collection in a Selectlist/EndSelect loop and adds each entry to the list List1.
  An array collection (PRIM_ACOL) collects a dynamically sized, ordered collection of components. Refer Types of Collections in the Developer's Guide for details.