1

I have applied custom formatting to the Name Column in the Documents library.

I do this because I want to make sure some types of files open in preview mode.

My code:

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "txtContent": "@currentField",
      "attributes": {
        "target": "_blank",
        "class": "ms-Link sp-css-color-neutralPrimary",
        "href": "=if([$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'pptx', @currentWeb + '/_layouts/15/Doc.aspx?sourcedoc='+ [$UniqueId] + '&action=View', '')"
      },
      "style": {
        "display": "=if([$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'pptx','block', 'none')",
        "line-height": "42px",
        "font-size": "14px",
        "white-space": "nowrap",
        "text-overflow": "ellipsis",
        "overflow": "hidden"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "customRowAction": {
        "action": "defaultClick"
      },
      "attributes": {
        "class": "ms-Link sp-css-color-neutralPrimary"
      },
      "style": {
        "display": "=if([$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'pptx','none', 'block')",
        "line-height": "42px",
        "font-size": "14px",
        "white-space": "nowrap",
        "text-overflow": "ellipsis",
        "overflow": "hidden"
      }
    },
   {
  "elmType": "span",
  "customRowAction": {
    "action": "share"
  },
  "attributes": {
          "iconName": "Share",
          "class": "sp-field-quickActions ms-Button-flexContainer"
    },
  "style": {
  "display": "block",
  "line-height": "42px",
  "font-size": "18px",
  "white-space": "nowrap",
  "text-overflow": "ellipsis",
  "overflow": "hidden",
  "margin-left": "auto"
  },
  "customCardProps": {
  "formatter": {
    "elmType": "div",
    "txtContent": "Share the selected item with people"
  },
  "openOnEvent": "hover",
  "directionalHint": "bottomCenter",
  "isBeakVisible": true,
  "beakStyle" : {
    "backgroundColor": "white"
    }
  }
},
{
  "elmType": "span",
  "customRowAction": {
    "action": "openContextMenu"
  },
  "attributes": {
          "iconName": "MoreVertical",
          "class": "sp-field-quickActions--hover ms-Button- 
          flexContainer"
    },
  "style": {
  "display": "flex",
  "line-height": "42px",
  "font-size": "18px",
  "white-space": "nowrap",
  "text-overflow": "ellipsis",
  "overflow": "hidden",
  "height": "100%",
  "width": "40px",
  "flex-wrap": "nowrap",
  "justify-content": "center",
  "align-items": "center"
  },
  "customCardProps": {
  "formatter": {
    "elmType": "div",
    "txtContent": "Show actions"
  },
  "openOnEvent": "hover",
  "directionalHint": "bottomCenter",
  "isBeakVisible": true,
  "beakStyle" : {
    "backgroundColor": "white"
    }
  }
}
  ]

However, how do I add the default hover that a normal list have on files like Share and Edit?

Example: enter image description here

6

1 Answer 1

0

This is a expected behavior while applying JSON formatting on SharePoint list/library column.

When you add custom JSON formatting on column, it removes all the default functionality provided by SharePoint.

For your requirements, you can use share and openContextMenu actions in customRowAction to add those functionality back in your JSON

Documentation: JSON formatting - customRowAction

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.