Copy to Clip Board - Widget - Service Portal

[Akil]

Hi All,

I am having the requirement where I need to copy the text filed value  to clipboard when I click on the Copy button. Does anyone come across similar requirement and implemented.

HTML Code :

<a href="{{::item.URL}}" target="_blank"> <input id="copyurl" type="text" value={{::item.URL}} class="form-control" readonly></a>
<div class="input-group-btn">
<button ng-click="Copy()" class="btn btn-default" >${Copy}</button>
</div>

Client script :

$scope.Copy = function() {
copyurl.select();
document.execCommand("copy");
}

Thanks,

Akhil

[Simon Christens]

Hi
Check this:
https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

Seems like you need to get the content of your DIV before you use select

 var copyText = document.getElementById("myInput");

Else there is a Client sided function named: copyToClipboard();

Update:

This is an example to use copy function in a client controller where the URL is copied:

	$scope.copyPermalink = function(){
		
		var v = document.createElement('textarea');
		var permalink = document.location.origin + document.location.pathname + '?id=kb_article&sysparm_article=' + $scope.data.number;
		v.innerHTML = permalink;
		v.className = "sr-only";
		document.body.appendChild(v);
		v.select();
		var result = true;
		try {
			result = document.execCommand('copy');
		}
		catch(err){
			result = false;
		}
		finally{
			document.body.removeChild(v);
		}
		
		if(result === true){
			spUtil.addInfoMessage('Link copied');
		}
		else{
			$window.prompt("${Because of a browser limitation the URL can not be placed directly in the clipboard. Please use Ctrl-C to copy the data and escape to dismiss this dialog}", permalink);
			}
			
		};

[Akil]

Hi Simon,

I tried but it doesn't work.

we are not able to use copyToClipboard(); in widgets, and when used  copyurl.select -> copyurl.select is not a function at ChildScope.$scope.Copy 

[Simon Christens]

My update contains OOB working copy function

It can be found in the client controller of the widget: Knowledge Article Content

https://instance.service-now.com/nav_to.do?uri=sp_widget.do?sys_id=a47ea1cb0b9432004ce28ffe15673a5b

[SatheeshKumar]

There are few issues in your code I fixed those  and added below:

Add CSS styles abd field types as per your need:

HTML:

<div>
<textarea rows="4" cols="50" id="text">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
</textarea>
<button ng-click="c.Copy()" class="btn btn-default" >${Copy}</button> 
  
</div>

widget Client script:

function(spUtil) {
  /* widget controller */
  var c = this;
	
	c.Copy = function() {
		document.getElementById("text").select();
	
   spUtil.addInfoMessage("copied successfully!");
document.execCommand("copy");
document.selection.empty();
}
}

this will copy the text area on click of the button.

-satheesh