SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Movie Ticket Stub

This SharePoint JSON view formatting sample transforms list items into realistic movie ticket stubs.

Get this format View on GitHub

Shared by Sudeep Ghatak
Updated May 11, 2026

Movie Ticket Stub 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",
      "background-color": "#c0392b",
      "border": "1px solid #6e1d15",
      "border-radius": "10px",
      "box-shadow": "0 6px 18px rgba(0,0,0,0.3)",
      "margin": "16px auto",
      "max-width": "820px",
      "overflow": "hidden",
      "color": "#ffffff",
      "font-family": "Arial, sans-serif"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "3",
          "padding": "14px 18px",
          "border-right": "2px dashed rgba(255,255,255,0.6)",
          "display": "flex",
          "flex-direction": "column"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "space-between",
              "align-items": "center",
              "border-bottom": "1px solid rgba(255,255,255,0.4)",
              "padding-bottom": "6px",
              "margin-bottom": "8px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center"
                },
                "children": [
                  {
                    "elmType": "span",
                    "style": {
                      "font-size": "16px",
                      "margin-right": "8px"
                    },
                    "attributes": {
                      "iconName": "Video"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Cinema]",
                    "style": {
                      "font-size": "12px",
                      "font-weight": "bold",
                      "letter-spacing": "1px",
                      "text-transform": "uppercase"
                    }
                  }
                ]
              },
              {
                "elmType": "span",
                "txtContent": "[$Format]",
                "style": {
                  "font-size": "11px",
                  "font-weight": "bold",
                  "letter-spacing": "1px",
                  "padding": "2px 8px",
                  "border": "1px solid rgba(255,255,255,0.7)",
                  "border-radius": "3px",
                  "background-color": "rgba(0,0,0,0.18)"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "font-size": "22px",
              "font-weight": "bold",
              "line-height": "24px",
              "margin-bottom": "4px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "font-size": "12px",
              "margin-bottom": "10px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$Auditorium]",
                "style": {
                  "margin-right": "10px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Rating]",
                "style": {
                  "font-weight": "bold",
                  "padding": "1px 6px",
                  "border": "1px solid rgba(255,255,255,0.6)",
                  "border-radius": "2px",
                  "margin-right": "10px",
                  "font-size": "11px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=toString([$Runtime]) + ' min'",
                "style": {
                  "color": "rgba(255,255,255,0.85)"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "flex-end",
              "border-top": "1px solid rgba(255,255,255,0.4)",
              "padding-top": "8px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "margin-right": "14px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "DATE",
                    "style": {
                      "font-size": "9px",
                      "color": "rgba(255,255,255,0.75)"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$ShowDate]",
                    "style": {
                      "font-size": "14px",
                      "font-weight": "bold"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "margin-right": "14px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "TIME",
                    "style": {
                      "font-size": "9px",
                      "color": "rgba(255,255,255,0.75)"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$ShowTime]",
                    "style": {
                      "font-size": "14px",
                      "font-weight": "bold"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "margin-right": "14px",
                  "text-align": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "ROW",
                    "style": {
                      "font-size": "9px",
                      "color": "rgba(255,255,255,0.75)"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Row]",
                    "style": {
                      "font-size": "22px",
                      "font-weight": "bold",
                      "line-height": "22px"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "text-align": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "SEAT",
                    "style": {
                      "font-size": "9px",
                      "color": "rgba(255,255,255,0.75)"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Seat]",
                    "style": {
                      "font-size": "28px",
                      "font-weight": "bold",
                      "line-height": "28px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "space-between",
              "font-size": "9px",
              "color": "rgba(255,255,255,0.75)",
              "border-top": "1px solid rgba(255,255,255,0.25)",
              "padding-top": "6px",
              "margin-top": "10px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "NO REFUNDS OR EXCHANGES"
              },
              {
                "elmType": "span",
                "txtContent": "[$BookingRef]",
                "style": {
                  "font-weight": "bold"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "min-width": "170px",
          "padding": "14px 12px",
          "background-color": "#8e2820",
          "display": "flex",
          "flex-direction": "column",
          "text-align": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border-bottom": "1px solid rgba(255,255,255,0.4)",
              "padding-bottom": "6px",
              "margin-bottom": "8px"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "ADMIT",
                "style": {
                  "font-size": "11px",
                  "letter-spacing": "3px",
                  "font-weight": "bold"
                }
              },
              {
                "elmType": "div",
                "txtContent": "ONE",
                "style": {
                  "font-size": "22px",
                  "letter-spacing": "2px",
                  "font-weight": "bold",
                  "line-height": "22px"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "font-size": "12px",
              "font-weight": "bold",
              "line-height": "14px",
              "margin-bottom": "6px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Auditorium]",
            "style": {
              "font-size": "10px",
              "color": "rgba(255,255,255,0.85)",
              "margin-bottom": "10px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "space-around",
              "align-items": "flex-end",
              "margin-bottom": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "ROW",
                    "style": {
                      "font-size": "9px",
                      "color": "rgba(255,255,255,0.75)"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Row]",
                    "style": {
                      "font-size": "18px",
                      "font-weight": "bold",
                      "line-height": "20px"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "SEAT",
                    "style": {
                      "font-size": "9px",
                      "color": "rgba(255,255,255,0.75)"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Seat]",
                    "style": {
                      "font-size": "22px",
                      "font-weight": "bold",
                      "line-height": "24px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "10px",
              "font-weight": "bold",
              "margin-bottom": "8px"
            },
            "txtContent": "[$ShowDate]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "10px",
              "margin-bottom": "10px",
              "color": "rgba(255,255,255,0.85)"
            },
            "txtContent": "[$ShowTime]"
          },
          {
            "elmType": "div",
            "style": {
              "height": "28px",
              "background-color": "#ffffff",
              "border-radius": "2px",
              "margin-bottom": "4px",
              "display": "flex",
              "align-items": "center",
              "justify-content": "space-between",
              "padding": "0 4px"
            },
            "children": [
              { "elmType": "div", "style": { "width": "2px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "4px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "1px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "3px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "2px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "5px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "1px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "3px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "2px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "4px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "1px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "3px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "2px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "1px", "height": "20px", "background-color": "#000" } },
              { "elmType": "div", "style": { "width": "4px", "height": "20px", "background-color": "#000" } }
            ]
          },
          {
            "elmType": "div",
            "txtContent": "[$TicketNumber]",
            "style": {
              "font-size": "10px",
              "letter-spacing": "1px",
              "color": "rgba(255,255,255,0.9)",
              "margin-bottom": "6px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "border-top": "1px solid rgba(255,255,255,0.4)",
              "padding-top": "4px",
              "font-size": "15px",
              "font-weight": "bold"
            },
            "txtContent": "=if([$Price] > 0, '$' + toString([$Price]), '')"
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionmovie-ticket-stub.json

From the contributor

How to use this sample

Summary

This SharePoint JSON view formatting sample transforms list items into realistic movie ticket stubs. Each card mimics a printed cinema ticket with a main section (movie title, cinema, format, date, time, row and seat) and a tear-off stub (ADMIT ONE block, ticket number, barcode and price) separated by a dashed perforation.

screenshot of the sample

View requirements

Column Name Internal Name Type Description
Title Title Single line of text Movie title (e.g. Dune: Part Three)
Cinema Cinema Single line of text Cinema or chain name (e.g. Hoyts Sylvia Park)
Auditorium Auditorium Single line of text Auditorium or screen identifier (e.g. Auditorium 7)
Format Format Choice Screen format (Standard, IMAX, 3D, Dolby Atmos, Recliner, 4DX)
Rating Rating Choice Classification (G, PG, M, R13, R16, R18)
Runtime Runtime Number Runtime in minutes (e.g. 156)
Show Date ShowDate Single line of text Show date formatted as DDD DD MMM YYYY (e.g. FRI 22 MAY 2026)
Show Time ShowTime Single line of text Show time (e.g. 8:45 PM)
Row Row Single line of text Seat row letter (e.g. F)
Seat Seat Single line of text Seat number (e.g. 12)
Booking Ref BookingRef Single line of text Booking reference / order number (e.g. HX9821)
Ticket Number TicketNumber Single line of text Ticket serial number printed under the barcode
Price Price Number Ticket price (e.g. 22.50)

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
movie-ticket-stub.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 Title column is used as the movie title and is shown both on the main ticket and on the stub.
  • ShowDate is stored as text in DDD DD MMM YYYY format (e.g. FRI 22 MAY 2026) to match the look of a printed cinema ticket. If you prefer to use a real Date column, replace the [$ShowDate] references with a calculated text column or with a toLocaleDateString expression.
  • The barcode is painted with a repeating-linear-gradient background — no image asset is required.
  • The price renders only when greater than zero. Leave Price blank or zero to hide it.
  • The "NO REFUNDS OR EXCHANGES" footer message is static and always displayed.