Back to column formats

Column formattingSharePoint Online

Custom Approver Hover Card

The approval hover card provides an intuitive, streamlined way for users to quickly access key details about an approval details without navigating away from their current task or screen.

Get this format View on GitHub

Shared by Sudeep Ghatak
Updated Sep 24, 2024

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "txtContent": "Approver Commments",
      "style": {
        "font-weight": "bold",
        "margin-bottom": "4px"
      }
    }
  ],
  "customCardProps": {
    "openOnEvent": "hover",
    "directionalHint": "bottomleft",
    "isBeakVisible": false,
    "formatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "padding": "10px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "font-size": "14px",
            "padding": "10px",
            "border-radius": "5px",
            "background-color": "#f0f0f0",
            "margin-bottom": "8px",
            "text-align": "left",
            "width": "95%",
            "border": "1px solid",
            "border-color": "=if([$Approver1Response] == 'Pending', '#17a2b8', if([$Approver1Response] == 'Approved', '#28a745', '#dc3545'))"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "img",
                  "attributes": {
                    "src": "=getUserImage([$Approver1.email],'l')"
                  },
                  "style": {
                    "width": "50px",
                    "height": "50px",
                    "border-radius": "50%",
                    "margin-right": "10px"
                  }
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver1.title]",
                      "style": {
                        "font-weight": "bold",
                        "font-size": "16px"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver1RespondedOn]",
                      "style": {
                        "font-size": "12px",
                        "color": "#666666"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "justify-content": "space-between",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "span",
                  "style": {
                    "background-color": "=if([$Approver1Response] == 'Pending', '#17a2b8', if([$Approver1Response] == 'Approved', '#28a745', '#dc3545'))",
                    "color": "#fff",
                    "padding": "2px 8px",
                    "border-radius": "4px",
                    "font-size": "12px"
                  },
                  "txtContent": "[$Approver1Response]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "flex",
                    "gap": "8px"
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "txtContent": "[$Approver1Comments]",
              "style": {
                "color": "#666666",
                "font-size": "14px"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "font-size": "14px",
            "padding": "10px",
            "border-radius": "5px",
            "background-color": "#f0f0f0",
            "margin-bottom": "8px",
            "text-align": "left",
            "width": "95%",
            "border": "1px solid",
            "border-color": "=if([$Approver2Response] == 'Pending', '#17a2b8', if([$Approver2Response] == 'Approved', '#28a745', '#dc3545'))"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "img",
                  "attributes": {
                    "src": "=getUserImage([$Approver2.email],'l')"
                  },
                  "style": {
                    "width": "50px",
                    "height": "50px",
                    "border-radius": "50%",
                    "margin-right": "10px"
                  }
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver2.title]",
                      "style": {
                        "font-weight": "bold",
                        "font-size": "16px"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver2RespondedOn]",
                      "style": {
                        "font-size": "12px",
                        "color": "#666666"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "justify-content": "space-between",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "span",
                  "style": {
                    "background-color": "=if([$Approver2Response] == 'Pending', '#17a2b8', if([$Approver2Response] == 'Approved', '#28a745', '#dc3545'))",
                    "color": "#fff",
                    "padding": "2px 8px",
                    "border-radius": "4px",
                    "font-size": "12px"
                  },
                  "txtContent": "[$Approver2Response]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "flex",
                    "gap": "8px"
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "txtContent": "[$Approver2Comments]",
              "style": {
                "color": "#666666",
                "font-size": "14px"
              }
            }
          ]
        }
      ]
    }
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "txtContent": "Approver Commments",
      "style": {
        "font-weight": "bold",
        "margin-bottom": "4px"
      }
    }
  ],
  "customCardProps": {
    "openOnEvent": "hover",
    "directionalHint": "bottomleft",
    "isBeakVisible": false,
    "formatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "padding": "10px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "font-size": "14px",
            "padding": "10px",
            "border-radius": "5px",
            "background-color": "#f0f0f0",
            "margin-bottom": "8px",
            "text-align": "left",
            "width": "95%",
            "border": "1px solid",
            "border-color": "=if([$Approver1Response] == 'Pending', '#17a2b8', if([$Approver1Response] == 'Approved', '#28a745', '#dc3545'))"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "img",
                  "attributes": {
                    "src": "=getUserImage([$Approver1.email],'l')"
                  },
                  "style": {
                    "width": "50px",
                    "height": "50px",
                    "border-radius": "50%",
                    "margin-right": "10px"
                  }
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver1.title]",
                      "style": {
                        "font-weight": "bold",
                        "font-size": "16px"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver1RespondedOn]",
                      "style": {
                        "font-size": "12px",
                        "color": "#666666"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "justify-content": "space-between",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "span",
                  "style": {
                    "background-color": "=if([$Approver1Response] == 'Pending', '#17a2b8', if([$Approver1Response] == 'Approved', '#28a745', '#dc3545'))",
                    "color": "#fff",
                    "padding": "2px 8px",
                    "border-radius": "4px",
                    "font-size": "12px"
                  },
                  "txtContent": "[$Approver1Response]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "flex",
                    "gap": "8px"
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "txtContent": "[$Approver1Comments]",
              "style": {
                "color": "#666666",
                "font-size": "14px"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "font-size": "14px",
            "padding": "10px",
            "border-radius": "5px",
            "background-color": "#f0f0f0",
            "margin-bottom": "8px",
            "text-align": "left",
            "width": "95%",
            "border": "1px solid",
            "border-color": "=if([$Approver2Response] == 'Pending', '#17a2b8', if([$Approver2Response] == 'Approved', '#28a745', '#dc3545'))"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "img",
                  "attributes": {
                    "src": "=getUserImage([$Approver2.email],'l')"
                  },
                  "style": {
                    "width": "50px",
                    "height": "50px",
                    "border-radius": "50%",
                    "margin-right": "10px"
                  }
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver2.title]",
                      "style": {
                        "font-weight": "bold",
                        "font-size": "16px"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "[$Approver2RespondedOn]",
                      "style": {
                        "font-size": "12px",
                        "color": "#666666"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "justify-content": "space-between",
                "align-items": "left",
                "margin-bottom": "8px"
              },
              "children": [
                {
                  "elmType": "span",
                  "style": {
                    "background-color": "=if([$Approver2Response] == 'Pending', '#17a2b8', if([$Approver2Response] == 'Approved', '#28a745', '#dc3545'))",
                    "color": "#fff",
                    "padding": "2px 8px",
                    "border-radius": "4px",
                    "font-size": "12px"
                  },
                  "txtContent": "[$Approver2Response]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "flex",
                    "gap": "8px"
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "txtContent": "[$Approver2Comments]",
              "style": {
                "color": "#666666",
                "font-size": "14px"
              }
            }
          ]
        }
      ]
    }
  }
}

Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

/customCardProps/directionalHint must be equal to one of the allowed values

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

The approval hover card provides an intuitive, streamlined way for users to quickly access key details about an approval details without navigating away from their current task or screen.

screenshot of the sample

View requirements

This format can be applied to any column type. In the example it has been applied on ApproverComments.

Internal Name	Type	Notes
Approver1Comments	Single line of text
Approver2Comments	Single line of text
Approver1Response	Choice	"Approved","Rejected","Pending"
Approver2Response	Choice	"Approved","Rejected","Pending"
Approver1	Person or Group
Approver2	Person or Group
Approver1RespondedOn	Date and Time
Approver2RespondedOn	Date and Time

Sample

Solution	Author(s)
generic-custom-hover-card-approvers.json	Sudeep Ghatak

Version history

Version	Date	Comments
1.0	September 24, 2024	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.