In this blog post, I am going to share the ‘Copy To Clipboard’ functionality in the lightning component using javascript. While working with the records in Salesforce sometimes user needs the record link to share in an email or need to use in the documentation or somewhere else.
This component will copy the record link in the clipboard in just a single click, the user does not need to copy the record link from browser URL. The component can be used for every standard and custom object, the user just needs to add the component on the object detail page and needs to click on the link button icon, the record link will be copied in the clipboard.
Find the full component code below.
copyToClipboardCmp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component controller="copyToClipboardCntrl" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" > | |
| <aura:attribute name="recordId" type="string" /> | |
| <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> | |
| <aura:attribute name="wrapperObj" type="Object"/> | |
| <div class="slds"> | |
| <div class="slds-grid"> | |
| <div class="slds-col slds-size--12-of-12"> | |
| <div class="slds-page-header" style="border-radius: 0px; border-right: 0px;border-left: 0px;border-top: 0px; | |
| box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);"> | |
| <lightning:icon iconName="utility:copy_to_clipboard" alternativeText="Copy To Clipboard" size="small" /> | |
| COPY TO CLIPBOARD | |
| </div> | |
| </div> | |
| </div> | |
| <table class="slds-table slds-table--bordered"> | |
| <thead> | |
| <tr> | |
| <th>NAME</th> | |
| <th>LINK</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <lightning:icon iconName="{!v.wrapperObj.iconName}" alternativeText="{!v.wrapperObj.iconName}" size="small" /> | |
| {!v.wrapperObj.sObjectName}</td> | |
| <td> | |
| <lightning:buttonIcon title="{!v.wrapperObj.recUrlLink}" aura:id="link" value="{!index}" iconName="utility:link" alternativeText="Link" onclick="{!c.copyLink}"/> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </aura:component> |
copyToClipboardCmpController
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| doInit : function(component, event, helper) { | |
| //get the object details from apex | |
| helper.getsObjectName(component,event,helper); | |
| }, | |
| copyLink:function(component,event,helper){ | |
| //dynamically creating html component | |
| var hiddenInputEle = document.createElement("input"); | |
| //get the title of clicked element (record link) | |
| let val = event.getSource().get("v.title"); | |
| //set value attribute as actual record link | |
| hiddenInputEle.setAttribute("value", val); | |
| //append the element in the document body | |
| document.body.appendChild(hiddenInputEle); | |
| // select the content | |
| hiddenInputEle.select(); | |
| // Execute the copy command | |
| document.execCommand("copy"); | |
| document.body.removeChild(hiddenInputEle); | |
| //Show toast message after link copied in the clipboard | |
| var toastEvent = $A.get("e.force:showToast"); | |
| toastEvent.setParams({ | |
| mode: 'sticky', | |
| title: 'Success!', | |
| message: 'Link has been copied to clipboard.', | |
| type: 'success' | |
| }); | |
| toastEvent.fire(); | |
| } | |
| }) |
copyToClipboardCmpHelper
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| getsObjectName : function(component, event, helper) { | |
| let action = component.get("c.fetchsObjectDetails"); | |
| action.setParams({ | |
| "recId" : component.get("v.recordId") | |
| }); | |
| action.setCallback(this,function(response){ | |
| let state = response.getState(); | |
| if(state == 'SUCCESS'){ | |
| let result = response.getReturnValue(); | |
| console.log('Result returned: '+result); | |
| component.set("v.wrapperObj",result); | |
| }else{ | |
| console.log('Something went wrong!'); | |
| } | |
| }); | |
| $A.enqueueAction(action); | |
| } | |
| }) |
copyToClipboardCntrl
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Name:copyToClipboardCntrl | |
| * Description: This Apex class retrieve the sObject details such as Name, record link from database. | |
| * Created Date: 01/05/2019 | |
| * LastModified Date:01/05/2019 | |
| * Created By: Arun Kumar | |
| * Version: 1.0 | |
| */ | |
| public class copyToClipboardCntrl { | |
| @AuraEnabled | |
| public static wrapperCls fetchsObjectDetails(Id recId){ | |
| string sObjectTypeName = recId.getSObjectType().getDescribe().getName(); | |
| SObject record = Database.query('Select Id, Name From ' + sObjectTypeName + ' Where Id = :recId'); | |
| system.debug('Record = '+record); | |
| String iconName; | |
| String recordURL; | |
| string sObjectName = sObjectTypeName; | |
| List<Schema.DescribeTabSetResult> tabDescList = Schema.describeTabs(); | |
| List<Schema.DescribeTabResult> tabDescResult = new List<Schema.DescribeTabResult>(); | |
| List<Schema.DescribeIconResult> iconDescResult = new List<Schema.DescribeIconResult>(); | |
| for(Schema.DescribeTabSetResult tdl : tabDescList) { tabDescResult.addAll(tdl.getTabs()); } | |
| for(Schema.DescribeTabResult tdr : tabDescResult) { | |
| if( sObjectName == tdr.getSobjectName() ) { | |
| if( tdr.isCustom() == true ) { | |
| iconDescResult.addAll(tdr.getIcons()); | |
| } else { | |
| iconName = 'standard:'+sObjectName.toLowerCase(); | |
| } | |
| } | |
| } | |
| for (Schema.DescribeIconResult idr : iconDescResult) { | |
| if (idr.getContentType() == 'image/svg+xml'){ | |
| iconName = 'custom:' + idr.getUrl().substringBetween('custom/','.svg').substringBefore('_'); | |
| break; | |
| } | |
| } | |
| system.debug('Tab Icon Name'+ iconName); | |
| String urlInstance = String.valueof(System.URL.getSalesforceBaseURL().gethost()); | |
| String s2 = urlInstance.removeEndIgnoreCase('.my.salesforce.com'); | |
| String finalURL = 'https://'+s2+'.lightning.force.com/lightning/r/'+sObjectTypeName+'/'+recId+'/view'; | |
| String fieldValue = (String) record.get('Name'); | |
| system.debug('Record: ' +fieldValue); | |
| wrapperCls wObject = new wrapperCls(fieldValue,finalURL,iconName); | |
| return wObject; | |
| } | |
| public class wrapperCls{ | |
| @AuraEnabled | |
| public String sObjectName; | |
| @AuraEnabled | |
| public String recUrlLink; | |
| @AuraEnabled | |
| public String iconName; | |
| public wrapperCls(string sObjectName,String recUrlLink,String iconName){ | |
| this.sObjectName = sObjectName; | |
| this.recUrlLink = recUrlLink; | |
| this.iconName = iconName; | |
| } | |
| } | |
| } |
Happy Coding…! 
