How to Replicate copyToClipboard function with Custom Message instead of Copied to Clipboard

mounimouni
Giga Contributor

‎02-20-2018 11:28 PM

I have a requirement to put a custom message in the place of "Copied to Clipboard" when clicked on a share symbol(macro) in KB.

Message needs to be replaced with a message like "Link for the article is copied to memory"..

Could some one help..

Following is the link that has the macro:

https://YOURINSTANCE.service-now.com/nav_to.do?uri=%2Fsys_ui_macro.do%3Fsys_id%3D3783deb1d70031004792a1737e610391%26sysparm_record_target%3Dsys_ui_macro%26sysparm_record_row%3D1%26sysparm_record_rows%3D1%26sysparm_record_list%3DnameSTARTSWITHkb_view_common_footer_metadata_fields%255EORDERBYname

Labels:
0 Helpfuls
  • 2,632 Views
5 REPLIES 5

jonnygrove
Mega Guru

‎04-24-2018 05:53 AM

I had a similar requirement as well where I needed to use the copyToClipboard function in Service Portal.

Here's the original code for the copyToClipboard function. You can pop this into a UI Macro or UI Action client script and just call the function to copy to the clipboard. I've renamed the function so it doesn't conflict with the oob one.

var browserReturnsErroneousStatus = navigator.userAgent.indexOf('MSIE 9') != -1
	 || navigator.userAgent.indexOf('MSIE 10') != -1
	 || navigator.userAgent.indexOf('rv:11') != -1;
function copyKBURLToClipboard(str, messageMethod) {
	if (document.execCommand && isCapableMessageMethod(messageMethod)) {
		var v = document.createElement('textarea');
		v.innerHTML = str;
		v.className = "sr-only";
		document.body.appendChild(v);
		v.select();
		var result = true;
		try {
			result = document.execCommand('copy');
			if (result && browserReturnsErroneousStatus) {
				var checkDiv = document.createElement('textarea');
				checkDiv.className = "sr-only";
				document.body.appendChild(checkDiv);
				checkDiv.select();
				try {
					document.execCommand('paste');
					result = checkDiv.value == str;
				}
				finally {
					document.body.removeChild(checkDiv);
				}
			}
		} catch (e) {
			result = false;
			if (window.jslog)
				jslog("Couldn't access clipboard " + e);
		}
		finally {
			document.body.removeChild(v);
		}
		if (result) {
			fireCopiedMessage(messageMethod);
			return true;
		}
	}
	legacyClipboardCopy(str);
	return false;
}
function isCapableMessageMethod(messageMethod) {
	if (messageMethod == 'custom')
		return true;
	return 'GlideUI' in window;
}
function fireCopiedMessage(messageMethod) {
	if (!messageMethod || messageMethod == 'GlideUI') {
		var span = document.createElement('span');
		span.setAttribute('data-type', 'info');
		// Update your custom text here
		span.setAttribute('data-text', 'Link for the article is copied to memory.');
		span.setAttribute('data-duration', '2500');
		GlideUI.get().fire(new GlideUINotification({
				xml: span
			}));
	}
}
function legacyClipboardCopy(meintext) {
	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", meintext);
}

You can add your custom message by updating the text in line 53

span.setAttribute('data-text', 'Your Text here');

Then use the new function to copy the url to clipboard:

copyKBURLToClipboard(WhatYouWillCopyVariable);
0 Helpfuls

Ankush6
Kilo Contributor

‎06-04-2018 11:29 PM

Hi jonnygrove

 Do you code or idea how u used the above code in service portal ?
 
How u added it to a widget
 
Knowledge18 registrant
165 points

 

 
Knowledge18 registrant
165 points

 

 
Knowledge18 registrant
165 points

 

0 Helpfuls

jonnygrove
Mega Guru
In response to Ankush6

‎06-05-2018 05:05 AM

You can add the CopyToClipboard function to the client script of your Service Portal widget and then call the function when you want to copy something.

You will want to put the text or variable with the info you want to copy as the parameter for the function:

CopyToClipboard('This is text')

var variableName = g_form.getValue('formVariable');
CopyToClipboard(variableName);

 

Function to Add in the Widget Client Script:

var browserReturnsErroneousStatus = navigator.userAgent.indexOf('MSIE 9') != -1
	 || navigator.userAgent.indexOf('MSIE 10') != -1
	 || navigator.userAgent.indexOf('rv:11') != -1;
function CopyToClipboard(str, messageMethod) {
	if (document.execCommand && isCapableMessageMethod(messageMethod)) {
		var v = document.createElement('textarea');
		v.innerHTML = str;
		v.className = "sr-only";
		document.body.appendChild(v);
		v.select();
		var result = true;
		try {
			result = document.execCommand('copy');
			if (result && browserReturnsErroneousStatus) {
				var checkDiv = document.createElement('textarea');
				checkDiv.className = "sr-only";
				document.body.appendChild(checkDiv);
				checkDiv.select();
				try {
					document.execCommand('paste');
					result = checkDiv.value == str;
				}
				finally {
					document.body.removeChild(checkDiv);
				}
			}
		} catch (e) {
			result = false;
			if (window.jslog)
				jslog("Couldn't access clipboard " + e);
		}
		finally {
			document.body.removeChild(v);
		}
		if (result) {	
			if (!messageMethod || messageMethod == 'GlideUI') {
				var span = document.createElement('span');
				span.setAttribute('data-type', 'info');
				// Update your custom text here
				span.setAttribute('data-text', 'Link for the article is copied to memory.');
				span.setAttribute('data-duration', '2500');
				GlideUI.get().fire(new GlideUINotification({
					xml: span
				}));
			}
			return true;
		}
	}
	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", str);
	return false;
}
function isCapableMessageMethod(messageMethod) {
	if (messageMethod == 'custom')
		return true;
	return 'GlideUI' in window;
}

Geetika4
Mega Expert
In response to jonnygrove

‎06-15-2021 01:08 AM

Hello @jonnygrove ,

I am referring this code for m requirement where I need to add a copy URL ui action in the CSM workspace. I am able to copy the URL, only issue I am facing is showing the blue info message which should be shown due to below code 

var span = document.createElement('span');
span.setAttribute('data-type', 'info');
// Update your custom text here
span.setAttribute('data-text', 'Link for the article is copied to memory.');
span.setAttribute('data-duration', '2500');

I have added modified version of your code as shown below code in the workspace client script box. This partially works(copies the url but doesn't show any info message).

It would be great if I can get some insights on this 

function onClick(g_form) {
	var browserReturnsErroneousStatus, 
		document, 
		window,
		url;
	
	browserReturnsErroneousStatus = navigator.userAgent.indexOf('MSIE 9') != -1 || navigator.userAgent.indexOf('MSIE 10') != -1 || navigator.userAgent.indexOf('rv:11') != -1;
	document = top.document;
	window = top.window;
	
	url = "https://" + 	window.location.host + "/now/workspace/csm_workspace/record/sn_customerservice_case/" + g_form.getUniqueValue();
	
	copyToClipboard(url, 'custom');
	
	function copyToClipboard(str, messageMethod) {
        if (document.execCommand && isCapableMessageMethod(messageMethod)) {
            var v = document.createElement('textarea');
            v.innerHTML = str;
            v.className = "sr-only";
            document.body.appendChild(v);
            v.select();
            var result = true;
            try {
                result = document.execCommand('copy');
                if (result && browserReturnsErroneousStatus) {
                    var checkDiv = document.createElement('textarea');
                    checkDiv.className = "sr-only";
                    document.body.appendChild(checkDiv);
                    checkDiv.select();
                    try {
                        document.execCommand('paste');
                        result = checkDiv.value == str;
                    } finally {
                        document.body.removeChild(checkDiv);
                    }
                }
            } catch (e) {
                result = false;
                if (window.jslog)
                    jslog("Couldn't access clipboard " + e);
            } finally {
                document.body.removeChild(v);
            }
            if (result) {
                fireCopiedMessage(messageMethod);
                return true;
            }
        }
        legacyClipboardCopy(str);
        return false;
    }
    function isCapableMessageMethod(messageMethod) {
        if (messageMethod == 'custom')
            return true;
        return 'GlideUI'in window;
    }
    function fireCopiedMessage(messageMethod) {
        if (!messageMethod || messageMethod == 'GlideUI') {
            var span = document.createElement('span');
            span.setAttribute('data-type', 'info');
            span.setAttribute('data-text', 'Copied to clipboard');
            span.setAttribute('data-duration', '2500');
            GlideUI.get().fire(new GlideUINotification({
                xml: span
            }));
        }
    }
    function legacyClipboardCopy(meintext) {
        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", meintext);
    }
}
0 Helpfuls