SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Piano

This sample formats your SharePoint list view to look like a piano.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Sep 28, 2021

theme-color-piano
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

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/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "= @window.innerWidth * 0.07 + 'px'",
      "height": "= @window.innerHeight * 0.6 + 'px'",
      "position": "absolute",
      "top": "0",
      "left": "= @rowIndex * @window.innerWidth * 0.07 + 'px'",
      "cursor": "pointer"
    },
    "attributes": {
      "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10' , '')))))))"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "100%",
          "position": "relative"
        },
        "customCardProps": {
          "openOnEvent": "click",
          "directionalHint": "topCenter",
          "isBeakVisible": false,
          "formatter": {
            "elmType": "div",
            "style": {
              "padding": "30px"
            },
            "attributes": {
              "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10 ms-fontColor-white' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10 ms-fontColor-white' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10 ms-fontColor-white' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10 ms-fontColor-white' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10 ms-fontColor-white' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10 ms-fontColor-white' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10 ms-fontColor-white' , '')))))))"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "30px",
                  "font-weight": "bold"
                }
              }
            ]
          }
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "left": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 0 , 'none' , if(@rowIndex % 7 == 3 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-neutralPrimary"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10 ms-fontColor-white' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10 ms-fontColor-white' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10 ms-fontColor-white' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10 ms-fontColor-white' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10 ms-fontColor-white' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10 ms-fontColor-white' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10 ms-fontColor-white' , '')))))))"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '♭'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "right": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 2 , 'none' , if(@rowIndex % 7 == 6 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-neutralPrimary"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10 ms-fontColor-white' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10 ms-fontColor-white' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10 ms-fontColor-white' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10 ms-fontColor-white' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10 ms-fontColor-white' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10 ms-fontColor-white' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10 ms-fontColor-white' , '')))))))"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '#'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionpiano-rainbow.json

From the contributor

How to use this sample

Summary

This sample formats your SharePoint list view to look like a piano.

piano.json

Uses your site's theme color:

screenshot of the sample

piano-rainbow.json

Uses rainbow colors:

screenshot of the sample

View requirements

Column Name Type
Title Single Line Text

Set up the view so that the note names are displayed in order starting with C:

screenshot of the sample

Sample

Solution Author(s)
piano.json Tetsuya Kawahara
piano-rainbow.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 September 28, 2021 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

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Image Grid

This sample includes two formats to display images in Lists as grid - row formatter and tile formatter for Gallery view.

Explore format

Travel Tweets Board

This sample demonstrates using the board view to display travel tweets in a timeline format. Each tweet supports one image and one map link.

Explore format