Step 6. Complete Web Page with Employee Details

In this step, you will complete the web page design for the lower area of the web page, which will contain employee details and a list of employee notes for a selected employee.

1.  Locate the file xEmployee on the Repository tab and expand its definition.

a.  Select all fields from xEmployeeIdentification to xEmployeeHomeTelephone and drag them into Row 4, Column 1.

b.  While these fields are selected, set their Alignment to Top Left and Flow to Down

c.  Change margin Top to 10 and margin Left to 20.

2.  Select fields xEmployeeSalary and xDepartmentCode and drag them onto Row 4, Column 1.

a.  Again set their Alignment to Top Left and Flow to Down.

b.  Change margin Top to 10 and margin Left to 20.

3.  Reduce the width of the fields as necessary. Note that when doing this you can select more than one field by holding down the Shift key. Make Column 1 wider if necessary, so all fields fit within the row.

a.  Change field Gender MarginLeft to 150.

4.  Change the Employee ID field to ReadOnly = True.

5.  Add a Label to row 4, Column 2. Change its Caption to Notes.

a.  Select the Styles ribbon and change its Font to 12pt, Bold.

b.  Change Alignment to Top Left and Flow to Down.

c.  Change its margin Top to 20 and margin Left to 10.

6.  Add a List component to row 4, column 2.

a.  Change Alignment to Top Left and Flow to Down.

b.  Changes Size to Fit to Width.

c.  Change margin Top to 20

d.  Change Span to 2 columns

e.  Change Height to 250.

f.  Change Name to NotesList.

g.  Change Checkboxes property to True.

7.  Save your web page.

8.  On the Repository tab, locate the file xEmployeeNotes and expand its definition.

a.  Drag field xEmployeeNotesCreateUpdate into list NotesList.

b.  Change ColumnCaption to Create / Update and ColumnCaptionType to Caption. Reduce the column width.

c.  Drag field xEmployeeNote into list NotesList

d.  Change ColumnCaptionAlign to Left

e.  Change ColumnUnits to Proportion

f.  Drag field xEmployeeNoteGUID into list NotesList

g.  Change ColumnVisible to False.

     Your design should look like the following:

9.  Save your web page.