SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Match Score Card

This sample transforms list items into a match summary.

Get this format View on GitHub

Shared by Sudeep Ghatak
Updated Jul 26, 2024

Match Score Card 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/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "margin": "20px",
      "display": "flex",
      "flex-direction": "column"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "row",
              "align-items": "center",
              "font-size": "24px"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "row",
              "align-items": "center",
              "font-size": "16px"
            },
            "txtContent": "[$MatchDate]"
          },
          {
            "elmType": "div",
            "style": {
              "flex": "1"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "margin-top": "20px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "background-color": "#f8f9fa",
                          "text-align": "center",
                          "border-bottom": "2px solid #ccc",
                          "padding-bottom": "10px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "display": "flex",
                              "flex-direction": "row",
                              "justify-content": "center",
                              "align-items": "center"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "flex",
                                  "flex-direction": "column",
                                  "align-items": "center",
                                  "margin": "0 20px"
                                },
                                "children": [
                                  {
                                    "elmType": "div",
                                    "children": [
                                      {
                                        "elmType": "img",
                                        "attributes": {
                                          "src": "[$Country1FlagUrl]",
                                          "alt": "[$Country1] Flag"
                                        },
                                        "style": {
                                          "width": "50px",
                                          "height": "auto"
                                        }
                                      }
                                    ]
                                  },
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "margin-top": "5px",
                                      "font-weight": "bold",
                                      "text-align": "center"
                                    },
                                    "txtContent": "[$Country1]"
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "font-size": "24px",
                                  "font-weight": "bold",
                                  "margin": "0 20px",
                                  "text-align": "center"
                                },
                                "txtContent": "[$Country1Score]"
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "text-align": "center"
                                },
                                "txtContent": "Full time"
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "font-size": "24px",
                                  "font-weight": "bold",
                                  "margin": "0 20px",
                                  "text-align": "center"
                                },
                                "txtContent": "[$Country2Score]"
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "flex",
                                  "flex-direction": "column",
                                  "align-items": "center",
                                  "margin": "0 20px"
                                },
                                "children": [
                                  {
                                    "elmType": "div",
                                    "children": [
                                      {
                                        "elmType": "img",
                                        "attributes": {
                                          "src": "[$Country2FlagUrl]",
                                          "alt": "[$Country2] Flag"
                                        },
                                        "style": {
                                          "width": "50px",
                                          "height": "auto"
                                        }
                                      }
                                    ]
                                  },
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "margin-top": "5px",
                                      "font-weight": "bold",
                                      "text-align": "center"
                                    },
                                    "txtContent": "[$Country2]"
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionmatch-score-card.json

From the contributor

How to use this sample

Summary

This sample transforms list items into a match summary. The flag icons are referenced from the following Github project. The columns listed below must be included in the list view.

screenshot of the sample

View requirements

Column Name Type
Title Single line of text
Country1 Single line of text
Country1Score Single line of text
Country2 Single line of text
Country2Score Single line of text
MatchDate Date and Time
Country1FlagUrl Single line of text
Country2FlagUrl Single line of text

[!NOTE]
If images from external sites are specified for Country1FlagUrl and Country2FlagUrl, HTML field security must be set. For more information see: Allow or restrict the ability to embed content on SharePoint pages.

Sample

Solution Author(s)
match-score-card.json Sudeep Ghatak

Version history

Version Date Comments
1.0 July 26, 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.

Additional notes

None