Copy to clipboard

Have you ever had the need to create a link or button to copy some text from a form or a list to the clipboard?

ServiceNow does that out of the box in a few places, so there is no need to reinvent the wheel!

Let’s have a look at the UI Action “Copy sys_id”:

runContextAction();
function runContextAction() {
    copyToClipboard(g_sysId);
}

Code language: JavaScript (javascript)

Pretty simple, right?

You just need to use the function “copyToClipboard” and pass the text you want to copy as a parameter.

If you are interested in having a look at the function definition, you can find the latest version of the code in your instance: /script/functions_clipboard.js

/*! RESOURCE: /scripts/functions_clipboard.js */
window.NOW = window.NOW || {};
window.NOW.g_clipboard = {};
(function(exports) {
  var browserReturnsErroneousStatus = navigator.userAgent.indexOf('MSIE 9') != -1 ||
    navigator.userAgent.indexOf('MSIE 10') != -1 ||
    navigator.userAgent.indexOf('rv:11') != -1;
  exports.copyToClipboard = function(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', getMessage('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);
  }
})(window.NOW.g_clipboard);;

Code language: JavaScript (javascript)