Extend SharePoint Columns using Custom Card with JSON

Check out this blog post to extend the column by using Custom card feature. How to show image when hovering the SharePoint List Column.

Recently a custom card feature is added to SharePoint List Formatting. By using that feature, SharePoint allows us to add the customized cards to the column, when ever hovering / clicking in List formatting (Column / View).

The below is the schema for custom card in Column / View formatting as follows,

[code lang=”js”]
"customCardProps": {
"type": "object",
"description": "Object that defines custom card props on hover/click",
"properties": {
"openOnEvent": {
"description": "Event name to decide on which the customCard should open",
"type": "string",
"pattern": "(click|hover)$"
"directionalHint": {
"description": "Specify the direction relative to the target in which CustomCard will be positioned",
"enum": [
"isBeakVisible": {
"description": "Specify if the beak is to be shown or not",
"type": "boolean"
"formatter": {
"description": "JSON object that defines formatting for customCards",
"$ref": "#/definitions/elm"
"required": [

Based on the schema, I like to show the simple example to display the image when ever we hovering over the Title column.

Output for the above JSON snippet is pictured below,

Custom Card in Column Formatting

Shantha Kumar
Shantha Kumar
Articles: 270

One comment

  1. Can you please explain where to paste this JSON. If I place it in the format column for my image I get all sorts of errors. What am I missing.

Leave a Reply

Your email address will not be published. Required fields are marked *