【SharePoint Online】モダンUIのリスト/ライブラリをJSONでカスタマイズする【アイコン設定】 -その2-
今回は前回の続きで、モダン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行テキストと複数行テキストの文章を全文表示する」について書いていきますが、こっちもかなりあっさり目の記事になりそうですね。。。
それではまた。
Discussion
New Comments
No comments yet. Be the first one!