SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Quick-View Issue Card

The Issue HoverCard Formatter is a SharePoint list Column JSON formatter component tailored to enhance user experience when interacting with issue data. It provides a streamlined approach to view essential information about issues through hover cards, offering quick insights in a card format.

Get this format View on GitHub

Shared by Jatin Patil
Updated May 29, 2024

Quick View Issue Card
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.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "View card",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "max-height": "200px",
        "width": "300px",
        "background-color": "#0078d4",
        "color": "#ffffff",
        "padding": "10px",
        "overflow-y": "auto"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "font-size": "18px",
            "font-weight": "bold",
            "width": "100%",
            "color": "#ffcc29"
          },
          "txtContent": "[$Title]"
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "8px",
            "width": "100%"
          },
          "txtContent": "='Description: ' + [$Description]"
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "8px",
            "width": "100%"
          },
          "txtContent": "='Priority: ' + [$Priority]"
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "8px",
            "width": "100%"
          },
          "txtContent": "='Date Reported: ' + toDateString([$DateReported])"
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "8px",
            "width": "100%"
          },
          "txtContent": "='Status: ' + [$Status]"
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "8px",
            "width": "100%"
          },
          "txtContent": "='Assigned To: ' + [$Assignedto0.title]"
        },
        {
          "elmType": "div",
          "style": {
            "margin-bottom": "8px",
            "width": "100%"
          },
          "txtContent": "='Created By: ' + [$Issueloggedby.title]"
        }
      ]
    },
    "openOnEvent": "hover",
    "directionalHint": "topCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}
View sourceLink to this definitiongeneric-quickview-issue-card.json

From the contributor

How to use this sample

Summary

The Issue HoverCard Formatter is a SharePoint list Column JSON formatter component tailored to enhance user experience when interacting with issue data. It provides a streamlined approach to view essential information about issues through hover cards, offering quick insights in a card format.

screenshot of the sample

View requirements

Column Name Type Internal Column Name
Title Single Line Text Title
Issue Description Multiple Lines of Text Description
Priority Choice (Critical, High, Normal, Low) Priority
Status Choice (Blocked, In Progress, Completed, Duplicate) Status
Assigned to Person or Group Assignedto0
Date Reported Date and Time DateReported
Issue logged by Person or Group Issueloggedby
IssueCard Single Line Text IssueCard

Sample

Solution Author(s)
generic-quickview-issue-card.json Jatin Patil

Version history

Version Date Comments
1.0 29 May, 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.

Keep exploring

More formats like this

Missing Information Callout

The Missing Information Callout column formatter provides a clear, accessible visual indicator when a SharePoint list column contains no value.

Explore format

Publishing Status

Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages

Explore format

File Preview Callout with the embed Action

This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.

Explore format