MyNote365

Office365 , OneNote , SharePoint , PowerApps , MicrosoftFlow 関連の備忘録

【Microsoft Lists】書式設定で Microsoft Lists ice cream を作ってみた!

f:id:tecchan365:20210822192711p:plain

Twitter で次の Microsoft の社員さんのツイートを見かけました。

このツイートの画像を見て、「Microsoft Lists のアイスモチーフめっちゃ良い😍」となり、下図のような数値列(パーセント表示)の見た目を変える書式設定を作成してみました。

f:id:tecchan365:20210822192759p:plain

以下に作成した書式設定の JSON を掲載しておきます。利用する場合は、数値列(パーセント表示) の書式設定に、掲載されている JSON をコピー & ペーストしてください。

f:id:tecchan365:20210822193501p:plain

バージョン①(アタリ無し)

f:id:tecchan365:20210822172328p:plain

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "margin-bottom": "5px",
    "width": "120px"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=if(@currentField.displayValue=='', '0%' , @currentField.displayValue)",
      "style": {
        "margin": "2px",
        "font-size": "14px",
        "font-weight": "bold"
      }
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "row",
        "position": "relative",
        "align-items": "center",
        "left": "30px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row-reverse",
            "width": "80px",
            "height": "35px",
            "z-index": "1",
            "position": "relative",
            "right": "40px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 0.25 , '20px' , (20 *  ( @currentField / 0.25 ) + 'px' )",
                "height": "100%",
                "background-color": "#7E4B7C",
                "border-top-right-radius": "30%",
                "border-bottom-right-radius": "30%"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 0.5 ,'20px', (20 *  ((@currentField - 0.25) / 0.25 ) + 'px' )",
                "display": "=if(@currentField < 0.25 ,'none', '')",
                "height": "100%",
                "background-color": "#D03403"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 0.75 ,'20px', (20 *  ((@currentField - 0.5) / 0.25 ) + 'px' )",
                "display": "=if(@currentField < 0.5 ,'none', '')",
                "height": "100%",
                "background-color": "#F78019"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 1 ,'20px', (20 *  ((@currentField - 0.75) / 0.25 ) + 'px')",
                "display": "=if(@currentField < 0.75 ,'none', '')",
                "height": "100%",
                "background-color": "#FDE108",
                "border-top-left-radius": "50%",
                "border-bottom-left-radius": "50%"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "width": "70px",
            "height": "15px",
            "right": "20px",
            "background-color": "#FDBF5D",
            "border-radius": "20px"
          }
        }
      ]
    }
  ]
}

バージョン②(アタリ有り)

f:id:tecchan365:20210822172429p:plain

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "margin-bottom": "5px",
    "width": "120px"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=if(@currentField.displayValue=='', '0%' , @currentField.displayValue)",
      "style": {
        "margin": "2px",
        "font-size": "14px",
        "font-weight": "bold"
      }
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "row",
        "position": "relative",
        "align-items": "center",
        "left": "30px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row-reverse",
            "width": "80px",
            "height": "35px",
            "z-index": "1",
            "position": "relative",
            "right": "40px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 0.25 , '20px' , (20 *  ( @currentField / 0.25 ) + 'px' )",
                "height": "100%",
                "background-color": "#7E4B7C",
                "border-top-right-radius": "30%",
                "border-bottom-right-radius": "30%"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 0.5 ,'20px', (20 *  ((@currentField - 0.25) / 0.25 ) + 'px' )",
                "display": "=if(@currentField < 0.25 ,'none', '')",
                "height": "100%",
                "background-color": "#D03403"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 0.75 ,'20px', (20 *  ((@currentField - 0.5) / 0.25 ) + 'px' )",
                "display": "=if(@currentField < 0.5 ,'none', '')",
                "height": "100%",
                "background-color": "#F78019"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "=if(@currentField > 1 ,'20px', (20 *  ((@currentField - 0.75) / 0.25 ) + 'px')",
                "display": "=if(@currentField < 0.75 ,'none', '')",
                "height": "100%",
                "background-color": "#FDE108",
                "border-top-left-radius": "50%",
                "border-bottom-left-radius": "50%"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "width": "70px",
            "height": "15px",
            "right": "20px",
            "background-color": "#FDBF5D",
            "border-radius": "20px"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "=if((@currentField * 100) % 9 == 0 , '○ Atari' , '')",
              "style": {
                "font-size": "11px",
                "margin-left": "7px"
              }
            }
          ]
        }
      ]
    }
  ]
}

アタリが表示される条件は、97 行目に記載されています。好きに条件を変更ください。
(サンプルでは、特に理由なくパーセントが 9 の倍数だったときにアタリが表示されるようになっています。)

f:id:tecchan365:20210822194605p:plain