WBF055B – Display List in Sorted or Loaded Order

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.