【SharePoint】ステータス列をカスタマイズ！

上記画像「Status」列のようにカスタマイズする列の書式設定のコードです。

{
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "width": "100px",
        "height": "30px",
        "background-color": "=if ( @currentField == '申請前' , '#dbdbdb', if ( @currentField == '承認中' , '#ffeb9c', if ( @currentField == '承認済み' , '#c6efce', if ( @currentField == '却下' , '#ffc7ce', '' ) ) ) )",
        "color": "=if ( @currentField == '申請前' , '', if ( @currentField == '承認中' , '#9c5700', if ( @currentField == '承認済み' , '#006100', if ( @currentField == '却下' , '#9c0006', '' ) ) ) )",
        "border-radius": "20px",
        "font-weight": "bold",
        "font-size": "14px"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "@currentField"
        }
      ]
    }
  ]
}