grid-item

The grid-item component serves as the child component whenever any grid component has been configured, as discussed in the grid section. The component determines how the grid items are displayed, allowing you to customize the UI elements in the grid.

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
size	Select the size that the grid-item will be displayed in, the options are 1x1,2x2, 2x4, 4x2, 4x4.
children	The following components can be used in the grid-item: image widgets

Other options
icon	The icon will be displayed on the of the jig. Start typing the name of the icon to invoke the available list in IntelliSense. See Jigx icons for information on working with icons. The icon property applies to component.jig-widget without a widgetId. See the considerations below for the rules governing icon behavior.
title	By default, the jig's title is displayed. You can override it by adding the title property to the grid-item, either with a custom title or with '' (a blank space) to remove the title entirely.

Considerations

• When using the grid-item with a component.jig-widget, note the following:

  • A widgetId is required if the referenced jig includes a widget configuration. This value should match the Widget Name specified in the referenced jig.

  • If no widget configuration exists, the widget’s icon is inherited from the jig’s icon value. If no icon is specified there either, a default icon is used. You can override the icon by specifying one in the component.jig-widget of the grid-item.

• For a 1x1 widget, or a component.widget with no widgetId, the following rules apply:

  • If no icon is specified, a default icon is displayed.

  • If an icon is configured in the linked jig, that icon is used.

  • If an icon is specified in the component.widget in the grid-item, it overrides all other icon settings.

• A jig with inputs in it's title will display without a title (blank) as the jig would not have received those inputs.

Examples and code snippets

Grid-item with image and widget

File conversion in SQL function

In this example, three grid-items are configured, each with a different size and type.

1. Grid-item using an image component with a size specified of 4x2.

2. Grid-item using a list widget with a size specified as 2x2. The grid-item automatically shows the list.

3. Grid-item using a chart widget with a size of 2x2.

grid-item-sales.jigx

children:
    # 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-1488509082528-cefbba5ad692?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGJvb2tpbmd8ZW58MHx8MHx8fDA%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
          # 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: sales

list-with-stage-dd

chart-bar1_2x2

Grid-item options

This example shows the various configurations available to customize a grid-item, making it a versatile widget component. Options include:

• Default icon.

• Customized icons.

• Overridden or hidden titles using the title property.

• onPress actions for interactive behavior.

Examples: See the full code example in GitHub.

Custom Icons

default-icon

- type: component.grid
  options:
    children:
      - type: component.grid-item
        options:
          # Widget with 1x1 with default icon.
          size: 1x1
          children:
            type: component.jig-widget
            options:
              jigId: placeholder                                                                           

custom-icon

custom-title

onPress-event

- type: component.grid-item
  options:
    size: "1x1"
    children:
      type: component.jig-widget
      options:
        jigId: placeholder
        # Configure a custom icon to display on the widget.
        icon: air-quality-check-magnifying-glass
        # Configure a custom title to display below the widget.
        title: Checklist
        # Configure an action that will execute when the widget is pressed.
        onPress:
          type: action.info-modal
          options:
            modal:
              title: Inspection checklist
              description: Complete the manual inspection checklist
              element:
                type: icon
                icon: checklist-alternate
                color: warning
              buttonText: Exit

placeholder.jigx

time-log.jigx