Displaying Repeating Forms
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.
Create a new grid based on the AlphaSports customer table.
Display the Component Type page.
In the Grid layout list select "Columnar".
Display the Grid > Fields page.
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.
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".
Select the "" field. Click to move it to the top of the Selected Fields list.
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;".
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.
Display the Grid > Properties page.
Change the Layout Options > Repeating columns to 3.
Change the Layout Options > Rows of data to 9. These two changes causes the display of a 3 by 3 grid of forms.
Change the Layout Options > Font size to "Smaller".
Open the Style list and select "Arizona".
Click the 'disk...' icon to save the component as "AlphaSports_Customer_Grid_2".
Click Close to close the Grid Builder.
Click New > Web Page (A5W) to display the HTML Editor.
Click save and name the page "AlphaSports_Page_2".
Click Insert Component.
Click Select, select the "AlphaSports_Customer_Grid_2" and click OK > OK.
Click the 'lightning' icon to preview the grid in your browser. It should look something like this.