Displaying Repeating Forms

Description

Grids have three different formats.

• "Tabular" - a multi-record view similar to a browse, view, or spreadsheet, which you have seen already.

• "Columnar" - a single-record view that places the field labels to the left of the fields. You can modify the columnar style to display multiple records.

• "Stacked Columnar" - a single-record view that places the field labels above the fields. You can modify the stacked columnar style to show multiple records.

Creating a Columnar Grid

1. Create a new grid based on the AlphaSports customer table.

2. Display the Component Type page.

3. In the Grid layout list select "Columnar".

Select the Fields

1. Display the Grid > Fields page.

2. Select the "Customer_ID", "Firstname", "Lastname", "Company", "Bill_Address1", "Bill_State_Region", "Bill_Postal_Code", and "" fields and click to move them from the Available Fields list to the Selected Fields list.

3. For the different fields, change the Row Properties > Row label values as follows.

   • 1. "Customer_ID" to "ID".

   • 2. "Firstname" to "First Name".

   • 3. "Lastname" to "Last Name".

   • 4. "Bill_Address1" to "Address".

   • 5. "Bill_State_Region" to "State".

   • 6. "Bill_Postal_Code" to "Postal Code".

4. Select the "" field. Click to move it to the top of the Selected Fields list.

5. Select each of the fields in the Selected Fields list.

   • 1. Change the Label Properties > In-line style field to "width: 1in;".

   • 2. Change the Row Properties > Row label in-line style field to "width: 1in;".

Setting Columnar Grid Properties

The following example produces a 3 by 3 grid with 9 forms. If the grid is not going to allow the user to enter new records, and you want a neat rectangular array, the Rows of data property must be even divisible by the Repeating columns property.

1. Display the Grid > Properties page.

2. Change the Layout Options > Repeating columns to 3.

3. Change the Layout Options > Rows of data to 9. These two changes causes the display of a 3 by 3 grid of forms.

4. Change the Layout Options > Font size to "Smaller".

5. Open the Style list and select "Arizona".

6. Click the 'disk...' icon to save the component as "AlphaSports_Customer_Grid_2".

   

7. Click Close to close the Grid Builder.

8. Click New > Web Page (A5W) to display the HTML Editor.

9. Click save and name the page "AlphaSports_Page_2".

10. Click Insert Component.

11. Click Select, select the "AlphaSports_Customer_Grid_2" and click OK > OK.

Preview the Grid

Click the 'lightning' icon to preview the grid in your browser. It should look something like this.