Grid

The Grid element allows Citizen Developers (CDs) to display data in a table-like format within forms, enabling better organization and a more structured user experience. Let’s walk through the five main property sections of the Grid field and see how each can optimize grid functionality.

Field Configurations

1. Field Name: The internal name for the field.

2. Label Name: This is the displayed name that users see in the live application.

3. Add Grid Elements: Opens a new page where CDs can drag and drop elements into a table format to create the grid structure.

Grid Options

CDs have control over the visibility and functionality of the grid with these options:

1. Don't Show Grid: Option to hide the grid in the application.

2. Don't Allow to Add Record: Restricts end-users from adding records.

3. Don't Allow to Add Records Using Excel: Disables adding records via Excel.

4. Don't Allow to Download Records to Excel: Prevents end-users from exporting grid records to Excel.

5. Delete Options: Controls whether end-users can delete records or disables the delete icon altogether.

6. Multi-select Records to Delete: Enables multi-select deletion of records.

7. Add Record: Choose the record-adding experience for end-users:

8. Formats: Pop-up (default), Inline, or Side Panel.

9. Pop-up Sizes: Adjustable to Large (15-50 elements), Medium (6-14 elements), or Small (1-5 elements). If no size is selected, the system will suggest one based on the number of grid fields.

10. Edit Record: Choose the record-editing experience for end-users:

11. Formats: Pop-up (default), Side Panel, Inline, or a combination of Inline & Side Panel or Inline & Pop-up, allowing the end-user to select their preference.

Advanced Grid Options

Customize the grid with these advanced settings:

1. Enable Aggregates: Available for numeric fields, allowing CDs to apply functions such as Sum, Average, Count, Maximum, and Minimum to selected fields.

2. Choose Row Height: Adjusts the height of rows to fit content.

3. Stack Headers: Groups related fields under a common header for better organization. Example: Use Stack Headers to create sections like "Personal Information" (for fields like Name, Email, Phone) and "Address Details" (for fields like Street, City, Postal Code), making it easy for users to locate and complete sections.

Mobile Settings (Mobile-Only)

CDs can select the layout for viewing grids on mobile devices:

List Layout:

1. Add Record: Available as a pop-up.

2. Edit Record: Available as a pop-up.

3. Choose Grid Columns: Select up to two columns for a compact view.

Card Layout:

Choose Card Layout: Predefined Layouts (1, 2, 3) each accommodate up to 6 columns; Custom layout can fit up to 20 columns.

UI Settings

Configure appearance settings for both Headers and Data in the grid:

For Header:

1. Alignment: Horizontal and vertical alignment options.

2. Text Wrap: Enables text to continue on a new line within the container.

3. Font Size: Choose between small, medium, and large.

4. Font Style: Options include bold, italics, and underline.

5. Color: Set background, border, and text colors.

For Data:

1. Alignment: Horizontal and vertical alignment options.

2. Text Wrap: Keeps text visible within the container.

3. Font Size & Style: Choose size and styles as with headers.

4. Color Options: Customize background and text color, including hover colors for an interactive experience.