Page History

[ Image Removed |../../index.htm#lansa/wbfeng01_0280.htm]
You are here:

...

In this step, you will create an initial version of the web page, containing a combo box populated with all departments.

1.  Create a New / Web Page / Blank Page:  Name

     Name: iiiListBasics.

 Description      Description: List Component Basics.

2.  Select the Layout ribbon and add a Table Layout with 2 row rows x 1 column to the web page.

3.  Drag the row divider upwards to leave space to add labels and a dropdown across the top section of the page.
Image Removed

Image Added

4.  Select the Layout ribbon. Click on the Rows button to open the menu. Change the Units for the first row to Pixels. The top row is now a fixed height.

Image RemovedImage Added

5.  Drag and drop a Label onto the top row. On the Layout ribbon, change the Alignment to Center Left and Flow to Right.

     a.  Change the label's Left margin to 20.

     b.  On the Details tab, change the label's Caption to Departments.

     c.  Reduce the width of the label so that it is slightly wider than it's its caption. Image Removed

Image Added

6.  Drag a Dropdown component onto the top row.

     a.  On the Layout ribbon, change Alignment to Center Left and Flow to Right.

     b.  Change margin Left to 5.

     c.  On the Details tab, change Name to DEPT_DD.

     d.  Increase the dropdown's width slightly, so that department descriptions will be fully shown.

7.  Save your web page and remember to regularly save as you design your web page.
Image Removed
Image Added

8.  Find the table xDepartments on the Repository tab and expand its definition.

     a.  Drag field xDepartmentDescription into the Dropdown. This will create a column, named ColumnXDEPTDESC1. This name is based on the field's Identifier.

     b.  Drag field xDepartmentCode into the Dropdown. This will create a second column named ColumnXDEPTMENT1.

     c.  Change the 2^nd column's ColumnVisible property to False. That is, Uncheck the checkbox.

9.  From the Repository tab, drag the field xDepartmentCode onto the top row.

     a.  Locate the Define_Com for xDepartmentCode. Change the visual component to EditField.

     Define_Com Class(#xDepartmentCode.EditField) Name(#xDepartmentCode) Displayposition(3) Left(378) Parent(#COM_OWNER) Tabposition(3) Top(34)

     b.  On the Layout ribbon, change Alignment to Center Left and Flow to Right.

     c.  Change margin Left to 20.
Image Removed

Image Added

10. Drag field xDepartmentDescription onto the top row. Using the Layout ribbon:

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

     b.  Change margin Left to 5.

     These fields are temporary and will be removed in a later step.

11. On the Design tab, click on a blank area to select the web page. On the Details tab, use the ellipsis button for Theme to display the Find dialog and select theme xDemoTheme. This is part of a shipped demonstration system. If you then click on the

Theme ribbon you will see the color scheme which this provides. i.e., the Theme's ThemeDrawStyles.
Image Removed
[ Image Removed |../../index.htm#lansa/wbfeng01_0280.htm]

Image Added