1. Create a New / Web Page / Blank Page:
Name: iiiUsingLists
Description: Using List Components
Using the Details tab, give the web page a Theme of xDemoTheme (see Styles group).
2. Select the Layout ribbon and add a 3 row, 1 column table layout to the web page.
a. Change all rows to fixed height by changing their Row Units to Pixels.
b. Adjust the height of each row so that your page looks like the following. You can make further adjustments at any stage.
3. Select the Controls tab and drag a Label onto row 1. Select the Layout ribbon:
a. Change Alignment to Top Left and Flow to Right.
b. Change margin Left and Top to 10
c. On the Details tab change Caption to Search by:
4. Drag a Dropdown onto row 1. Using the Layout ribbon:
a. Change Alignment to Bottom Left and Flow to Right
b. Change margin Left and Bottom to 10
c. On the Details tab, change Name to SearchType
d. Change Width to 180
e. Create an ItemGotSelection event routine
5. Drag field STD_NAME into dropdown SearchType. It will have one column only.
6. Drag another Dropdown onto Row 1.
a. On the Details tab, change Name to Departments
b. Change Width to 190
c. Create an ItemGotSelection event routine
d. Position the dropdown just to the right of the SearchType dropdown:
7. On the Repository tab locate the table xDepartments and expand its definition.
a. Drag field xDepartmentDescription into dropdown Departments.
b. Drag field xDepartmentCode into dropdown Departments. Change its ColumnVisible property to False.
8. Drag an Edit Box onto Row 1.
a. On the Details tab, change Name to SearchName
b. Change Height to 20 and Width to 190
c. Position the edit box on top of the Departments dropdown. Only one or the other of these controls will be visible at runtime.
9. Drag a button onto Row 1.
a. On the Details tab, change Caption to Search and Name to Button_Search
b. Create a Click event routine
c. Position the push button just to the right of the SearchName edit box.
Hint: Use Ctrl + Cursor keys to move a control a pixel at a time.
Your design should look like the following:
10. Save the web page.
