Salesforce Lightning Component to display copy to clipboard functionality
‘Copy to Clipboard’ functionality is not available in Salesforce Lightning but since everything is shifting to Lightning, this simple yet important functionality has become the need of the hour.
In this technical blog, we will talk about how you can implement ‘Copy to Clipboard’ functionality in the Salesforce Lightning component using JavaScript.
You don’t need to copy the record link from the browser URL anymore. This component enables you to copy any record link from any input field or hard-code text on a click of a button. This can be used for every standard and custom object. All you need to do is, add the component on the object detail page and click on the link button icon, and the text will be copied in the clipboard.
With this component, you can copy text from any input field.
- Utility icons are used throughout the interface and are SVG’s for extensibility.
- document.createElement(): Creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized
- appendChild(): Appends a node as the last child of a node.
- removeChild() method: removes a specified child node of the specified element.
- getSource(): Determines which component fired an event.
4 easy steps to develop Lightning component:
Step1. Lightning Component: Create Lightning component with name- ‘CopyTextToClipboardLightningComponent.cmp’
Step2. JS Controller: ‘CopyTextToClipboardLightningComponentController.js’
Step3. Helper JS Controller: ‘CopyTextToClipboardLightningComponentHelper.js’
Step4. Test Application for Copy to Clipboard functionality: ‘CopyTextToClipboardFunctionality.app’
This simple functionality is going to help you a lot while working with the records. Try it out and let us know how you liked it!
India 
USA
UK
Canada