背景
ある社内講習に参加した際
『学習状況の把握の為に Excel に入力してください。』・・と
ということで、Lists でならこんな簡単ですよ？という利用例を提示する為の設定の記録
とはいえ、自分自身ほとんど触ったことが無かったので学習から
やりたいこと
リストで 進捗率(パーセント) を分かりやすく表示したい
普通にデータバーの設定のままでもいいんですが、どうやら把握したい段階があるようなので・・
- データバーを値によって色変え
- ついでにアイコンも
- 段階は、とりあえず 5。多ければ適当に削ればいいだけだしってことで。
- 未入力 or 0 ～ 10%
- ～ 20%
- ～ 50%
- ～ 100%
- 100%
結果イメージ
実践
理解のすすめ
「例こそが人に伝える唯一の手段」信奉者なのでまずは実例を元に確認
単純にデータバーを設定して、JSON を見てみると
operands が分かりづらい・・
抽象構文ツリーの式 を見ると、PowerFx(?) で書けるものが、抽象構文ツリーで自動生成されてるらしい。
ってことで、まずは慣れる為にも、データバーを、Power Fx っぽい式に変換してみる
抽象構文ツリーからPower Fx 式へ
ってことで、変換してみると、とっても分かりやすくなりました。
$comments で、コメント追記することで、分かりやすくしておくと吉
変換後
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "@currentField.displayValue",
"style": {
"position": "absolute",
"white-space": "nowrap",
"padding": "0 4px"
},
"attributes": {
"class": "=if(@currentField.displayValue < 0 ,'sp-css-color-CoralFont','sp-css-color-MintGreenFont')",
"$comments": "文字色を正負で変える"
}
},
{
"elmType": "div",
"attributes": {
"class": "=if(@currentField.displayValue >= 0 ,'sp-field-dashedBorderRight','')"
},
"style": {
"min-height": "inherit",
"box-sizing": "border-box",
"padding-left": "=(abs(-50) - if(@currentField.displayValue < 0 , abs(if(@currentField.displayValue <= -50, abs(-50), @currentField.displayValue)), 0)) / 150 * 100 + '%'"
},
"$comments": "負側のデータバー"
},
{
"elmType": "div",
"attributes": {
"class": "=if(@currentField.displayValue < 0 ,'sp-css-backgroundColor-BgCoral sp-css-borderTop-CoralFont','sp-css-backgroundColor-BgMintGreen sp-css-borderTop-MintGreenFont')"
},
"style": {
"min-height": "inherit",
"box-sizing": "border-box",
"width": "=if(@currentField.displayValue <= -50, abs(-50), if(@currentField.displayValue >= 100, 100, abs(@currentField.displayValue)))/ 150 * 100 + '%'"
},
"$comments": "正側のデータバー"
},
{
"elmType": "div",
"style": {
"min-height": "inherit",
"box-sizing": "border-box"
},
"attributes": {
"class": "=if(@currentField.displayValue < 0, 'sp-field-dashedBorderRight', '')"
},
"$comments": "中央の点線描画（負数用"
}
]
}
一応差分確認
機能追加
実際の変更点としては
- 不要箇所削除
- 負数側のデータバーを削除
- 中央の点線（０基準線）の削除
- 機能追加
- アイコン追加
- データバーの色変え
- ついでに、文字色もデータバー同様に色変え
- borderTop を下側にして、100% 表示基準へ
で、最終形態はこんな感じ
使うときは以下をコピーで。@currentField として指定しているので、そのまま使える筈。
データバー ⊕ 色 ⊕ アイコン の例
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "=' ' + if(@currentField == '', '未', @currentField.displayValue)",
"style": {
"position": "absolute",
"white-space": "nowrap",
"padding": "0 4px",
"text-indent": "2px"
},
"attributes": {
"class": "=if(@currentField >= 1.0 , 'sp-css-color-MintGreenFont' , if(@currentField >= 0.9 , 'sp-css-color-CornflowerBlueFont' , if(@currentField >= 0.6 , 'sp-css-color-GoldFont' , if(@currentField >= 0.3 , 'sp-css-color-PeachFont' , 'sp-css-color-CoralFont'))) )",
"iconName": "=if(@currentField >= 1.0 , 'Completed12' , if(@currentField >= 0.9 , 'CoffeeScript' , if(@currentField >= 0.6 , 'Running' , if(@currentField >= 0.3 , 'HazyDay' , 'SearchNearby'))) )",
"$comments": "文字色を正負で変える"
}
},
{
"elmType": "div",
"attributes": {
"class": "=if(@currentField >= 1.0 , 'sp-field-borderBottomSolid sp-css-color-MintGreenFont' , if(@currentField >= 0.9 , 'sp-field-borderBottomSolid sp-css-color-CornflowerBlueFont' , if(@currentField >= 0.6 , 'sp-field-borderBottomSolid sp-css-color-GoldFont' , if(@currentField >= 0.3 , 'sp-field-borderBottomSolid sp-css-color-PeachFont' , 'sp-field-borderBottomSolid sp-css-color-CoralFont'))) )",
"$comments": "データバーそのもの"
},
"style": {
"min-height": "inherit",
"box-sizing": "border-box",
"width": "100%",
"$comments": "データバーの長さ指定"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "=if(@currentField >= 1.0 , 'sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont' , if(@currentField >= 0.9 , 'sp-css-backgroundColor-BgCornflowerBlue' , if(@currentField >= 0.6 , 'sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont' , if(@currentField >= 0.3 , 'sp-css-backgroundColor-BgPeach sp-css-borderColor-PeachFont sp-css-color-PeachFont' , 'sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont'))) )",
"$comments": "データバーそのもの"
},
"style": {
"min-height": "inherit",
"box-sizing": "border-box",
"width": "=if(@currentField >= 1.0, 100, @currentField / 1.0 * 100) + '%'",
"$comments": "データバーの長さ指定"
}
}
]
}
]
}
参考
基本
Lists の JSON 設定の概要確認
IconName はここで確認して取得
CSS Style はここで確認して取得
デバッグ用途補足
プレビューを使って確認しながらするわけだけど、他の列を一緒に見たくなる時には、子要素追加が便利だった
子要素追加
"children": [
{
"elmType": "div",
"txtContent": "[${他の列名とか}]"
}
]
あとがき
JSON 内の自己参照が出来たら、固定値を一か所に集められるのに、と思うんですが・・
Adaptive Card の \$data のような形で持てないものかと試してみたけど、そもそも \$data をどこに定義するのか？と
良い解決策があれば教えてほしいです。
keyword
json customize sample of percent column with data bar, color, and icon.