Column formattingSharePoint Online

Row Index Drawing

This is a silly format that draws a picture in your view using the @rowIndex token to adjust the colors and to determine when certain pictures (icons or SVG elements) should show up.

Get this format View on GitHub

Shared by Chris Kent
Updated Feb 20, 2020

Sample preview · View original animation

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.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@rowIndex < 4, 'white', if(@rowIndex < 200, 'rgba(' + if(@rowIndex < 215, '40', 255-@rowIndex) + ',' + if(@rowIndex < 90, '140', 229-@rowIndex) + ',' + (255-@rowIndex) + ',1)', 'rgba(0,0,56,1)'))"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Sunny",
        "class": "ms-fontColor-yellow"
      },
      "style": {
        "font-size": "24px",
        "font-weight": "bold",
        "display": "=if(@rowIndex == 0, 'block', 'none')"
      }
    },
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Ferry",
        "class": "ms-fontColor-neutralPrimary"
      },
      "style": {
        "font-size": "42px",
        "font-weight": "bold",
        "display": "=if(@rowIndex == 3, 'block', 'none')",
        "padding-left": "40px"
      }
    },
    {
      "elmType": "svg",
      "style": {
        "height": "23px",
        "display": "=if(@rowIndex > 0 && @rowIndex % 24 == 0, 'block', 'none')",
        "fill": "orange",
        "padding-left": "22px"
      },
      "children": [
        {
          "elmType": "path",
          "attributes": {
            "d": "m 39.976185,10.40477 c -0.60237,0 -1.095239,-0.492863 -1.095239,-1.095242 0,-0.60238 0.492869,-1.095238 1.095239,-1.095238 0.602371,0 1.095259,0.492858 1.095259,1.095238 0,0.602379 -0.492888,1.095242 -1.095259,1.095242 z M 30.666674,3.833326 c -1.314284,0 -2.738118,0.109526 -4.161904,0.328581 L 18.619054,0 c 0,0 0.05472,3.176185 1.204761,5.58571 C 15.11429,6.790472 10.678556,8.21429 7.666674,8.21429 L 0,3.833326 C 0,6.84523 1.6428556,11.5 1.6428556,11.5 1.6428556,11.5 0,16.15477 0,19.166674 L 7.666674,14.78571 c 3.011882,0 7.447616,1.423818 12.157141,2.62858 C 18.673815,19.823815 18.619054,23 18.619054,23 l 7.885716,-4.161907 c 1.423786,0.219055 2.84762,0.328581 4.161904,0.328581 6.95477,0 17.523798,-5.202384 17.523798,-7.666674 0,-2.46429 -10.569028,-7.666674 -17.523798,-7.666674 z"
          }
        }
      ]
    },
    {
      "elmType": "svg",
      "style": {
        "height": "40px",
        "display": "=if(@rowIndex == 199, 'block', 'none')",
        "fill": "grey",
        "padding-left": "60px"
      },
      "children": [
        {
          "elmType": "path",
          "attributes": {
            "d": "m 55.88005,27.726221 h -1.155682 c 0.890712,-1.04295 1.84375,-3.1919 0.451371,-4.45109 -1.514776,-1.36979 -1.839667,0.63201 -1.53569,2.12501 0.181905,0.89491 -0.02201,1.7688 -0.05757,2.32608 h -0.688116 c -0.06065,-0.82331 -0.307781,-1.6252 -0.72328,-2.39788 l 3.259921,-8.48045 h -3.467639 l -4.609157,3.99659 c -3.624856,-2.09296 -8.775983,-3.62679 -14.703676,-4.26503 -0.404482,-1.30116 -1.745175,-2.37903 -3.542168,-2.92259 V 7.3164705 c 0,-3.2144 -2.312318,-5.89704 -5.360319,-6.4762 C 23.553822,0.3485705 23.07545,5.0000006e-7 22.514686,5.0000006e-7 21.782131,5.0000006e-7 21.188073,0.5940005 21.188073,1.3265405 v 5.3728 c 0,0.73267 0.594058,1.32657 1.326613,1.32657 0.594984,0 1.098574,-0.39169 1.266785,-0.93146 0.0127,0.0716 0.02046,0.14622 0.02046,0.22202 v 6.3403905 c -1.72048,0.52034 -3.021884,1.53102 -3.484474,2.75807 C 3.84572,17.353121 5e-7,22.237821 5e-7,28.123941 c 0,6.55762 4.7693088,11.87306 26.4553085,11.87306 8.497781,0 16.058798,-1.7984 20.899125,-4.59321 l 4.609123,3.99643 h 3.467652 l -3.25986,-8.48049 c 0.415464,-0.7725 0.662675,-1.57444 0.72324,-2.39753 h 0.688116 c 0.03523,0.55711 0.239285,1.43094 0.05751,2.32569 -0.303911,1.49314 0.02083,3.49502 1.535622,2.12527 1.392443,-1.25917 0.439302,-3.4082 -0.451506,-4.45096 h 1.155876 v -0.79598 z m -42.690847,3.27216 c -1.58758,0 -2.874261,-1.28656 -2.874261,-2.87444 0,-1.58749 1.286681,-2.8742 2.874261,-2.8742 1.587543,0 2.874222,1.28671 2.874222,2.8742 0,1.58788 -1.286679,2.87444 -2.874222,2.87444 z m 13.266106,0 c -1.587548,0 -2.874231,-1.28656 -2.874231,-2.87444 0,-1.58749 1.286683,-2.8742 2.874231,-2.8742 1.587584,0 2.874237,1.28671 2.874237,2.8742 0,1.58788 -1.286653,2.87444 -2.874237,2.87444 z m 13.266145,0 c -1.587567,0 -2.874226,-1.28656 -2.874226,-2.87444 0,-1.58749 1.286659,-2.8742 2.874226,-2.8742 1.587521,0 2.874245,1.28671 2.874245,2.8742 0,1.58788 -1.286724,2.87444 -2.874245,2.87444 z"
          }
        }
      ]
    },
    {
      "elmType": "svg",
      "style": {
        "height": "34px",
        "display": "=if(@rowIndex == 200, 'block', 'none')",
        "fill": "brown",
        "padding-left": "14px"
      },
      "children": [
        {
          "elmType": "path",
          "attributes": {
            "d": "m 5.850408,23.319192 c -0.2472,0.2472 -0.576816,0.453216 -0.906408,0.576816 V 29.664 c 0,0.700392 0.535608,1.236 1.236,1.236 0.700392,0 1.236,-0.535608 1.236,-1.236 v -6.6744 c 0.618,0.329592 1.400808,0.329592 1.9776,-0.2472 l 0.9888,-0.9888 C 9.599592,21.67126 8.816808,21.465192 8.034,21.1356 Z"
          }
        },
        {
          "elmType": "path",
          "attributes": {
            "d": "M 32.6304,7.0864079 27.9336,2.389608 C 27.604008,2.059992 27.192,1.854 26.779992,1.7304 V 0.205992 C 26.779992,0.082392 26.697602,0 26.574,0 25.791192,0 25.132008,0.659208 25.132008,1.441992 v 0.3708 C 22.165608,2.9664 19.363992,9.8879999 14.832,9.8879999 H 8.239992 c -1.029984,0 -1.936392,0.2884081 -2.7192,0.8239921 h -2.2248 C 1.4832,10.711992 0,12.195192 0,14.008008 v 4.944 l 3.295992,-1.4832 v 3.131184 c 0,-0.700392 -0.535584,-1.236 -1.236,-1.236 -0.700392,0 -1.2359928,0.535608 -1.2359928,1.236 V 29.664 c 0,0.700392 0.5356008,1.236 1.2359928,1.236 v 0 c 0.700416,0 1.236,-0.535608 1.236,-1.236 v -6.6744 c 0.618,0.329592 1.400808,0.329592 1.9776,-0.2472 l 2.5956,-2.5956 c 1.1124,0.535608 2.3484,0.8652 3.666816,0.8652 h 5.355984 v 8.652 c 0,0.700392 0.535608,1.236 1.236,1.236 0.700416,0 1.236,-0.535608 1.236,-1.236 v -8.652 c 0.576816,0 1.1124,-0.1236 1.648008,-0.288408 V 29.664 c 0,0.700392 0.535608,1.236 1.236,1.236 0.700392,0 1.236,-0.535608 1.236,-1.236 V 18.7872 c 0.535608,-0.782808 0.823992,-1.7304 0.823992,-2.7192 v 0.823992 c 0,-4.779192 1.1124,-8.6520001 2.472,-8.6520001 l 0.4944,0.4944 c 0.453216,0.453216 1.1124,0.7416 1.7304,0.7416 h 1.071216 l 0.08234,0.08235 c 0.65921,0.6591851 1.689194,0.6591851 2.3484,0 l 0.1236,-0.1236 c 0.618,-0.659212 0.618,-1.7304 0,-2.3484 z"
          }
        }
      ]
    }
  ]
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@rowIndex < 4, 'white', if(@rowIndex < 200, 'rgba(' + if(@rowIndex < 215, '40', 255-@rowIndex) + ',' + if(@rowIndex < 90, '140', 229-@rowIndex) + ',' + (255-@rowIndex) + ',1)', 'rgba(0,0,56,1)'))"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Sunny",
        "class": "ms-fontColor-yellow"
      },
      "style": {
        "font-size": "24px",
        "font-weight": "bold",
        "display": "=if(@rowIndex == 0, 'block', 'none')"
      }
    },
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Ferry",
        "class": "ms-fontColor-neutralPrimary"
      },
      "style": {
        "font-size": "42px",
        "font-weight": "bold",
        "display": "=if(@rowIndex == 3, 'block', 'none')",
        "padding-left": "40px"
      }
    },
    {
      "elmType": "svg",
      "style": {
        "height": "23px",
        "display": "=if(@rowIndex > 0 && @rowIndex % 24 == 0, 'block', 'none')",
        "fill": "orange",
        "padding-left": "22px"
      },
      "children": [
        {
          "elmType": "path",
          "attributes": {
            "d": "m 39.976185,10.40477 c -0.60237,0 -1.095239,-0.492863 -1.095239,-1.095242 0,-0.60238 0.492869,-1.095238 1.095239,-1.095238 0.602371,0 1.095259,0.492858 1.095259,1.095238 0,0.602379 -0.492888,1.095242 -1.095259,1.095242 z M 30.666674,3.833326 c -1.314284,0 -2.738118,0.109526 -4.161904,0.328581 L 18.619054,0 c 0,0 0.05472,3.176185 1.204761,5.58571 C 15.11429,6.790472 10.678556,8.21429 7.666674,8.21429 L 0,3.833326 C 0,6.84523 1.6428556,11.5 1.6428556,11.5 1.6428556,11.5 0,16.15477 0,19.166674 L 7.666674,14.78571 c 3.011882,0 7.447616,1.423818 12.157141,2.62858 C 18.673815,19.823815 18.619054,23 18.619054,23 l 7.885716,-4.161907 c 1.423786,0.219055 2.84762,0.328581 4.161904,0.328581 6.95477,0 17.523798,-5.202384 17.523798,-7.666674 0,-2.46429 -10.569028,-7.666674 -17.523798,-7.666674 z"
          }
        }
      ]
    },
    {
      "elmType": "svg",
      "style": {
        "height": "40px",
        "display": "=if(@rowIndex == 199, 'block', 'none')",
        "fill": "grey",
        "padding-left": "60px"
      },
      "children": [
        {
          "elmType": "path",
          "attributes": {
            "d": "m 55.88005,27.726221 h -1.155682 c 0.890712,-1.04295 1.84375,-3.1919 0.451371,-4.45109 -1.514776,-1.36979 -1.839667,0.63201 -1.53569,2.12501 0.181905,0.89491 -0.02201,1.7688 -0.05757,2.32608 h -0.688116 c -0.06065,-0.82331 -0.307781,-1.6252 -0.72328,-2.39788 l 3.259921,-8.48045 h -3.467639 l -4.609157,3.99659 c -3.624856,-2.09296 -8.775983,-3.62679 -14.703676,-4.26503 -0.404482,-1.30116 -1.745175,-2.37903 -3.542168,-2.92259 V 7.3164705 c 0,-3.2144 -2.312318,-5.89704 -5.360319,-6.4762 C 23.553822,0.3485705 23.07545,5.0000006e-7 22.514686,5.0000006e-7 21.782131,5.0000006e-7 21.188073,0.5940005 21.188073,1.3265405 v 5.3728 c 0,0.73267 0.594058,1.32657 1.326613,1.32657 0.594984,0 1.098574,-0.39169 1.266785,-0.93146 0.0127,0.0716 0.02046,0.14622 0.02046,0.22202 v 6.3403905 c -1.72048,0.52034 -3.021884,1.53102 -3.484474,2.75807 C 3.84572,17.353121 5e-7,22.237821 5e-7,28.123941 c 0,6.55762 4.7693088,11.87306 26.4553085,11.87306 8.497781,0 16.058798,-1.7984 20.899125,-4.59321 l 4.609123,3.99643 h 3.467652 l -3.25986,-8.48049 c 0.415464,-0.7725 0.662675,-1.57444 0.72324,-2.39753 h 0.688116 c 0.03523,0.55711 0.239285,1.43094 0.05751,2.32569 -0.303911,1.49314 0.02083,3.49502 1.535622,2.12527 1.392443,-1.25917 0.439302,-3.4082 -0.451506,-4.45096 h 1.155876 v -0.79598 z m -42.690847,3.27216 c -1.58758,0 -2.874261,-1.28656 -2.874261,-2.87444 0,-1.58749 1.286681,-2.8742 2.874261,-2.8742 1.587543,0 2.874222,1.28671 2.874222,2.8742 0,1.58788 -1.286679,2.87444 -2.874222,2.87444 z m 13.266106,0 c -1.587548,0 -2.874231,-1.28656 -2.874231,-2.87444 0,-1.58749 1.286683,-2.8742 2.874231,-2.8742 1.587584,0 2.874237,1.28671 2.874237,2.8742 0,1.58788 -1.286653,2.87444 -2.874237,2.87444 z m 13.266145,0 c -1.587567,0 -2.874226,-1.28656 -2.874226,-2.87444 0,-1.58749 1.286659,-2.8742 2.874226,-2.8742 1.587521,0 2.874245,1.28671 2.874245,2.8742 0,1.58788 -1.286724,2.87444 -2.874245,2.87444 z"
          }
        }
      ]
    },
    {
      "elmType": "svg",
      "style": {
        "height": "34px",
        "display": "=if(@rowIndex == 200, 'block', 'none')",
        "fill": "brown",
        "padding-left": "14px"
      },
      "children": [
        {
          "elmType": "path",
          "attributes": {
            "d": "m 5.850408,23.319192 c -0.2472,0.2472 -0.576816,0.453216 -0.906408,0.576816 V 29.664 c 0,0.700392 0.535608,1.236 1.236,1.236 0.700392,0 1.236,-0.535608 1.236,-1.236 v -6.6744 c 0.618,0.329592 1.400808,0.329592 1.9776,-0.2472 l 0.9888,-0.9888 C 9.599592,21.67126 8.816808,21.465192 8.034,21.1356 Z"
          }
        },
        {
          "elmType": "path",
          "attributes": {
            "d": "M 32.6304,7.0864079 27.9336,2.389608 C 27.604008,2.059992 27.192,1.854 26.779992,1.7304 V 0.205992 C 26.779992,0.082392 26.697602,0 26.574,0 25.791192,0 25.132008,0.659208 25.132008,1.441992 v 0.3708 C 22.165608,2.9664 19.363992,9.8879999 14.832,9.8879999 H 8.239992 c -1.029984,0 -1.936392,0.2884081 -2.7192,0.8239921 h -2.2248 C 1.4832,10.711992 0,12.195192 0,14.008008 v 4.944 l 3.295992,-1.4832 v 3.131184 c 0,-0.700392 -0.535584,-1.236 -1.236,-1.236 -0.700392,0 -1.2359928,0.535608 -1.2359928,1.236 V 29.664 c 0,0.700392 0.5356008,1.236 1.2359928,1.236 v 0 c 0.700416,0 1.236,-0.535608 1.236,-1.236 v -6.6744 c 0.618,0.329592 1.400808,0.329592 1.9776,-0.2472 l 2.5956,-2.5956 c 1.1124,0.535608 2.3484,0.8652 3.666816,0.8652 h 5.355984 v 8.652 c 0,0.700392 0.535608,1.236 1.236,1.236 0.700416,0 1.236,-0.535608 1.236,-1.236 v -8.652 c 0.576816,0 1.1124,-0.1236 1.648008,-0.288408 V 29.664 c 0,0.700392 0.535608,1.236 1.236,1.236 0.700392,0 1.236,-0.535608 1.236,-1.236 V 18.7872 c 0.535608,-0.782808 0.823992,-1.7304 0.823992,-2.7192 v 0.823992 c 0,-4.779192 1.1124,-8.6520001 2.472,-8.6520001 l 0.4944,0.4944 c 0.453216,0.453216 1.1124,0.7416 1.7304,0.7416 h 1.071216 l 0.08234,0.08235 c 0.65921,0.6591851 1.689194,0.6591851 2.3484,0 l 0.1236,-0.1236 c 0.618,-0.659212 0.618,-1.7304 0,-2.3484 z"
          }
        }
      ]
    }
  ]
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This is a silly format that draws a picture in your view using the @rowIndex token to adjust the colors and to determine when certain pictures (icons or SVG elements) should show up.

screenshot of the sample

Also included is the AquaticAssetsGenerator.ps1 PowerShell script that demonstrates creating lots of random entries in a list. You'll want at least 201 items to show the full picture.

View requirements

This format can be applied to any view

Sample

Solution	Author(s)
generic-rowIndex-drawing.json	Chris Kent

Version history

Version	Date	Comments
1.0	February 20, 2020	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

Use column formatting to customize SharePoint

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

Additional notes

More formats like this

Missing Information Callout

Publishing Status

File Preview Callout with the embed Action