GM - RelatedList Grid

(gmpkg:RelatedListDataGridComponent)

Documentation

GM - RelatedList Grid component is used to display a specified related list based on the assigned layout to the current user. This component requires the permission API Enabled.

Use case: Display a grid of opportunities on the account page.

Specification

The following properties use JSON syntax as part of their configuration: Filter, Aggregate, Default Values, Actions, Related Record Grids, Custom Field Labels, Cell Coloring.

The configuration wizard can be run to generate the required JSON strings for each of these properties. More details on the JSON syntax is available at the following location: w3schools.com - JSON syntax.

Property	Type	Description
recordId	String	recordId to use. Keep this empty if you want to use the current record.
Related List Label *	String	The label defined on the layout page. Set it to Contacts to display the list of contacts on the Account page.
Row Limit *	Integer	The maximum number of rows to fetch. The grid will never go beyond this number of records. The default value is 100.
Page Size *	Integer	The number of rows to fetch per step. If you have a contact related list of 50. If you set the Row Limit to 20 and the Page Size to 10. The first load of the grid will show 10 records and the grid title will be ‘Contacts (10+)’. The ‘+’ sign indicates that there are more records to load. You can fetch more rows using the ‘Load More’ button. The default value is 10.
Enable Pagination	Boolean	Check this option to enable pagination instead of scrolling. Note: this option is not compatible with interactive filters.
Custom Label	String	Override the title of the data grid. This is relevant when the related list is filtered. We can combine the filtering and the custom title to display different grids. You can filter only closed opportunities and set the title to Closed Opportunities.
Custom Icon	String	Customize the data grid icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/
Grid Height	Integer	Set the grid height. Set this property if you want to control the height and show up components after the grid. The user has to scroll vertically to see more records. If the value is set 9999, The grid will use the remaining space on the page even if the user resizes the window. This behavior is relevant to build a responsive app page.
Formula Columns	String	JSON string to define formula columns. A formula column is not saved in the database. it's calculated on the fly when the grid is rendered or when the record is edited by the user. The configuration wizard can be used to set this property (See Dynamic Formula guide). The produced configuration can be be adjusted to set the column index of each formula. See the example below: { "name": "ARR9qfzn__f", "fieldApiName": "ARR9qfzn__f", "label": "ARR", "type": "Currency", "JSFormula": "Amount*12", "isClientSide": true, "isJSFormula": true, "digits": "0", "precision": "18", "scale": "2", "index": 2 }
Column Style	String	JSON string to override the column's style. Don’t forget __c for custom fields. This property can be used to default the width, the text alignment or wrapping for a specific column: To set the card header background: { "gm__card_header": "background:lightblue" } To set the height of the header: { "gm__header": "height:4rem;whiteSpace:normal" } To set the width of the any column: { "gm__header": "width:120px;" } To style the row grouping: { "gm__group": "background: #6BBD6E;color: #FFFFFF" } Only the color and the background are supported. To set the width: { "StageName": "width:200px" } To set the alignment: { "Amount": "text-align:left" } To set the text wrapping: { "Name": "cellcontent:wrap" } To set the text wrapping during edit mode: { "Name": "celleditcontent:wrap" } This styling is available for String only. The field is edited through a textarea input. To set the number of visible lines for Long Text Area/Rich Text: { "Notes": "line-clamp:3" }
Hidden Columns	String	',' separated list of hidden columns. Don’t forget __c for custom fields. Hidden columns are useful for coloring, read only conditions....They are not visibles to the end user. If the explorer is enabled, the hidden columns are not visibles as well.
Filter	String	JSON string to define filter criteria. Don’t forget __c for custom fields. To see only Opportunities which are more than $1000 enter the following: { "Amount": { "operator": ">", "value": "1000" } } We support operators below: (‘=’,‘!=’,‘>’,‘>=’,‘<=’,‘in’, ‘not in’, ‘includes’, 'excludes', ‘like’, ‘notLike’). The configuration wizard can be used to build the filter query. For advanced configuration, see Grid - Advanced Filtering
Sort	String	The field list to sort the data grid. This field is used only for the initial load. Don’t forget __c for custom fields. To sort on multiple fields add a comma between field names. Amount,StageName We can define the order by field. If you define the order on the Sort, you don’t have to set if on the order. Amount desc,StageName asc The configuration wizard can be used to set this property.
Order	String	Ascending or descending order for sorting. For ascending enter the value asc. For descending enter the value desc
Group By	String	',' separated list of fields to group by. Don’t forget __c for custom fields. When an aggregation is defined, the Grid will display the intermediate aggregations at the group level. The configuration wizard can be used to set this property.
Collapse Groups	Boolean	Check this options to collapse groups by default. This option is relevant only it the records are grouped. The user can still expand a group. When a group is expanded, the user can select/unselect the whole group records using the checkbox at the group level.
Aggregate	String	JSON string to define the aggregate field. Use __c for custom fields. The supported functions are "sum", "min", "max", "avg" and "avgnotnull", "sumstr". To aggregate and sum the ‘amount’ fieldset this property to be: { "Amount": "sum" } The configuration wizard can be used to set this property. By default aggregated values are displayed on the header and on the bottom total row. The display can be controlled with advanced configuration using a JSON object per property: { "Amount": { "op": "sum", "label": "Total Amount", "nobottom": true, "notop": true } } Within this type of configuration, we can override the label and also define the calculated aggregated values: { "allocated__c": { "op": "max", "label": "Total Allocated", "nobottom": true }, "invoiced__c": "sum", "Remaining": { "op": "formula", "label": "Remaining", "formula": "$allocated__c - $invoiced__c", "type": "Currency" } }
Show Aggregate Header	Boolean	Show the aggregate header as a card on the top of the grid. The aggregate header will display the aggregate fields with their values on the grid header.
Enable Update Object	Boolean	Check this option if you wish to allow the end-user to perform inline editing of the record displayed. This option will show or hide the 'Edit Records' and 'Mass Update' icons from the list of quick actions.
Enable Mass Update	Boolean	Check this option if you wish to allow the end-user to perform mass updated on the displayed records. This option will show or hide the 'Mass Update' icons from the list of quick actions.
Enable Delete Object	Boolean	Check this option if you wish to allow the end-user to delete records. This option will show or hide the 'Delete Records' icon from the list of quick actions.
Enable Create Object	Boolean	Check this option if you wish to allow the end-user to create new records. This option will show or hide the 'Create New Record' icon from the list of quick actions. ⚠️When this option is checked, you may need to define the property Default Values to set the required fields for the object.
Enable Filter Object	Boolean	Check this option if you wish to allow the end-user to use filters. This option will show or hide the filter combobox.
Enable Clone Object	Boolean	Check this option if you wish to allow the end-user to clone records. This option will show or hide the 'Clone Records' icon from the list of quick actions.
Enable Export Object	Boolean	Check this option if you wish to allow the end-user to export records. This option will show or hide the 'Export' icon from the list of quick actions.
Enable Import Object	Boolean	Check this option if you wish to allow the end-user to import CSV files. This option will show or hide the 'Import' icon from the list of quick actions.
Enable Freeze Columns	Boolean	Check this option if you wish to allow the end-user to freeze columns. This option will show or hide the 'Freeze Columns' icon from the list of quick actions.
Enable View All	Boolean	Check this option if you want to use View All link.
Full Record Creation	Boolean	Check this option if you wish to create a full record instead of using a quick action. If this option is activated, the user will be able to create a record using the assigned layout when he clicks on the ‘Create New Record’ button. ‘Default Values’ property is used to initialize the new record.
Disable Modal Creation	Boolean	Check this option if you wish to disable record creation when the grid is displayed in view mode. If this option is activated, the user will not be able to create a record in view mode.
Disable Inline Creation	Boolean	Check this option if you wish to disable record creation when the grid is displayed in edit mode. If this option is activated, the user will not be able to create a record in edit mode.
Disable Modal Modification	Boolean	Check this option if you wish to disable record edition when the grid is displayed in view mode. If this option is activated, the user will not be able to edit a record in the view mode.
Disable Inline Modification	Boolean	Check this option if you wish to disable inline edition.
Default Values	String	JSON string to initialize a new object created from the data grid. Use __c for custom fields. If you want to create a new opportunity record then set this field to: { "accountid": "$recordId", "name": "Opp 1", "closedate": "2019-10-01", "stagename": "Needs Analysis" } The JSON string should contain at least all the required fields of the object in lower case. $recordId can be used to implicitly use the current recordId. The configuration wizard can be used to set this property. Any field from the current object can be used. Parent fields can be referenced as a merge field $record.fieldApiName: { "Country__c": "$record.BillingCountry" }
Hidden Fields	String	',' separated list of hidden fields for modal creation. When a user creates a new record, hidden fields will be defaulted but not displayed to the end-user (RecordTypeId for instance). The configuration wizard can be used to set this property.
Actions	String	JSON string to initialize the list of available actions from the data grid. Custom actions are available from the dropdown menu. You can leverage your existing quick actions. The configuration wizard can be used to build the list of actions.
Show Actions as Buttons	Boolean	Check this option if you wish to display actions as buttons instead of icons. When the actions are displayed as icons, we can define the icon on JSON actions configuration using the icon attribute.
Custom Visible Actions	Integer	Set the number of visible custom actions. All the core actions will always be displayed depending on the configuration of course. The remaining custom actions will be added as an option on the button menu.
Record Actions	String	JSON string to initialize the list of available record actions. Row actions are available on each row in view mode only. The configuration wizard can be used to build the list of actions.
Frozen Columns	Integer	# of columns to freeze at startup.
Total Color	String	Total row text color
Total Background	String	Total row background color
Show Record Details	Boolean	Check this option to allow the end-user to view the record details in the grid
Record Related Components	String	A JSON string to add a list of inline component (Grids and Record Layouts) to display per record. Each inline grid should have: component: the name of GridMate component. attributes: the list of attributes to configure, same as on the lightning app builder. All the component names and their attributes are available here. If you want to see the cases under a contacts grid then set this field to [ { "component": "gmpkg:RelatedListDataGridComponent", "attributes": { "relatedListLabel": "Cases", "canCreate": false, "canUpdate": true, "canDelete": true, "recordDetail": true } } ] The configuration wizard can be used to set this property. Configuration samples are available here 👉 Inline Grids
Extra Record Related Components	String	A JSON string to add extra record related components. Use this option for a large related components configuration.
Edit Record Layout	String	A JSON string to customize the edit layout when editing a single record. The JSON should a valid record layout configuration 👉 GM - Record Layout
Search Fields	String	',' separated list of fields to search in. If the list is empty, the search input is hidden in action. Only text fields (Text, PickList, Phone, Email, URL) are supported. The configuration wizard can be used to set this property.
Wildcard Search	Boolean	Check this option if you wish to use a wildcard search. If this option is activated, the end user doesn’t have to add ‘*’ to the search query.
Show Border	Boolean	Check this option if you wish to add a border to the grid.
Show Column Border	Boolean	Check this option if you wish to add a border to the grid columns.
Custom Field Labels	String	A JSON string to override column label: {"AccountId":"Organization","StageName":"Step"} The configuration wizard can be used to set this property.
ReadOnly Fields	String	',' separated list of read-only fields. The user will not be able to edit these fields the same as read-only fields on the page layout. In a complex use case, a JSON string can be used instead to set the read-only condition for each field: { "fieldApiName": { "operator": "$operator", "value": "$value" } } In the example below Subject and Priority are locked when the case is closed: { "Subject": { "Status": { "operator": "=", "value": "Closed" } }, "Priority": { "Status": { "operator": "=", "value": "Closed" } } } All the displayed fields can be used to handle complex logic and different operators are supported: (‘=’,‘!=’,‘>’,‘>=’,‘<=’, ‘in’, ‘includes’, 'excludes', 'like') Conditions can be combined with conjunctions like ‘or’, ‘and’. Below is a complex condition: { "or": [ { "Status": { "operator": "=", "value": "Closed" } }, { "Priority": { "operator": "=", "value": "high" } } ] } Relative dates are supported: YESTERDAY() TODAY() TOMORROW() LAST_N_DAYS NEXT_N_DAYS LAST_WEEK() THIS_WEEK() NEXT_WEEK() LAST_MONTH() THIS_MONTH() NEXT_MONTH() LAST_YEAR() THIS_YEAR() NEXT_YEAR() The configuration wizard can be used to set this property.
Cell Coloring	String	JSON conditions for cells coloring. You can define for each field displayed in the grid the coloring and the corresponding condition. { "CloseDate": [ { "color": "#fac8d4", "exp": { "Late__c": { "operator": "=", "value": true } }, "label": "Late Opp." } ], "Amount": [ { "color": "#d1fac8", "exp": { "Amount": { "operator": ">", "value": 50000 } }, "label": "Big Deal" } ] } Coloring condition should be built it the same way as Read Only Fields. To set the define a coloring at the row level, set the colored field to '*'. See the example below: { "*": [ { "color": "#fac8d4", "exp": { "Late__c": { "operator": "=", "value": true } }, "label": "Late Opp." } ] } Note that $recordId can be used to implicitly use the current recordId. The configuration wizard can be used to set this property. The label property is used to build a legend to the end user to give insights on the applied coloring.
Extra Cell Coloring	String	Extra JSON conditions for cells coloring. This property is useful for complex coloring that go beyond 2000 characters.
Lookup Fields Options	String	JSON string to customize lookup fields. You can define different aspects for each lookup field. Title field : Field ApiName for the title Subtitle field : Field ApiName for subtitle Candidates provider : In some situations, the search is very complex especially for lookup filters. In this case, you can bring your own Apex Class. Pasted value provide: If lookup filters are enabled, you can bring your own Apex Class to filter the records based on the pasted values and the current record Id. Create related record: Boolean to enable/disable record creation. Default values : JSON string to set values for new record. This option is used only if the user is authorized to create a new record. { "AccountId": { "titleField": "Name", "subTitleField": "Website", "candidatesProvider": "CaseAccountCandidatesProvider", "pastedValueProvider": "CaseAccountCandidatesProvider", "refObjCreateable": true, "defaultValues": { "RecordTypeId": "0123i000000d27DAAQ", "Type": "Prospect" } } }
Disable Refresh View	Boolean	Check this option if you wish to avoid the page load when the grid is saved. This option is automatically set to true for inline grids.
Enable Dynamic Interactions	Boolean	Check this option if you want to enable dynamic interactions. When this option is enabled, the grid publish a Row Clicked event when a row is selected. This option is required a Dynamic Interaction experience.
Enable Split View	Boolean	Check this option if you want to enable split view. When this option is enabled, the inline components are displayed on the right side. See Split View example.
Enable Interactive Filters	Boolean	Check this option if you want to enable interactive filters. With this option enabled, the user can easily filter the records at the column level either by selecting the values or defining conditions. See Interactive Filters.
Enable Auto Fill	Boolean	Check this option if you want to enable auto fill. With this option enabled, the user can drag to fill values like Excel.
Enable Config Checker	Boolean	Check this option if you want to enable the Config. Checker. With this option enabled, the user will be able to validate the component configuration. See Grid - Config Checker.
Default Mode	String	String to define the initial display mode of the grid (edit | read | editOnly). If this property is set to edit, the grid is displayed in edit in the first load of the page. If this property is set to editOnly, the grid is displayed in edit all the time.
Enable Grid Collapse	Boolean	Check this option if you want to enable Grid collapse. When this option is activate, the end user can minimize the Grid.
Enable Toggle Fullscreen	Boolean	Check this option if you want to enable toggle fullscreen for the Grid. When this option is active, the end user can open the Grid in fullscreen dialog.
Enable Explorer	Boolean	Check this option if you want to use the Grid Explorer. When this option is active, the end user will be able to explore the grid through the Explorer by filtering the records, hiding or reordering the columns and also by setting the grouping.
density	String	Grid density : comfy | compact. Currently the density is applied only to the toolbar. The compact layout is more for inline Grids.

Lightning App Builder support custom labels to dynamically configure any component property. This feature is useful when dealing record types or any property depending on the environment. Below is an example of default values using custom labels:

{
    "RecordTypeId": "{!$Label.Outbound_Contact}"
}

API Reference

RelatedListDataGridComponent.design

<design:component label="GM - RelatedList Grid">
    <design:attribute name="recordId" label="recordId" 
                      description="recordId to use. Keep this empty if you want to use the current record"/>        
    <design:attribute name="relatedListLabel" label="Related List Label" 
                      description="The label defined in the layout page. Ex. Contacts to display contact list on account page"/>    
    <design:attribute name="dataGridCode" label="DataGrid Code" 
                      description="The code to identify the DataGrid"/>                            
    <design:attribute name="rowLimit" label="Row Limit" 
                      description="The maximum number of row to fetch"/>
    <design:attribute name="pageSize" label="PageSize" 
                      description="The number of row to fetch per step"/>
    <design:attribute name="paginationEnabled" label="Enable Pagination" 
                      description="Check this option to enable pagination instead of scrolling. Note this option is not compatible with interactive filters"/>                      
    <design:attribute name="customLabel" label="Custom Label" 
                      description="Override the label of data grid"/> 
    <design:attribute name="customIcon" label="Custom Icon" 
                      description="Customize the data grid icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/"/> 
    <design:attribute name="height" label="Grid Height" 
                      description="Set the grid height"/> 
    <design:attribute name="jsonFormulas" label="Formula Columns" 
                      description="Json string to define formula columbs. Use the configurations wizard to produce the property value"/>     
    <design:attribute name="hiddenColumns" label="Hidden Columns" 
                      description="',' separated list of hidden columns"/>                           
    <design:attribute name="columnStyles" label="Column Style" 
                      description="Json string to define column's style. Don’t forget __c for custom fields. Ex. {'StageName':'width:200px'} to set the width for Stage column"/>     
    <design:attribute name="filter" label="Filter" 
                      description="Json string to define filter criteria. Don’t forget __c for custom fields. Ex. {'StageName':'Needs Analysis'} to see only 'Needs Analysis' Opportunities"/>    
    <design:attribute name="sort" label="Sort" 
                      description="The field list to sort the data grid. This field is used only for the initial load. Don’t forget __c for custom fields. Ex. Amount to sort opportunities by amount"/>
    <design:attribute name="order" label="Order" 
                      description="Asc or Desc order for sorting"/>
    <design:attribute name="aggregate" label="Aggregate" 
                      description="Json string to defined the aggregate fields. The components are supporting 'sum', 'minx' and 'max'. Don’t forget __c for custom fields. Ex. {'Amount':'sum'} to aggregate the amount of opportunities"/>    
    <design:attribute name="groupBy" label="Group By" 
                      description="',' separated list of fields to group by"/>                              
    <design:attribute name="collapseGroups" label="Collapse Groups" 
                      description="Collapse groups"/>                                                                              
    <design:attribute name="multiLevelGrouping" label="Multi Level Grouping" 
                      description="Multi Level Grouping"/>                      
    <design:attribute name="showAggregateHeader" label="Show Aggregate Header" 
                      description="Show the aggregate header as card on the top of the grid"/>    
    <design:attribute name="canUpdate" label="Enable Update Object" 
                      description="Check this option if you want to update object"/>    
    <design:attribute name="canMassUpdate" label="Enable Mass Update" 
                      description="Check this option if you want to mass update objects"/>        
    <design:attribute name="canDelete" label="Enable Delete Object" 
                      description="Check this option if you want to delete object"/>        
    <design:attribute name="canMassDelete" label="Enable Mass Delete" 
                      description="Check this option if you want to mass delete objects"/>                                                
    <design:attribute name="canCreate" label="Enable Create Object" 
                      description="Check this option if you want to create object"/>    
    <design:attribute name="canFilter" label="Enable Filter Object" 
                      description="Check this option if you want to use filters"/>    
    <design:attribute name="canClone" label="Enable Clone Object" 
                      description="Check this option if you want to clone objects"/> 
    <design:attribute name="canExport" label="Enable Export Object" 
                      description="Check this option if you want to export objects"/>    
    <design:attribute name="canImport" label="Enable Import Object" 
                      description="Check this option if you want to import CSV files"/>    
    <design:attribute name="canFreeze" label="Enable Freeze Columns" 
                      description="Check this option if you want to freeze columns"/>      
    <design:attribute name="canViewAll" label="Enable View All" 
                      description="Check this option if you want to use viewAll link"/>                                                    
    <design:attribute name="canExplore" label="Enable Explorer" 
                      description="Check this option if you want to use the Grid Explorer"/>                                                                          
    <design:attribute name="canCollapse" label="Enable Grid Collapse" 
                      description="Check this option if you want to enable Grid collapse"/>                                                                                                                              
    <design:attribute name="canToggleFullscreen" label="Enable Toggle Fullscreen" 
                      description="Check this option if you want to enable toggle fullscreen"/>                                                                                                                                                                          
    <design:attribute name="canCreateFormula" label="Enable Create Formula" 
                      description="Check this option if you want to enable dynamic formula"/>                          
    <design:attribute name="noModalModification" label="Disable Modal Modification" 
                      description="Check this option if you want to disable modal modification"/>  
    <design:attribute name="fullRecordCreation" label="Full Record Creation" 
                      description="Check this option if you want to create a full record"/>      
    <design:attribute name="noModalCreation" label="Disable Modal Creation" 
                      description="Check this option if you want to disable modal object creation"/>  
    <design:attribute name="noInlineCreation" label="Disable Inline Creation" 
                      description="Check this option if you want to disable inline object creation"/>  
    <design:attribute name="noInlineModification" label="Disable Inline Modification" 
                      description="Check this option if you want to disable inline modification"/>                        
    <design:attribute name="inline" label="Disable Refresh View" 
                      description="Check this option if you want to disable the view refresh after an update"/>                  
    <design:attribute name="canInteract" label="Enable Dynamic Interactions" 
                      description="Check this option if you want to enable dynamic interactions"/>                       
    <design:attribute name="canSplit" label="Enable Split View" 
                      description="Check this option if you want to enable split view"/>                                              
    <design:attribute name="canInMemFilter" label="Enable Interactive Filters" 
                      description="Check this option if you want to enable interactive filters"/>
    <design:attribute name="canLinkUserFilter" label="Enable Quick Filter Links" 
                      description="Check this option if you want to enable quick filter links"/>
    <design:attribute name="canDragToFill" label="Enable Auto Fill" 
                      description="Check this option if you want to enable auto fill"/>                                                                                                                
    <design:attribute name="canCheckConfig" label="Enable Config Checker" 
                      description="Check this option if you want to enable the config. checker"/>                         
    <design:attribute name="defaultValues" label="Default Values" 
                      description="Json string to initialize a new object created from the data grid. Don’t forget __c for custom fields. Ex. {'accountid':'$recordId', 'name':'Opp 1', 'stagename':'Needs Analysis'}"/>
    <design:attribute name="hiddenFields" label="Hidden Fields"                       
                      description="',' separated list of hidden fields for modal creation"/>   
    <design:attribute name="jsonActions" label="Actions" 
                      description="Json string to initialize the list of available actions from the data grid"/>
    <design:attribute name="buttonActions" label="Show Actions as Buttons" 
                      description="Use buttons for actions instead of icons"/>
    <design:attribute name="visibleActions" label="Custom Visible Actions" 
                      description="# of visible custom actions"/>        
    <design:attribute name="jsonRecordActions" label="Record Actions" 
                      description="Json string to initialize the list of available record actions"/>                                     
    <design:attribute name="frozenColumns" label="Frozen Columns" 
                      description="# of columns to freeze"/> 
    <design:attribute name="TotalColor" label="Total Color" 
                      description="Total row color"/>  
    <design:attribute name="TotalBgColor" label="Total Background" 
                      description="Total row background color"/> 
    <design:attribute name="recordDetail" label="Show Record Details" 
                      description="Show record details"/>    
    <design:attribute name="recordRelated" label="Record Related Components" 
                      description="Json string to initialize related components"/>    
    <design:attribute name="extraRecordRelated" label="Extra Record Related Components" 
                      description="Extra Record Related Components"/>                         
    <design:attribute name="editRecordLayout" label="Edit Record Layout" 
                      description="Json string to for a custom edit layout"/>                      
    <design:attribute name="jsonSearchFields" label="Search Fields" 
                      description="',' separated search fields"/>   
    <design:attribute name="wildCardSearch" label="Wildcard Search" 
                      description="Use Wildcard Search"/>
    <design:attribute name="showBorder" label="Show Border" 
                      description="Show Border"/>    
    <design:attribute name="showColumnBorder" label="Show Column Border" 
                      description="Show Column Border"/>    
    <design:attribute name="fieldLabels" label="Custom Field Labels" 
                      description="{name:label} custom field labels map"/>
    <design:attribute name="readOnlyFields" label="ReadOnly Fields" 
                      description="',' separated list of readonly fields"/>
    <design:attribute name="coloring" label="Cell Coloring" 
                      description="JSON conditions for cells coloring"/>
    <design:attribute name="extraColoring" label="Extra Cell Coloring" 
                      description="JSON conditions for cells coloring. Use this property to by pass App Builder limitation"/>                                            
    <design:attribute name="lookupOptions" label="Lookup Fields Options" 
                      description="JSON options for lookup fields {apiName : {titleField : value, subTitleField : value}}"/>
    <design:attribute name="displayMode" label="Default Mode" 
                      description="Default execution mode : read | edit"/>                                        
    <design:attribute name="density" label="Density" 
                      description="Grid density : comfy | compact"/>                         
    <design:attribute name="sObjectName" label="Object Name" 
                      description="SObject to use. Usefull only for dynamic interaction"/>                                                                                           
</design:component>

Public Event Handlers

Event Handler registration

<aura:registerEvent name="onCellChange" type="c:DataGridCellChangeEvent" access="global" />

DataGridCellChangeEvent properties:

<aura:event type="COMPONENT" description="Cell Change Event" access="global">
    <aura:attribute
        name="item"
        type="Object"
        description="Item"
        access="global"
    />
    <aura:attribute
        name="column"
        type="Object"
        description="Cell Column"
        access="global"
    />
    <aura:attribute
        name="value"
        type="Object"
        description="Cell Value"
        access="global"
    />
</aura:event>

Public Methods

<!-- Use this methode to set error for a given record-->
<aura:method name="setRecordError" action="{!c.setRecordError}" access="global">
        <aura:attribute name="item" type="Object" />
        <aura:attribute name="error" type="Object" />
</aura:method>

<!-- Use this methode to set the display mode for a given cell-->
<aura:method name="setCellDisplayMode" action="{!c.setCellDisplayMode}" access="global">
    <aura:attribute name="item" type="Object" />
    <aura:attribute name="column" type="Object" />
    <aura:attribute name="mode" type="String" />
</aura:method>

<!-- Use this methode to set the error for a given cell-->
<aura:method name="setCellError" action="{!c.setCellError}" access="global">
    <aura:attribute name="item" type="Object" />
    <aura:attribute name="column" type="Object" />
    <aura:attribute name="error" type="Object" />
</aura:method>

<!-- Use this methode to set the value for a given cell-->
<aura:method name="setCellValue" action="{!c.setCellValue}" access="global">
    <aura:attribute name="item" type="Object" />
    <aura:attribute name="column" type="Object" />
    <aura:attribute name="value" type="Object" />
</aura:method>

<!-- Use this methode to get the value for a given cell-->
<aura:method name="getCellValue" action="{!c.getCellValue}" access="global">
    <aura:attribute name="item" type="Object" />
    <aura:attribute name="column" type="Object" />
</aura:method>

Lookup Providers

The candidates provider class should implement a Callable interface. GridMate delegates the candidates search to the given provider:

Callable handler =  (Callable) Type.forName(candidatesProvider).newInstance();
            return (Object[]) handler.call('getLookupCandidates', new Map<String, Object>{
                                              'objectId' => objectId,
                                              'refObjName' => refObjName,
                                              'refFieldName'=> refFieldName,
                                              'searchTerm'=> searchTerm,
                                              'titleField'=> titleField,
                                              'subTitleField'=> subTitleField});

The example below showcase a specific provider for ‘AccountId’ on Case object:

The apex class should be declared as global. If not we will not be able to instantiate the class from the managed package.

global class CaseAccountCandidatesProvider implements Callable {
    global Object call(String action, Map<String, Object> args) {
        if(action=='getLookupCandidates'){
            String query = 'Select Id, Name From Account';            
            String searchTerm = (String)args.get('searchTerm');
            if(searchTerm != null){query += ' Where Name like \'' +  searchTerm + '%\'';}
            query += ' Limit 5';           
            List<Object> items = Database.query(query);                            
            if(items != null && items.size()>0){
                String jsonItems = JSON.serialize(items);
                return (List<Object>)JSON.deserializeUntyped(jsonItems);
            }
            return null;
       }else {throw new ExtensionMalformedCallException('Action not implemented');}
    }
}

The pasted values provider class should implement a Callable interface. GridMate delegates the search to the given provider:

Callable handler = (Callable) Type.forName(pastedValueProvider).newInstance();
                return (Object[]) handler.call(
                    'getLookupRecords',
                    new Map<String, Object>{
                        'recordId' => recordId,
                        'refObjName' => refObjName,
                        'titleField' => titleField,
                        'searchNames' => searchNames
                    }
                );

The example below showcase a specific provider for ‘AccountId’ on Case object:

The apex class should be declared as global. If not we will not be able to instantiate the class from the managed package.

global class CaseAccountPastedValueProvider implements Callable {
    global Object call(String action, Map<String, Object> args) {
        if (action == 'getLookupRecords') {
            String recordId = (String) args.get('recordId');
            String titleField = (String) args.get('titleField');
            String[] searchNames = (String[]) args.get('searchNames');
            
            String query = 'Select Id, Name, BillingCity From Account';
            query += ' Where Name in :searchNames';
            
            return Database.query(query);
            
        } else {
            throw new ExtensionMalformedCallException('Action not implemented');
        }
    }
}

Both providers can be handle by the same apex class. See example below:

global class CaseAccountLookupProvider implements Callable {
    global Object call(String action, Map<String, Object> args) {
        if (action == 'getLookupRecords') {
            return getLookupRecords(args);
        } else if (action == 'getLookupCandidates') {
            return getLookupCandidates(args);
        } else {
            throw new ExtensionMalformedCallException('Action not implemented');
        }
    }

    private static Object getLookupRecords(Map<String, Object> args) {
        String recordId = (String) args.get('recordId');
        String titleField = (String) args.get('titleField');
        String[] searchNames = (String[]) args.get('searchNames');

        String query = 'Select Id, Name, BillingCity From Account';
        query += ' Where Name in :searchNames';

        return Database.query(query);
    }

    private static Object getLookupCandidates(Map<String, Object> args) {
        String recordId = (String) args.get('recordId');
        String searchTerm = (String) args.get('searchTerm');

        String query = 'Select Id, Name, BillingCity From Account';
        if (searchTerm != null) {
            query += ' Where Name like \'' + searchTerm + '%\'';
        }
        query += ' Limit 5';

        List<Object> items = Database.query(query);
        if (items != null && items.size() > 0) {
            String jsonItems = JSON.serialize(items);
            return (List<Object>) JSON.deserializeUntyped(jsonItems);
        }

        return null;
    }
}

Grid Wrapping

GM - RelatedList Grid is an Aura Component and therefore can be wrapped in another component through composition. Below is an example of what could be done:

ContactsGridComponent.cmp

<aura:component
    implements="flexipage:availableForAllPageTypes,force:hasSObjectName,force:hasRecordId"
    access="global"
>
    <gmpkg:RelatedListDataGridComponent
        aura:id="relatedGrid"
        recordId="{! v.recordId }"
        sObjectName="Account"
        relatedListLabel="Contacts"
        onCellChange="{! c.handleCellChange }"
    />
</aura:component>

ContactsGridComponentController.js

({
    handleCellChange: function (component, event, helper) {
        let dataGrid = component.find('relatedGrid');

        let item = event.getParam('item');
        let column = event.getParam('column');
        let value = event.getParam('value');

        if (column.fieldApiName === 'Approval_Status__c') {
            if (value === 'Accepted') {                
                dataGrid.setCellDisplayMode(item.UID, 'Title', 'read');                
            } else {
                dataGrid.setCellDisplayMode(item.UID, 'Title', 'edit');                
            }
        }       
    }
});