【SharePoint】列の先頭に色付きの線を表示する

f:id:tecchan365:20200704163125p:plain

上記画像「文書番号」列のようにカスタマイズする列の書式設定のコードです。
線の色は、「Status」列の値によって変わるようになっています。

{
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "row",
    "height": "18px",
    "margin-left": "-15px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "height": "70%",
        "width": "8px",
        "background-color": "=if ( [$Status] == '申請前' , '#f2cf01', if ([$Status] == '承認中' , '#0168b3', if ( [$Status] == '承認済み' , '#00984b', if ( [$Status] == '却下' , '#cd5638', '' ) ) ) )"
      }
    },
    {
      "elmType": "div",
      "style": {
        "padding-left": "10px",
        "font-size": "13px"
      },
      "txtContent": "@currentField"
    }
  ]
}