【SharePoint Online】モダンUIのリスト/ライブラリをJSONでカスタマイズする【アイコン設定】　－その２－

今回は前回の続きで、モダンUIの書式設定を利用して[カテゴリによって色とアイコンを付与する]というコードを書いきたいと思います。
今回の内容はMicrosoft公式で公開しているこちらの記事とほぼ同じものです。
ですので解説は簡単に、アイコンの変更などを行っていきたいと思います。

選択肢によって色とアイコンを変更する

今回の記事を行うと、モダンリストで以下の[カテゴリ]列のような表示を実現できます。

まずはソースを見ていきましょう。

これだけです。かなりシンプルに書けます。
では簡単に解説をしていきます。

簡単な解説

まずはソース上部の”attributes”から解説します。
ここでは選択したカテゴリによってdivタグにCSS クラスを適用して背景色を変更するように処理を行っています。

"elmType": "div",
"attributes": {
    "class": "=if(@currentField == 'カテゴリ1', 'sp-field-severity--good', if(@currentField == 'カテゴリ2', 'sp-field-severity--low', if(@currentField == 'カテゴリ3', 'sp-field-severity--warning', if(@currentField == 'カテゴリ4', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  }

次に”children”内で行っている処理ですが、
注目すべきは”iconName”内の処理です。
ここは、「もし’カテゴリ1’であれば、”CheckMark”アイコンを挿入」というように処理が記載されています。

  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'カテゴリ1', 'CheckMark', if(@currentField == 'カテゴリ2', 'Forward', if(@currentField == 'カテゴリ3', 'Error', if(@currentField == 'カテゴリ4', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]

この”CheckMark”、’Forward’、’Warning’、’ErrorBadge’というのはアイコンを指定しています。
このアイコン自体は”Office UI Fabric”であらかじめ用意されているアイコンで、”Office UI Fabric“内で色々探すことができます。
サイト内でアイコンにカーソルを当てて名前を調べて色々試してみてください。

終わりに

今回は以上です。
かなりあっさり目の記事となりましたが、備忘のためにも書いておきます。
次回は「1行テキストと複数行テキストの文章を全文表示する」について書いていきますが、こっちもかなりあっさり目の記事になりそうですね。。。

それではまた。

JSON, Office365, SharePointJSON, ライブラリ, リスト, 書式設定

Posted by ebonight