# GM - Flow Edit Grid

## **Documentation**

**GM - Flow Edit Grid** component is used to edit records from a data grid inside a flow.

**Use case:** Display a grid of contacts to add them as opportunity contact roles in a screen flow. See [Flow Tutorial](https://docs.gridmate.io/product-tour/smart-grids-in-flows).

## **Specification**

The following properties use JSON syntax as part of their configuration: **.**

<table data-full-width="true"><thead><tr><th width="238">Property</th><th width="116.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>recordId</td><td>String</td><td>recordId to use. Keep this empty if you want to use the current record.</td></tr><tr><td>Related Object Name *</td><td>String</td><td>The name of the related object to display</td></tr><tr><td>FieldSet Name *</td><td>String</td><td>The Field Set name of the related object to display</td></tr><tr><td>Row Limit *</td><td>Integer</td><td>The maximum number of rows to fetch.</td></tr><tr><td>Page Size *</td><td>Integer</td><td>The number of rows to fetch per step. </td></tr><tr><td>Custom Label</td><td>String</td><td>Override the title of the data grid.</td></tr><tr><td>Custom Icon</td><td>String</td><td>Customize the data grid icon. All lightning icons are supported. You can get the icon name from <a href="https://lightningdesignsystem.com/icons/">https://lightningdesignsystem.com/icons<strong>/</strong></a></td></tr><tr><td>Grid Height</td><td>Integer</td><td>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.</td></tr><tr><td>Column Style</td><td>String</td><td>JSON string to override the column's style. See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Candidates</td><td>String</td><td><p>The list of records to display. The collection should be a JSON string. See <a href="../../product-tour/smart-grids-in-flows">Flow Tutorial</a>. </p><p>Within GM - Flow View Grid you can use either Candidates or Filter.  </p><p></p><p>Candidates could be a list of already stored records or a brand new ones. For stored objects, we use the list of Id(s) to get the records from the database </p></td></tr><tr><td>Filter</td><td>String</td><td>JSON string to define filter criteria. Don’t forget __c for custom fields. See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Sort</td><td>String</td><td>The field list to sort the data grid. This field is used only for the initial load.  Don’t forget __c for custom fields. See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Order</td><td>String</td><td>Ascending or descending order for sorting. For ascending enter the value asc. For descending enter the value desc</td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option if you wish to add a border to the grid.</td></tr><tr><td>Show Column Border</td><td>Boolean</td><td>Check this option if you wish to add a border to the grid columns.</td></tr><tr><td>Custom Field Labels</td><td>String</td><td>A JSON string to override column label. See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Cell Coloring</td><td>String</td><td>JSON conditions for cells coloring. You can define for each field displayed in the grid the coloring and the corresponding condition. See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Lookup Fields Options</td><td>String</td><td>JSON string to customize lookup fields. You can define different aspects for each lookup field. See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Default Values</td><td>String</td><td>JSON string to initialize a new object created from the data grid. Use __c for custom fields. See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Enable Update Object</td><td>Boolean</td><td>Check this option if you wish to allow the end-user to perform inline editing of the record displayed.</td></tr><tr><td>Enable Delete Object</td><td>Boolean</td><td>Check this option if you wish to allow the end-user to delete records.</td></tr><tr><td>Enable Create Object</td><td>Boolean</td><td>Check this option if you wish to allow the end-user to create new records.</td></tr><tr><td>Save Records</td><td>Boolean</td><td>Check this option if you want to save the record when the user hits Next/Finish.</td></tr><tr><td>Updated Records</td><td>String</td><td>The list of updated records as JSON string. Set this property only if you want to assign the output manually. </td></tr><tr><td>Deleted Records</td><td>String</td><td>The list of deleted records. Set this property only if you want to assign the output manually.</td></tr><tr><td>Created Records</td><td>String</td><td>The list of new records as JSON string. It contains only created records.</td></tr><tr><td>Modified Records</td><td>String</td><td>The list of modified records as JSON string. It contains only modified records.</td></tr><tr><td>Cell Change Handler</td><td>String</td><td>Lightning component to handle cell change. See <a href="#cell-change-handler-example">Cell Handler</a> example.</td></tr><tr><td>Enable Auto Fill</td><td>Boolean</td><td>Check this option if you want to enable auto fill. With this option enabled, the user can drag to fill values like Excel.</td></tr><tr><td>ReadOnly Fields</td><td>String</td><td>',' 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.  See <a href="../gm-relatedlist-grid#specification">GM - RelatedList Grid</a></td></tr><tr><td>Action Labels</td><td>String</td><td><p>JSON string override the action labels. Any flow action can be customized. See the example below :</p><pre class="language-json"><code class="lang-json">{
    "BACK": "Go Back",
    "PAUSE": "Suspend",
    "FINISH": "Done",
    "NEXT": "Go Next"
}
</code></pre></td></tr></tbody></table>

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="FlowEditGridComponent.design" %}

```xml
<design:component label="GM - Flow Edit Grid">
    <design:attribute name="recordId" label="01. recordId" 
                      description="recordId to use. Keep this empty if you want to use the current record"/>        
    <design:attribute name="relatedObjectName" label="02. Related Object Name" 
                      description="The name of the related object to display. Ex. Opportunity"/>    
    <design:attribute name="fieldSetName" label="03. FieldSet Name" 
                      description="The fieldSet name of the related object to display"/>                            
    <design:attribute name="rowLimit" label="04. Row Limit" 
                      description="The maximum number of row to fetch"/>     
    <design:attribute name="customLabel" label="05. Custom Label" 
                      description="Override the label of data grid"/> 
    <design:attribute name="customIcon" label="06. 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="07. Grid Height" 
                      description="Set the grid height"/>  
    <design:attribute name="columnStyles" label="08. 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="candidates" label="09. Candidates" 
                      description="The list of candidates to display"/>    
    <design:attribute name="filter" label="10. 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="11. 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="12. Order" 
                      description="Asc or Desc order for sorting"/>         
    <design:attribute name="showBorder" label="13. Show Border" 
                      description="Show Border"/>
    <design:attribute name="showColumnBorder" label="14. Show Column Border" 
                      description="Show Column Border"/>        
    <design:attribute name="fieldLabels" label="15. Custom Field Labels" 
                      description="{name:label} custom field labels map"/>    
     <design:attribute name="coloring" label="16. Cell Coloring" 
                      description="JSON conditions for cells coloring"/>
    <design:attribute name="lookupOptions" label="17. Lookup Fields Options" 
                      description="JSON options for lookup fields {apiName : {titleField : value, subTitleField : value}}"/>            
    <design:attribute name="defaultValues" label="18. 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="canUpdate" label="19. Enable Update Object" 
                      description="Check this option if you want to update object"/>    
    <design:attribute name="canDelete" label="20. Enable Delete Object" 
                      description="Check this option if you want to delete object"/>    
    <design:attribute name="canCreate" label="21. Enable Create Object" 
                      description="Check this option if you want to create object"/>
    <design:attribute name="saveOnNext" label="22. Save Records" 
                      description="Check this option if you want to save the record on next"/>                                                                                   
    <design:attribute name="updatedJsonRecords" label="23. Updated Records" 
                      description="The list of updated records as JSON string. It includes created and modified records"/>                                     
    <design:attribute name="deletedJsonRecords" label="24. Deleted Records" 
                      description="The list of deleted records as JSON string"/>                                                           
    <design:attribute name="createdJsonRecords" label="25. Created Records" 
                      description="The list of new records as JSON string. It contains only created records"/>
    <design:attribute name="modifiedJsonRecords" label="26. Modified Records" 
                      description="The list of modified records as JSON string. It contains only modified records"/>                                                                                                       
    <design:attribute name="cellHandlerDef" label="27. Cell Change Handler" 
                      description="Cell Change Handler Component"/>
    <design:attribute name="canDragToFill" label="28. Enable Auto Fill" 
                      description="Check this option if you want to enable auto fill"/>  
    <design:attribute name="readOnlyFields" label="29. ReadOnly Fields" 
                      description="',' separated list of readonly fields"/>      
    <design:attribute name="actionLabels" label="30. Action Labels" 
                      description="Custom action labels as JSON string. {'FINISH' : 'Done'}"/>
</design:component>
```

{% endtab %}
{% endtabs %}

## **Cell Handler Example**

{% tabs %}
{% tab title="CellHandlerComponent" %}

```html
<aura:component controller="CellHandlerController" access="global">
    <aura:method name="handleCellChange" action="{!c.handleCellChange}" access="global">
        <aura:attribute name="component" type="Object" />
        <aura:attribute name="params" type="Object" />
    </aura:method>
</aura:component>
```

{% endtab %}

{% tab title="CellHandlerComponentController" %}

```javascript
({
    handleCellChange: function (component, event, helper) {
        let args = event.getParam('arguments');

        let item = args.params.item;
        let column = args.params.column;
        let value = args.params.value;

        let parentComponent = args.component;

        if (column.name === 'Product2Id') {
            if (value) {
                let action = component.get('c.getListPrice');
                action.setParams({
                    oppId: item.OpportunityId,
                    prodId: value
                });

                action.setCallback(this, function (res) {
                    if (res.getState() === 'SUCCESS') {
                        let listPrice = res.getReturnValue();
                        parentComponent.setCellValue(
                            item.UID,
                            'ListPrice',
                            listPrice
                        );
                    } else if (res.getState() === 'ERROR') {
                        console.error(res.getError());
                    }
                });

                $A.enqueueAction(action);
            } else {
                parentComponent.setCellValue(item.UID, 'ListPrice', 0);
            }
        }
    }
});

```

{% endtab %}

{% tab title="CellHandlerController" %}

```apex
public with sharing class CellHandlerController {
    @AuraEnabled
    static public Decimal getListPrice(String oppId, String prodId) {
        Opportunity opp = [
            SELECT Id, Pricebook2Id
            FROM Opportunity
            WHERE Id = :oppId
        ];

        PricebookEntry pbe = [
            SELECT Id, UnitPrice
            FROM PricebookEntry
            WHERE Pricebook2Id = :opp.Pricebook2Id AND Product2Id = :prodId
        ];

        return pbe.UnitPrice;
    }
}
```

{% endtab %}
{% endtabs %}