GM - Flow Edit Grid

(gmpkg:FlowEditGridComponent)

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.

Specification

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

Property	Type	Description
recordId	String	recordId to use. Keep this empty if you want to use the current record.
Related Object Name *	String	The name of the related object to display
FieldSet Name *	String	The Field Set name of the related object to display
Row Limit *	Integer	The maximum number of rows to fetch.
Page Size *	Integer	The number of rows to fetch per step.
Custom Label	String	Override the title of the data grid.
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.
Column Style	String	JSON string to override the column's style. See GM - RelatedList Grid
Candidates	String	The list of records to display. The collection should be a JSON string. See Flow Tutorial. Within GM - Flow View Grid you can use either Candidates or Filter. 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
Filter	String	JSON string to define filter criteria. Don’t forget __c for custom fields. See GM - RelatedList Grid
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. See GM - RelatedList Grid
Order	String	Ascending or descending order for sorting. For ascending enter the value asc. For descending enter the value desc
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. See GM - RelatedList Grid
Cell Coloring	String	JSON conditions for cells coloring. You can define for each field displayed in the grid the coloring and the corresponding condition. See GM - RelatedList Grid
Lookup Fields Options	String	JSON string to customize lookup fields. You can define different aspects for each lookup field. See GM - RelatedList Grid
Default Values	String	JSON string to initialize a new object created from the data grid. Use __c for custom fields. See GM - RelatedList Grid
Enable Update Object	Boolean	Check this option if you wish to allow the end-user to perform inline editing of the record displayed.
Enable Delete Object	Boolean	Check this option if you wish to allow the end-user to delete records.
Enable Create Object	Boolean	Check this option if you wish to allow the end-user to create new records.
Save Records	Boolean	Check this option if you want to save the record when the user hits Next/Finish.
Updated Records	String	The list of updated records as JSON string. Set this property only if you want to assign the output manually.
Deleted Records	String	The list of deleted records. Set this property only if you want to assign the output manually.
Created Records	String	The list of new records as JSON string. It contains only created records.
Modified Records	String	The list of modified records as JSON string. It contains only modified records.
Cell Change Handler	String	Lightning component to handle cell change. See Cell Handler example.
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.
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. See GM - RelatedList Grid
Action Labels	String	JSON string override the action labels. Any flow action can be customized. See the example below : { "BACK": "Go Back", "PAUSE": "Suspend", "FINISH": "Done", "NEXT": "Go Next" }

API Reference

FlowEditGridComponent.design

<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>

Cell Handler Example

CellHandlerComponent

<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>

CellHandlerComponentController

({
    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);
            }
        }
    }
});

CellHandlerController

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;
    }
}