Copy to clipboard in UI Builder

[Bernard Esterhu]

Is there any way to "Copy to clipboard" in UI Builder? We need a button that a user can click that will copy text in a text input area to the clipboard.

I know this can be done as a UI Action, but I cannot find a way to do this in UI Builder. 

[Community Alums]

Hi @Bernard Esterhu ,

UI Action is the best recommended way.

Unfortunately in UI builder, we don't have this functionality OOTB as of now.

[arvycoralde]

I have tried both copyToClipboard("text"); and navigator.clipboard.writeText("text");.

Neither worked. @Sandeep how would you suggest handling this for a button in UI Builder?

[Jonatan Fruensg · Accepted solution]

We managed to do this.
After updating Service Operations Workspace and the UI-builder to the latest build, we discovered that there was an OOTB "Copy to Clipboard" button under "response templates".

We adapted this solution in another UI-builder page.

All you need to do is:

1. Add a Client Script in the UI-builder (and make sure an event can trigger the script)
2. Add the client script include named: "Article actions include"
3. Use the following script, and adjust it to your needs:

/**
 * @Param {params} params
 * @Param {api} params.api
 * @Param {any} params.event
 * @Param {any} params.imports
 * @Param {ApiHelpers} params.helpers
 */
async function handler({
    api,
    event,
    helpers,
    imports
}) {
    var clipbordUtility = imports["sn_km_uib.Article actions include"]();
    var clipboard = clipbordUtility.getClipboard();
    var message = event.payload.item.value; //replace event.payload with what should be copied
    await helpers.writeText(message);

     api.emit('NOW_UXF_PAGE#ADD_NOTIFICATIONS', {
            items: [{
                id: 'rt_copy_to_clipboard_success_',
                icon: 'check-circle-outline',
                status: 'positive',
                content: "Copied " + message + " to clipboard",
                action: {
                    type: 'dismiss'
                }
            }]
        });

}

 
Hope this helps...

OOTB script may be located under the following experience:

"SOW - Sidebar tabs top" > Response Templates (Response Templates SNC) > Client script: "Copy to clipboard"