Copy To Clipboard | Lightning Component | Copy sObject Record Link

8

Hello Guys,

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

<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" />
&nbsp;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" />
&nbsp;{!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>
view raw copyToClipboardCmp hosted with ❤ by GitHub

copyToClipboardCmpController

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

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

/* 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+&#39;.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;
}
}
}
view raw copyToClipboardCntrl hosted with ❤ by GitHub

Happy Coding…! 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s