grid

The grid component enables you to create grid layouts in your app, organizing content into rows and columns for a visually consistent and flexible interface. It helps align elements proportionally, ensuring a structured design. The grid is ideal for creating galleries to display photos or product images, dashboards, menus, and product lists. This component is very similar to the jig.grid the only exception is that this component can be used in a jig.default with other components.

Configuration options

The grid component has two available configuration options:

1. Auto Grid - used to create a grid layout from a datasource. This is similar in configuration to a jig.list where a single grid-item is configured and iterates through the datasource.

2. Custom Grid - used to create a custom grid layout using widgets, images, or custom components in various sizes.

Core structure
type	Within a grid component, the component is used to define each of the elements in the grid layout. Within the grid-item a select set of components can be configured.
data	Configure a datasource to call the data in the grid layout. The data property is required for the Auto Grid, but is optional for the Custom Grid selection.

Examples and code snippets

Auto grid

Auto grid

In this example, a gallery of images is created to showcase the services a company offers. The jig.default type, grid component and datasource is used, enabling a simple configuration based on the records in the datasource. The component.grid-item only needs to be configured once using the expression [email protected]. followed by the desired data field. Using current loops through the datasource, creating a grid item for each data record. Note that the specified size will apply to all returned records.;

grid-cleaning-service.jigx

title: Cleaning services
description: Available services in your area.
type: jig.default
# Define the datasource used to list the images and services.
children:
  - type: component.grid
    options:
      # Select the configured data source where the data will originate. 
      data: [email protected]
      item:
        # One grid-item component generates the entire grid using current data. 
        type: component.grid-item
        options:
           # Select the size that all the items will display as, 
           # all items use the same size.        
           size: "2x2"
           children: 
             # Choose the component to show in the grid.            
              type: component.image
              options:
                # Use the expression [email protected] with the data field
                # name. Use current loops through the datasource creating
                # grid-items for each data record.             
                title: [email protected]
                source:
                  uri: [email protected]

datasource (Dynamic Data)

Custom grid

This example demonstrates combining the grid component with other components (entity and form) in a default jig. The grid is customized to show an image component (4x2), a list widget (2x2) and chart widget (2x2).

Custom grid

grid-custom-component

title: Global Sales 
type: jig.default

children:
    - type: component.entity
      options:
        isCompact: true
        children:
         -  type: component.entity-field
            options:
              label: Region Sales Schedule
              value: My Schedule
    - type: component.divider 
    # Add a grid to contain multiple grid-items.  
    - type: component.grid
      options: 
        children:
        # First grid-item adds an image to the grid.
        # Specify the grid-item size to apply to the item.
          - type: component.grid-item
            options:
              size: 4x2
              children: 
                type: component.image
                options:
                  source:
                    uri: https://images.unsplash.com/photo-1516738901171-8eb4fc13bd20?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGJvb2tpbmd8ZW58MHx8MHx8fDA%3D 
         # Second grid-item adds a list widget to the grid.
          # Specify the grid-item size to apply to the item.
          - type: component.grid-item
            options:
              size: 2x2
              children: 
                type: component.jig-widget
                options:
                  jigId: list-with-stage-dd
                  widgetId: "2x2"
          # Third grid-item adds a chart widget to the grid.
          # Specify the grid-item size to apply to the item.        
          - type: component.grid-item
            options:
              size: "2x2"
              children: 
                type: component.jig-widget
                options:
                  jigId: chart-bar1_2x2
                  widgetId: "2x2"
    # The grid and grid-item components can be combined with other components.
    - type: component.form
      instanceId: flightCheck-in
      options:
        isDiscardChangesAlertEnabled: false
        children:
          - type: component.field-row
            options:
              children:
                - type: component.text-field
                  instanceId: fullname
                  options:
                    label: Name
                - type: component.text-field
                  instanceId: mobile-phone
                  options:
                    label: Contact
                    icon: phone
          - type: component.text-field
            instanceId: flightNumber
            options:
              label: Flight number        

list-with-stage-dd

chart-bar1_2x2