How to copy hyperlink to clipboard from UIB client script

[Thulasidharan]

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!🙂

[AttilaVarga · Accepted solution]

Hi @Thulasidharan,

The solution is a bit tricky, but it is can be solved. I have created a short video from a possible solution.

I hope it helps. 🙂

[AttilaVarga · Accepted solution]

Hi @Thulasidharan,

The solution is a bit tricky, but it is can be solved. I have created a short video from a possible solution.

I hope it helps. 🙂

[Thulasidharan]

Hey @AttilaVarga ,

Really thanks a lot🙂! I really appreciate for your effort. I somehow managed to do that similarly like what you have done in this video, But I never thought this would be very simple like this.


Now I'm having some with different kind of requirement like, When we link an button in the page, it needs to open the outlook or any email and needs to create a draft mail with the HTML contents rendered in it.

For an example, If I click this button, then it should open the outlook with an subject and body autofilled with the content that we send

Subject: Hi there, We are ServiceNow

Body:

Access your ServiceNow University Course from this link: Link



---------------------------------


Like this, I need to do it. But with using mailto property, I only able to do something like in the below picture

/**
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 */
function evaluateEvent({
    api,
    event,
    helpers
}) {
    var recommendationTitle = event.context.item.value.title;
    var recommendation = event.context.item.value.reason;
    var courseLinks = event.context.item.value.aiLinks;
    if (!Array.isArray(courseLinks)) {
        courseLinks = courseLinks ? [courseLinks] : [];
    }
    var outcome = api.data['recommendation-controller'].inputs.recordName;

    var subject = helpers.translateSync('ServiceNow Impact recommendation: "{0}"', recommendationTitle);
    var links = courseLinks.map(link =>
        `${link.name}: ${link.courseLink}`
    ).join('\n\n');

    recommendation = stripHtmlTags(recommendation);

    var linkText = courseLinks.length > 1 ? 'links' : 'link';

    var body = helpers.translateSync(
        'View this ServiceNow Impact recommendation to improve outcome performance for "\{0}"\ \n\n {1} \n\n Access the below ' + linkText + ' to view: \n\n {2}',
        [outcome, recommendation, links]
    );
    var mail = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    return {
        route: null,
        fields: null,
        params: null,
        redirect: null,
        passiveNavigation: null,
        title: null,
        multiInstField: null,
        targetRoute: null,
        external: {
            url: mail
        },
        navigationOptions: null
    };

    function stripHtmlTags(html) {
        if (!html) return '';
        return html
            .replace(/<[^>]*>/g, '')
            .replace(/&nbsp;/g, ' ')
            .replace(/&amp;/g, '&')
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>')
            .replace(/&quot;/g, '"')
            .replace(/&#39;/g, "'")
            .replace(/\s+/g, ' ')
            .trim(); 
    }
}

I can't bind the link and text together when I draft an mail with the content. But I see lot of mails sends by automation, they are able to bind the text and link together to make it as hyperlink


If possible, can someone help on this thing

Thanks!!

[AttilaVarga]

Hey @Thulasidharan,

Just came to my mind that maybe you can try the Next Experience component, called Email Composer.

If you use this one, you can predefine the content and you don't need to use Outlook or any other email clients.

[Thulasidharan]

Hi @AttilaVarga , Thanks again. I haven't noticed that you replied back to my question. But my use case is to make the customer to open the outlook or other email clients in a draft state with the subject and body filled with the content. So that the customer can send those emails to their respective clients or to others.

So it mean, I can't use this email composer right?

Is there is any other email property that can allow the user to open the outlook with draft contetn when they click the button in page

Thanks