Copy To Clipboard | Lightning Component | Copy sObject Record Link

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

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

	}
	})

view raw copyToClipboardCmpController hosted with ❤ by GitHub

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

view raw copyToClipboardCmpHelper hosted with ❤ by GitHub

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+'.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;
	}
	}
	}