How to copy hyperlink to clipboard from UIB client script

Thulasidharan
ServiceNow Employee
ServiceNow Employee

Hello everyone,
            There is one functionality requirement where I need to copy the content to clipboard that is available in the component which contains link as well. So If I paste the copied content, it should show as hyperlink.

I found the function 'article action include' from 'ux_client_script_include' table to copy the content to clipboard. But it is not handling for the hyperlink things.

UIB Client script:

function handler({
    api,
    event,
    helpers,
    imports
}) {
    (async () => {
        try {
            var clipbordUtility = imports["sn_km_uib.Article actions include"]();
            var clipboard = clipbordUtility.getClipboard();
 
            var recommendationTitle = event.context.item.value.title;
            var recommendation = event.context.item.value.reason;
            var link = event.context.item.value.link;
 
            var subject = 'ServiceNow Impact recommendation: ' + `"${recommendationTitle}"`;
            var body = subject + '\n' + recommendation + '\n' + '<a href=' + `"${link}"` + '>Link</a>';
            body = renderHTML(body);
            var message = clipbordUtility.getTrimmedValue(body);
 
            await clipboard.writeText(body);
        } catch (e) {
            api.emit('NOW_UXF_PAGE#ADD_NOTIFICATIONS', {
                items: [{
                    icon: 'alert-circle-outline',
                    status: 'negative',
                    content: "Failed to copy to clipboard: " + e.message,
                    action: {
                        type: 'dismiss'
                    }
                }]
            });
        }
    })();

    function renderHTML(message) {
    let text = message;
    text = text.replace(/<\s*\/?\s*p\s*>/gi, '\n');
    text = text.replace(/<\s*br\s*\/?\s*>/gi, '\n');
    text = text.replace(/<(?!a\s+href|\/a>)[^>]+>/g, '');
    text = text.replace(/\n\s*\n/g, '\n\n');
    text = text.replace(/&#(\d+);/g, (_, code) => String.fromCharCode(code));
    text = text.split('\n').map(line => line.trim()).join('\n');
    return text.trim();
}
}


article action include:

function include() {
	return {
		getOrigin: function() {
			return location.origin;
		},
		getClipboard: function() {
			return navigator.clipboard;
		},
		getTrimmedValue: function(value) {
			return (new DOMParser)
				.parseFromString(value, 'text/html')
				.documentElement.textContent.toString()
				.trim();
		}
	};
}

 Input before passing to renderHTML function: 
'ServiceNow Impact recommendation: "Instance Observer Add-on"\n<p>Instance Observer provides a comprehensive overview of Instance health and Performance metrics.\n<a href="https://www.servicenow.com>Link</a>

Output from renderHTML:
Instance Observer Add-on"\n\nInstance Observer provides a comprehensive overview of Instance health and Performance metrics
<a href="https://www.servicenow.com>Link</a>

If I paste this output in outlook or even in anywhere this is not getting converted as hyperlink

Please someone help me with this issue.

Thanks!🙂


0 REPLIES 0