SharePoint Onlineのテナントで一ヶ月くらい前からPushされはじめた機能なのだが、リストのコラムセッティングに”Column Formatting”というのが追加されている。 Text Entry Field になっており、説明は”JSON書式でフォーマットを記入してください”とかなりそっけない。 詳細はOffice Devのほうにある。 ここ 。
さらに書式サンプルのDepositoryがGitHUBにおいてある。 ここ
で、上の記述を参考にListViewのカスタム化を自分で試してみたのがこれ。
ここではCheckedのColumn Formatting に以下を指定
{
"debugMode": true,
"elmType":"div",
"children":[
{
"elmType": "img",
"attributes": {
"src": {
"operator":"?",
"operands":[
"@currentField",
"/_layouts/images/CNSAPP16.GIF",
"/_layouts/images/CbUnChecked.gif"
]
},
"aria-hidden":"true"
},
"style": {
}
}
]
}
これでYes/Noの文字表示をアイコンイメージに置き換えている。
Delivery Statusのコラム書式はちょっと長くなる。（参照する各Columnの内部名称をColumn settingsでそれぞれ確認しておく必要があることに注意 下の例では CheckedはCheckedだがDue DateはTaskDueDateになっている）
{
"debugMode": true,
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
"[$Checked]",
"sp-field-severity--good",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
{
"operator": "-",
"operands": [
"@now",
86400000
]
}
]
},
"sp-field-severity--severeWarning",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
"@now"
]
},
"sp-field-severity--blocked",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
{
"operator": "+",
"operands": [
"@now",
604800000
]
}
]
},
"sp-field-severity--warning",
"sp-field-severity--low"
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": {
"operator": "?",
"operands": [
"[$Checked]",
"CheckMark",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
{
"operator": "-",
"operands": [
"@now",
86400000
]
}
]
},
"ErrorBadge",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
"@now"
]
},
"Warning",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
{
"operator": "+",
"operands": [
"@now",
604800000
]
}
]
},
"Error",
"Forward"
]
}
]
}
]
}
]
}
}
},
{
"elmType": "span",
"txtContent": {
"operator": "?",
"operands": [
"[$Checked]",
"Delivered",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
{
"operator": "-",
"operands": [
"@now",
86400000
]
}
]
},
"Past Due",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
"@now"
]
},
"Due Today",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$TaskDueDate]",
{
"operator": "+",
"operands": [
"@now",
604800000
]
}
]
},
"Nearing Due Date",
"Upcoming"
]
}
]
}
]
}
]
},
"style": {
"color": "black"
}
}
]
}
それぞれのAttribute （Text, Class, iConName)に対して出力は異なるものの条件自体は同じ式をを繰り返していれてやらなければならないので記述がやたらに長くなる。 また簡単な条件式を入れ子状に繰り返し使うので、どんどん括弧がふえていく。
条件式のロジックだが、 due date 当日には
@now – 1 day < Due Date < @now
になっていることを利用して 以下のIf構文をJasonにて記述している。
If checked == True then “Delivered 納品済み”
else if Due Date < = @now – 1 day then “Over Due 納期遅れ”
else if Due Date < = @ now then “Due Today 本日納期”
else if Due Date < = @now + 7 days then “Nearing Due Date 納期近し”
else “Upcoming 今後の納入”
ページにJavaScript を埋め込まずにこういうことができるのは画期的だが、 普通のNotepadでエラーを出さずに記述するのはまず不可能。JSON構文のチェック機能とエレメントブロックの折りたたみ機能がしっかりついているProgramming Editorは必須。（無料で使えるVisual Studio Codeがいまどきの旬です。）
なお、このフォーマッターはModern View のみで有効。 Classic Viewでは何も起こらないので CSRを使ったJavaScriptコードの必要性がなくなったというわけではない。 また、 将来への計画はされているようだが、WebPartを使ってリストViewをページに埋め込んだ場合も現時点では機能しない。
最初の行の”debugmode”: trueは記述しておくとエラーの内容がブラウザーのデベロッパーコンソールとコラム表示に吐き出されるのでデバッグ用に便利だがもちろん削除してもかまわない。