Grid - Inline Components

All GridMate grids (GM - RelatedList Grid, GM - FieldSet Grid, GM - ListView Grid...) can be configured to display inline grids. Multiple grids could be displayed under each record to show child objects in a grid way. We can have a hierarchy of grids like Accounts => Opportunities => Opportunity Products

Master Grid setup

Edit the Account Lightning page and configure the opportunities grid using the component GM - RelatedList Grid. With the Lightning App builder and the configuration wizard, we can configure every aspect of the grid.

Opportunities on Account page

Child Grid Setup

Edit the Opportunity page and configure the opportunity products grid using the Lightning App Builder.

Opportunity Products on Opportunity page

Inline Grid Setup

Copy the configuration from the child grid (Opportunity Products) and paste it to the master grid (Opportunities) in Record Related Components property. See the video below 👇

Grid - Inline Components

The child grid can be deleted if it's not needed on the child object once the configuration is done.

Split View Setup

Split View feature significantly improves productivity by enabling simultaneous work on multiple tasks without the need to switch between different windows, enhancing efficiency and streamlining the work process.

Enable split view

Enabling the Split View feature allows you to apply the split view on your grid.

Split View Setup

Once you enable the Split View option, you can apply the split view on your grid. The video below is a step-by-step tutorial to learn how to use the Split View👇.

Split View

Multi Inline Components Setup

The inline grid component provides the ability to configure multiple components. Here's a configuration:

[
    {
        "component": "gmpkg:RecordLayoutComponent",
        "attributes": {
            "targetObjName": "Contact",
            "recordIdField": "Sponsor__c",
            "showBorder": true,
            "recordLayout": "{\"sections\":[{\"name\":\"SponsorInformation\",\"label\":\"Sponsor Information\",\"active\":true,\"cols\":3,\"rows\":[[{\"apiName\":\"ReportsToId\"},{\"apiName\":\"MailingStreet\"},{\"apiName\":\"MailingCountry\",\"coloring\":[{\"color\":\"#a6f79e\",\"exp\":{\"MailingCountry\":{\"operator\":\"=\",\"value\":\"USA\"}}}]}],[{\"apiName\":\"MailingCity\",\"autocomplete\":[\"Paris\",\"New York\",\"London\",\"Rome\"],\"noWhitespace\":true}],[{\"apiName\":\"CreatedById\",\"noWhitespace\":true}],[{\"apiName\":\"LastModifiedById\",\"noWhitespace\":true}],[{\"apiName\":\"Notes__c\",\"noWhitespace\":true}],[{\"apiName\":\"RecordTypeId\",\"noWhitespace\":true}]]}]}"
        }
    },
    {
        "component": "gmpkg:RelatedListDataGridComponent",
        "attributes": {
            "relatedListLabel": "Contact Roles",
            "rowLimit": 100,
            "pageSize": 10,
            "customIcon": "standard:contact",
            "filter": "{}",
            "order": "",
            "canUpdate": true,
            "canMassUpdate": true,
            "canDelete": true,
            "canCreate": true,
            "showBorder": true,
            "showColumnBorder": true,
            "recordDetail": true,
            "canFilter": true,
            "canClone": true,
            "canExport": true,
            "canImport": false,
            "canFreeze": true,
            "canExplore": false,
            "fullRecordCreation": true,
            "defaultValues": "{}",
            "jsonActions": "[]",
            "buttonActions": false,
            "visibleActions": 0,
            "jsonRecordActions": "[]",
            "frozenColumns": 0,
            "TotalColor": "#FFFFFF",
            "TotalBgColor": "#0176D2",
            "recordRelated": "[]",
            "density": "comfy"
        }
    },
    {
        "component": "gmpkg:RelatedListDataGridComponent",
        "attributes": {
            "relatedListLabel": "Opportunity Team",
            "rowLimit": 100,
            "pageSize": 10,
            "customIcon": "standard:contact",
            "filter": "{}",
            "order": "",
            "canUpdate": true,
            "canMassUpdate": true,
            "canDelete": true,
            "canCreate": true,
            "canFilter": true,
            "canClone": true,
            "canExport": true,
            "canImport": false,
            "canFreeze": true,
            "canExplore": false,
            "fullRecordCreation": true,
            "showBorder": true,
            "showColumnBorder": true,
            "recordDetail": true,
            "defaultValues": "{}",
            "jsonActions": "[]",
            "buttonActions": false,
            "visibleActions": 0,
            "jsonRecordActions": "[]",
            "frozenColumns": 0,
            "TotalColor": "#FFFFFF",
            "TotalBgColor": "#0176D2",
            "recordRelated": "[]",
            "density": "comfy"
        }
    },
    {
        "component": "gmpkg:RelatedListDataGridComponent",
        "attributes": {
            "relatedListLabel": "Products",
            "rowLimit": 100,
            "pageSize": 10,
            "customIcon": "standard:contact",
            "filter": "{}",
            "order": "",
            "canUpdate": true,
            "canMassUpdate": true,
            "canDelete": true,
            "canCreate": true,
            "canFilter": true,
            "canClone": true,
            "canExport": true,
            "canImport": false,
            "canFreeze": true,
            "canExplore": false,
            "fullRecordCreation": true,
            "defaultValues": "{}",
            "jsonActions": "[]",
            "buttonActions": false,
            "visibleActions": 0,
            "showBorder": true,
            "showColumnBorder": true,
            "recordDetail": true,
            "jsonRecordActions": "[]",
            "frozenColumns": 0,
            "TotalColor": "#FFFFFF",
            "TotalBgColor": "#0176D2",
            "recordRelated": "[]",
            "density": "comfy"
        }
    }
]