Search code examples
sharepoint-onlinesharepoint-list

Copy field button sharepoint list

How can I insert a button in a SharePoint Online List field that allows users to copy the text from that field to their clipboard?

Solution

  • Unfortunately you can not add JavaScript to Sharepoint Lists. Therefore as an alternative you have to send the user to a custom webpage where the clipboard can be set.

    The following JSON format does exactly this:

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "iconName": "Copy",
    "target": "_blank",
    "class": "ms-borderColor-white ms-borderColor-themePrimary--hover",
    "href": "='https://sancarn.github.io/copy-to-clipboard/index.html?copy=' + @currentField"
  },
  "style": {
    "color": "#272727",
    "text-decoration": "none",
    "font-size": "14px",
    "border-bottom-width": "1px",
    "border-bottom-style": "solid",
    "min-width": "400px"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "5px"
      }
    }
  ]
}

    This will add a copy icon as follows:

    enter image description here

    And clicking the link will take you to a custom open source site hosted on github I made to copy the text in the field to the clipboard.

    Example: https://sancarn.github.io/copy-to-clipboard/index.html?copy=hello%20world

    When opened from sharepoint the window will close after 1 second after the clipboard is populated. Unfortunately this time does appear to be required.

    EDIT: Please note that this solution can be extremely annoying in some circumstances. In reality, the best option is to encourage users to right click and select copy field.