How To: Create a Quick Action Lightning Component for Super Clone Pro

URL custom buttons can be used for both Salesforce Classic and Lightning. However, sometimes extra logic or validations need to be added before the Super Clone Pro page is loaded. In Classic, this could be done with a Javascript custom button. In Lightning, we need to use a different approach because Lightning doesn’t support Javascript buttons. Below is an example of how to use a Lightning Component in a Quick Action that will first check a value on the record and then load the Super Clone Pro page.

First, we will create a new Lightning Component. An attribute is added (force:lightningQuickAction), so it can be used in a Quick Action. A second attribute is added (force:hasRecordId), so it receives the record Id for the record’s page. The markup uses the Lightning Data Service to retrieve information from the record that we will use in our logic, and a message block that will display if the user should not load the Super Clone Pro page.

<aura:component implements="force:lightningQuickAction,force:hasRecordId">
    <aura:attribute name="showMsg" type="Boolean" />
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    
    <!-- use Lightning Data Service to retrieve record information -->
    <force:recordData recordId="{!v.recordId}"
                      targetRecord ="{!v.record}"
                      targetFields ="{!v.simpleRecord}"
                      fields="Id, Name, Do_Not_Clone__c"
                      recordUpdated="{!c.handleRecordUpdated}"/>
    
    <!-- message to tell the use why the record cannot be cloned -->
    <aura:if isTrue="{!v.showMsg}">
        <div class="slds-text-heading_small slds-text-align_center">The record {!v.simpleRecord.Name} cannot be cloned.</div>
    </aura:if>
    
    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>
    
</aura:component>

Next, create a Controller for the Lightning Component. This is where we will write Javascript logic to determine if the record should be cloned or not.

({
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
            //for testing: console.log(component.get("v.simpleRecord.Name"));
            //for testing: console.log(component.get("v.simpleRecord.Id"));
            
            if (true == component.get("v.simpleRecord.Do_Not_Clone__c")) {
                component.set("v.showMsg", true);
                return;
            }
            
            // set the URL event parameters to the Super Clone Pro page
            var urlEvent = $A.get("e.force:navigateToURL");
            urlEvent.setParams({
                "url": '/apex/lcrm_scp__scpclone?lss=1&cfg=MyConfig&rid=' + component.get("v.simpleRecord.Id")
            });
            
            // fire the page navigation event
            urlEvent.fire();
        }
    }
})

Finally, navigate to the Object’s “Buttons, Links, and Actions” setup page. Click the “New Action” button. Select “Lightning Component” in the “Action Type”. Then the name of the Lightning Component that we created should display in a list of available Lightning Components.

You will now be able to add this Action to the page layout that is used in the Lightning Experience.