SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Vinyl Record / Album Sleeve

This SharePoint JSON view formatting sample transforms list items into vinyl record album cards with a sleeve, a record peeking out, and a metadata column.

Get this format View on GitHub

Shared by Sudeep Ghatak
Updated May 11, 2026

Vinyl Record / Album Sleeve formatting preview
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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "row",
      "align-items": "stretch",
      "background-color": "#1f1f27",
      "border": "1px solid #2a2a35",
      "border-radius": "8px",
      "box-shadow": "0 6px 18px rgba(0,0,0,0.4)",
      "margin": "16px auto",
      "max-width": "820px",
      "padding": "20px 24px",
      "color": "#f0f0f3",
      "font-family": "Arial, sans-serif"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "200px",
          "height": "200px",
          "flex-shrink": "0",
          "background-color": "#0e3a73",
          "border-radius": "3px",
          "padding": "14px",
          "display": "flex",
          "flex-direction": "column",
          "justify-content": "space-between",
          "box-shadow": "0 4px 10px rgba(0,0,0,0.5)"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Label]",
            "style": {
              "font-size": "9px",
              "letter-spacing": "2px",
              "text-transform": "uppercase",
              "color": "rgba(255,255,255,0.85)"
            }
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "22px",
                  "font-weight": "bold",
                  "line-height": "22px",
                  "color": "#ffffff",
                  "margin-bottom": "4px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Artist]",
                "style": {
                  "font-size": "13px",
                  "font-weight": "bold",
                  "color": "rgba(255,255,255,0.92)"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "space-between",
              "font-size": "9px",
              "letter-spacing": "1px",
              "text-transform": "uppercase",
              "color": "rgba(255,255,255,0.85)"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "=toString([$Year])"
              },
              {
                "elmType": "span",
                "txtContent": "33 RPM"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "200px",
          "height": "200px",
          "flex-shrink": "0",
          "margin-left": "-50px",
          "background-color": "#0a0a0a",
          "border-radius": "100px",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
          "box-shadow": "0 6px 14px rgba(0,0,0,0.6)",
          "border": "1px solid #1a1a1a"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "150px",
              "height": "150px",
              "border-radius": "75px",
              "background-color": "#0a0a0a",
              "border": "1px solid #181818",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "110px",
                  "height": "110px",
                  "border-radius": "55px",
                  "background-color": "#0a0a0a",
                  "border": "1px solid #1a1a1a",
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "width": "80px",
                      "height": "80px",
                      "border-radius": "40px",
                      "background-color": "#c0392b",
                      "display": "flex",
                      "flex-direction": "column",
                      "align-items": "center",
                      "justify-content": "center",
                      "color": "#ffffff",
                      "text-align": "center",
                      "border": "1px solid rgba(255,255,255,0.2)"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "[$Label]",
                        "style": {
                          "font-size": "8px",
                          "letter-spacing": "1px",
                          "text-transform": "uppercase",
                          "font-weight": "bold"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Side]",
                        "style": {
                          "font-size": "11px",
                          "font-weight": "bold",
                          "margin": "3px 0 2px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "width": "6px",
                          "height": "6px",
                          "border-radius": "3px",
                          "background-color": "#0a0a0a",
                          "margin-top": "2px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "padding-left": "20px",
          "display": "flex",
          "flex-direction": "column",
          "justify-content": "space-between",
          "min-width": "180px"
        },
        "children": [
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "txtContent": "=toString([$Year]) + ' - ' + [$Genre]",
                "style": {
                  "font-size": "10px",
                  "letter-spacing": "2px",
                  "text-transform": "uppercase",
                  "color": "#9aa0a6",
                  "margin-bottom": "6px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "22px",
                  "font-weight": "bold",
                  "line-height": "24px",
                  "color": "#f0f0f3"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Artist]",
                "style": {
                  "font-size": "14px",
                  "font-weight": "bold",
                  "color": "#c8c8d0",
                  "margin": "4px 0 12px"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-wrap": "wrap",
                  "margin-bottom": "10px"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Genre]",
                    "style": {
                      "font-size": "10px",
                      "padding": "3px 9px",
                      "border-radius": "10px",
                      "border": "1px solid rgba(255,255,255,0.18)",
                      "background-color": "rgba(255,255,255,0.04)",
                      "color": "#c8c8d0",
                      "margin-right": "6px",
                      "margin-bottom": "4px"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Label]",
                    "style": {
                      "font-size": "10px",
                      "padding": "3px 9px",
                      "border-radius": "10px",
                      "border": "1px solid rgba(255,255,255,0.18)",
                      "background-color": "rgba(255,255,255,0.04)",
                      "color": "#c8c8d0",
                      "margin-right": "6px",
                      "margin-bottom": "4px"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "=toString([$Tracks]) + ' tracks'",
                    "style": {
                      "font-size": "10px",
                      "padding": "3px 9px",
                      "border-radius": "10px",
                      "border": "1px solid rgba(255,255,255,0.18)",
                      "background-color": "rgba(255,255,255,0.04)",
                      "color": "#c8c8d0",
                      "margin-right": "6px",
                      "margin-bottom": "4px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "space-between",
              "align-items": "flex-end",
              "padding-top": "10px",
              "border-top": "1px solid rgba(255,255,255,0.12)",
              "font-size": "10px",
              "color": "#80808a",
              "letter-spacing": "1px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$Rating]",
                "style": {
                  "color": "#f0c040",
                  "font-size": "13px",
                  "letter-spacing": "1px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=toString([$DurationMinutes]) + ' min'"
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionvinyl-record.json

From the contributor

How to use this sample

Summary

This SharePoint JSON view formatting sample transforms list items into vinyl record album cards. Each item renders as an album sleeve on the left with a vinyl record peeking out to the right, followed by a metadata column with year, genre, label, track count, rating, and duration. It's designed for music libraries, podcast catalogues, or any "collection" style list.

screenshot of the sample

View requirements

Column Name Internal Name Type Description
Title Title Single line of text Album title (e.g. A Night in Tunisia)
Artist Artist Single line of text Artist or band name
Label Label Single line of text Record label (e.g. Blue Note, Atlantic, Sub Pop)
Year Year Number Release year (e.g. 1960)
Genre Genre Choice Music genre (Jazz, Rock, Pop, Indie, Folk, Hip-Hop, etc.)
Side Side Choice Side label shown on the record (Side A, Side B)
Tracks Tracks Number Number of tracks on the album
Duration Minutes DurationMinutes Number Total duration in minutes (e.g. 37)
Rating Rating Single line of text Star rating as text (e.g. ★★★★★)

A PowerShell script has been provided in the assets folder to provision the list for you.

Note: This script uses PnP PowerShell and requires an environment ready for PnP PowerShell.

Sample

Solution Author
vinyl-record.json Sudeep Ghatak (LinkedIn)

Version history

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

Additional notes

  • The vinyl record is rendered entirely with concentric div elements (no images) — outer disc, middle disc, inner disc, and a coloured centre label. The black "spindle hole" in the middle is also a styled div.
  • The record overlaps the sleeve by margin-left: -50px so it looks like it's sliding out.
  • The Side column lets you flip between Side A and Side B labelling on the centre disc without touching the formatter.
  • Rating is stored as plain text so users can paste ★ / ☆ glyphs directly (e.g. ★★★★☆).
  • Year and other numeric fields are wrapped in toString() inside expressions to avoid the SharePoint view formatter's strict number+string concatenation rule.