Monday, November 11, 2019

Generic Clone Record Component

In Salesforce classic, we can use URL hack to clone the record and pre populate the data. In lightning, URL hack doesn't work. However, we can use e.force:createRecord component to initialize the values for create record.

For cloning, we need to see previous records and sometime it is custom logic that we need to implement to initialize the value for cloning. Hence, we wrote generic component to take care of this. Currently it only supports fieldset.

We started with Base Clone Component (CloneBaseComponent)

CloneBaseComponent.cmp


1
2
3
4
5
6
<aura:component extensible="true" description="CloneComponentBase" controller="CloneComponentBaseController" implements="force:lightningQuickActionWithoutHeader,lightning:actionOverride,force:hasRecordId">
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="sObjectApiName" type="String"/>
    <aura:attribute name="fieldSetName" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>

CloneBaseComponentController.js


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * Created by Spring7 on 9/19/2019.
 */

({
    doInit: function(component, event, helper) {
        var action = component.get('c.getRecord');
        var recordId = component.get('v.recordId');
        var fieldSetName = component.get('v.fieldSetName');
        var sObjectApiName = component.get('v.sObjectApiName');
        action.setParams({recordId: recordId,fieldSetName:fieldSetName,sObjectApiName:sObjectApiName});
        action.setCallback(this, function (response) {
            if(response.getState() === 'SUCCESS'){
                var defaultFieldValues = response.getReturnValue();
                helper.createRecord(component, defaultFieldValues);
                helper.closeQuickActionModal(component);
            }else if (response.getState() ==="ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        var toastEvent = $A.get("e.force:showToast");
                        toastEvent.setParams({
                            "title": "Error",
                            "message": errors[0].message
                        });
                        toastEvent.fire();
                        helper.closeQuickActionModal(component);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    }
});

CloneBaseComponentHelper.js


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/**
 * Created by Spring7 on 9/19/2019.
 */

({
    closeQuickActionModal : function(component){
        var dismissActionPanel = $A.get('e.force:closeQuickAction');
        dismissActionPanel.fire();
    },
    createRecord : function(component, defaultFieldValues) {
        delete defaultFieldValues['Id'];
        var createRecordEvent = $A.get('e.force:createRecord');
        var sObjectApiName = component.get("v.sObjectApiName");
        createRecordEvent.setParams({
            entityApiName: sObjectApiName,
            defaultFieldValues: defaultFieldValues,
        });
        createRecordEvent.fire();
    }
})

How to use it

In Salesforce, we can not pass parameter to component when it is bound to a button. Hence we created a new component with just a few lines, which extends the base component and tie to a button.

CloneAccount Component
It calls CloneBaseComponent with fieldset (CloneAccount) which will be used for copy


1
2
3
4
5
6
7
8
<!--
 - Created by Spring7 on 9/19/2019.
 -->

<aura:component description="CloneAccount" extends="c:CloneComponentBase" implements="force:lightningQuickActionWithoutHeader,lightning:actionOverride,force:hasRecordId">
    <aura:set attribute="sObjectApiName" value="Account">
    <aura:set attribute="fieldSetName" value="CloneAccount">
</aura:set></aura:set></aura:component>

CloneAccount Button

We will need to bind this component to button



CloneAccount FieldSet
We will need to create the field set which will be used by clone base component on which fields to be copied.



In UI, we can see fields are cloned now:




source code can be downloaded from unmanaged package or github

3 comments:

Babar said...

it's a very helpful and attractive post.

https://bolgameshowluckydraw.blogspot.com

Babar said...

keep on touching such a great post.

https://cocacolaluckywinner1.blogspot.com

Lucky draw head office number said...

It's a so great and tremendous post.

https://kbcinquiryoffice.blogspot.com