【SharePoint】リストの書式設定でドットマリオを作成する

リストの「列の書式設定」を利用し、ドットマリオを一覧画面上に表示する方法を記載します。
※SharePoint のリストは、本来このような用途で使うべきではありません。

#SharePoint #SharePoint方眼紙 #ColumnFormatting pic.twitter.com/JsSGowBzQa

— てっちゃん (@techan_k) 2020年3月14日

リストの作成

リストを作成し、１行テキストを 16 列定義します。
内部名等は、特に気にする必要はありません。

列の定義後、アイテムを以下のように作成します。

タイトル,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P
1,,,,,,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,,,,,,
2,,,,,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,,,
3,,,,,#887700,#887700,#887700,#ffbb33,#ffbb33,#887700,#ffbb33,,,,,
4,,,,#887700,#ffbb33,#887700,#ffbb33,#ffbb33,#ffbb33,#887700,#ffbb33,#ffbb33,#ffbb33,,,
5,,,,#887700,#ffbb33,#887700,#887700,#ffbb33,#ffbb33,#ffbb33,#887700,#ffbb33,#ffbb33,#ffbb33,,
6,,,,#887700,#887700,#ffbb33,#ffbb33,#ffbb33,#ffbb33,#887700,#887700,#887700,#887700,,,
7,,,,,,#ffbb33,#ffbb33,#ffbb33,#ffbb33,#ffbb33,#ffbb33,#ffbb33,,,,
8,,,,,#887700,#887700,#dd3300,#887700,#887700,#887700,,,,,,
9,,,,#887700,#887700,#887700,#dd3300,#887700,#887700,#dd3300,#887700,#887700,#887700,,,
10,,,#887700,#887700,#887700,#887700,#dd3300,#dd3300,#dd3300,#dd3300,#887700,#887700,#887700,#887700,,
11,,,#ffbb33,#ffbb33,#887700,#dd3300,#ffbb33,#dd3300,#dd3300,#ffbb33,#dd3300,#887700,#ffbb33,#ffbb33,,
12,,,#ffbb33,#ffbb33,#ffbb33,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#ffbb33,#ffbb33,#ffbb33,,
13,,,#ffbb33,#ffbb33,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#dd3300,#ffbb33,#ffbb33,,
14,,,,,#dd3300,#dd3300,#dd3300,,,#dd3300,#dd3300,#dd3300,,,,
15,,,,#887700,#887700,#887700,,,,,#887700,#887700,#887700,,,
16,,,#887700,#887700,#887700,#887700,,,,,#887700,#887700,#887700,#887700,,

列の書式設定

アイテム作成後、すべての列に列の書式設定をしていきます。

{
  "elmType": "div",
  "style": {
    "background-color": "@currentField",
    "height": "110px",
    "margin": "-12px"
  }
}  

以上で、マリオの完成です！