【SharePoint Online】モダンUIのリスト/ライブラリをJSONでカスタマイズする【日付チェック】 －その１－
こんにちは。
今回はモダンUIの書式設定を利用して表示をカスタマイズしていきます。
最終的に以下のように色々なカスタムができるようになります。
・日付によって背景色を変更する
・カテゴリによって色とアイコンを付与する
・1行テキストと複数行テキストの文章を全文表示する
今回は「日付によって背景色を変更する」をやっていきましょう。
日付によって背景色を変更する
条件は以下にします。
・現在日時が期限となる日付列の7日前以内であれば黄色
・現在日時が期限列当日であればオレンジ
・現在日時が期限列以降であれば赤色
まずはソースコードです。
解説
解説では基本的な書き方と、注目する点のみを解説していきます。
まずは頭の部分です。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
…………これは書式設定をする上での基本の型と覚えておけばよいです。
基本的なものはこれでスタイルを設定していきます。
$schema …SharePoint Online で使用される JSON スキーマを参照します。
elmType …対象の列のdivタグに対して変更を加える
txtContent …現在のフィールドを@currentFieldに代入
style …ここに色々なスタイルを入れ込んでいく
style配下は、背景色を設定するのですがoperatorで条件(if)operandsで処理
というような構成になっています。
次は7行目からです。
"operator": "?",
"operands": [
{
"operator": "<",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@currentField"
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@now"
]
}
]
}
]
},
"#ff0000",
…………アクションは1つずつしか指定できないので、アクションが複数ある場合はoperands内で都度指定する必要があります。
上記の処理は、「もし[現在の列]が[現在の時刻]より小さければ赤色そうでなければ…」
というような条件となっています。
ここで注目するべきは、「”operator”: “toDateString()”,」です。
これでData型の変数をstring型に変換してから日付の比較をしています。
そうしないと正しく比較できなようなので注意してください。
「そうでなければ…」の以降はそれ以外の条件を記載しています。
例えば[現在の列と同日であればオレンジ]などを記載しています。
次は105行目です。
"operator": "-",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@currentField"
]
}
]
},
604800000
]
}ここでは現在の列から604800000を引いています。
この数字は7日間ということになります。
これは、1日が(24*60*60*1000 = 86,400,000) で成り立つためです。
詳しくは「任意の日付に基づいてアイテムの書式を設定 (高度)」を確認してください。
終わりに
今回は以上となります。
分からない個所などあればコメントなどしてくれればこたえられるかもしれないです。
JSONはぱっと見分かりにくいのですが、1つずつ分解していけば簡単ですので、ぜひ利用してみてください。
それではまた。