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

<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

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

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

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

PreviousGM - Flow View Grid NextGM - RelatedList Tabs

Last updated 3 months ago

Was this helpful?