Step 1. Create Form – Using Lists

A Search type will be selected from a combo box. Three searches will be supported. The relevant input search field will then be displayed. The search button will then populate the employee list with all employees matching the search value.

1.  Create a New / Form / Basic Form:

     Name: iiiUsingLists

     Description: Using Lists

2.  Change the form Height to 550 and Width to 740.

3.  Using the Layout ribbon add a Table Layout with 4 rows and 1 column.

4.  Drag a Status Bar control into row 4.

5.  Adjust the rows as shown:

 

6.  Drag a label onto row 1.

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

b.  Change margin Left to 10

c.  Change Caption to Search by

d.  Reduce the Width of the label

7.  Drag a combo box onto row 1.

a.  Change Alignment to Center Left and Flow to Right

b.  Change margin Left to 10

c.  Create an ItemGotSelection event routine

d.  Change ComboBoxStyle to DropDownList

8.  Drag field STD_DESCS into the combo box

9.  Drag field STD_CODEL into the combo box and change its Visible property to false.

10. Save the form.

11. Drag field STD_DATEX onto row 1 to the right of the combo box. Do not give an Alignment and Flow.

a.  Change Caption to Start Date

b.  Change LabelType to Caption

c.  Change Name to SearchDate

d.  Change MarginLeft to 100

f.  Reduce the Width of the field

     Your design should look like the following:

12. The table xEmployee has text columns such as surname, given names and street defined as type NChar. We need a suitable search value for surname. Create a new Repository field:

a.  Define the field as follows, opening the field in the editor:

Name

iiiSearchName

Type

NChar

Description

Surname

Length

40

Input Attributes

FE, LC

 

b.  Switch to the field's Visualization tab and select the VisualEdit component. Change MarginLeft to 100 and Width to 380

c.  Save the field definition

13. Drag iiiSearchName into Row 1, on top of field SearchDate. At runtime only one of these values will be visible.

     Note: To adjust these field's position, you can first select a field on the Outline tab, or on the Design tab if the field is on top. You can then move any control accurately using the Ctrl key + cursor keys.

14. Drag field STD_ZIP onto row 2, temporarily.

a.  Change Caption to Department

b.  Change LabelType to Caption

c.  Change Name to SearchDepartment

d.  Change MarginLeft to 100

e.  Reduce the field's width

15. Drag SearchDepartment into Row 1 on top of iiiSearchName.

16. Save the form.

17. Drag a push button onto row 1.

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

b.  Change margin Right to 10

c.  Change Caption to Search

d.  Change Name to SEARCH

e.  Create a Click event routine.

     Your form should look like the following: