SharepointモダンUIでのリストカスタマイズで役立つWebページを紹介します。
モダンUIではクラシックUIと異なり、スクリプトエディタでのカスタマイズができなくなりました。一方で、見た目は昔に比べると良い意味で無難な程度に仕上がっているのであまりこだわってCSSを記述する必要はないかもしれません。
必要以上に見た目にこだわるよりも有用な情報をはやくサイト上にあげたり、広く活用される基盤にすべく運用を工夫したりしたほうが生産的です。
とはいえ、見た目を工夫する手段がないわけでもないのでリスト装飾する際に役立つ情報を掲載します。
基本的なSharepointリストの操作
以前、モダンUIリストの閲覧者目線の使い方を投稿しています。ここで、GUI操作でできる範囲の列やビューの装飾に触れています。
リストの概念や基本操作を知らないとこの先を読むのはきついかも。
リストをCSS/JSONカスタマイズするときに役立つ情報
まずはマイクロソフトのSharepoint開発ドキュメントの記事です。
▲ 上記は、列の書式設定です。
▲ 上記は、ビューの書式設定です。
▲ 上記は、フォームの書式設定です。フォームのJSON/CSS装飾も最近可能になりました（記事は少し情報不足かな、と思います）。
ビュー定義、列定義のJSON記法によるCSS装飾が紹介されています。サンプルは、コピー&ペーストできるようになっており、コードを少し記述しなおすだけですぐに使えます。
▲ マイクロソフトのページでも紹介されていますが、有志によるリストフォーマットのサンプル集サイト（GitHub）です。
▲ リストフォーマットの表現手段としてアイコンを使うことができます。アイコン集については「Fluent UI Icons」というものが使えます。アイコン名称を取得してJSON記法の属性iconNameに指定すると表示できるようになります。
▲ アイコンは、Webパーツ「クイックリンク」で使えるものと同じかと思います。
サンプルのJSON/CSSで少し遊んでみる
マイクロソフトの公式ドキュメントや、有志によるサンプル集から少し試してみます。
以下は、遊んだ後の完成形。
列の書式設定
列の見た目をカスタマイズするには、リスト一覧画面で任意の列を選んで「列の設定」→「この列の書式設定」を開き「詳細モード」で設定します。
初期状態では、以下のJSONコードのみが表記されます。JSON/CSSを使ったカスタマイズを行うには、このカスタム書式設定から行います。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
}条件付き書式（アイコンあり）
まずは「条件付き書式」です。GUI設定からも同じような装飾が可能ですが、こちらはアイコンがついています。
属性 iconName は、この属性を指定すると Fluent UI アイコンを表示するCSSクラスを設定することができます。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(@currentField == '完了', 'sp-field-severity--good', if(@currentField == '作業中', 'sp-field-severity--low', if(@currentField == '確認中', 'sp-field-severity--warning', if(@currentField == '懸案事項あり', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == '完了', 'CheckMark', if(@currentField == '作業中', 'Forward', if(@currentField == '確認中', 'Error', if(@currentField == '懸案事項あり', 'Warning', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}画像の例だと、if文がネストされた以下の箇所ですね。
- CheckMark
- Forward
- Error
- Warning
- ErrorBadge
Fluent UI でアイコンを探して名称変更すれば、アイコンを変更できます。
日付の期限切れ
次に日付を比較して現在より過去であれば、それが明確にわかるようにする装飾です。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"txtContent": "=if([$_x73fe__x5728__x3088__x308a__x90] <= @now, '過去は振り返らない', @currentField)",
"style": {
"color": "=if([$_x73fe__x5728__x3088__x308a__x90] <= @now, '#ff0000', '')"
}
}[$_x73fe__x5728__x3088__x308a__x90]の箇所は列の内部名です。
日本語で列名称をつけるとこのような内部名になります。スペース・記号なし英語入力ならそのままの表示になるので日本語環境は使い勝手悪くちょっと不便。
▲ 列の内部名は、リスト設定から調べたい列を選んでURLの最後尾を確認するとわかります。上記では、”Field=”より右の部分が内部名となります。
リストで簡易グラフ：データバー
データバーは、エクセルでもお馴染みですよね。リスト内の数値を視覚的に大小を示す場合に非常に有効です。
▲ 上記は、数値20を最大値とした場合のデータバーです。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"padding-left": "8px",
"white-space": "nowrap"
}
}
],
"attributes": {
"class": "sp-field-dataBars"
},
"style": {
"padding": "0",
"width": "=if(@currentField >= 20, '100%', (@currentField * 5) + '%')"
}
}
ただ、この記事の下書きをしているときに気づいたのですが、どうやらGUIからデータバーができるようになったらしい。
最近のシェアポイントはアップデートが早いです。
上昇・下降傾向を示す
数値比較でデータの上昇・下降を示すこともできます。
数値データを二つ用意します。コード例では[$After]、 [$Before]と記載しています。[$After]を[$Before]と比較して、Afterの方が高ければアップ表示、低ければダウン表示となっています。
日本語の列名称を使うことになると思いますので、ここでもやはり列の内部名で指定します。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": ">",
"operands": [
"[$After]",
"[$Before]"
]
},
"sp-field-trending--up",
"sp-field-trending--down"
]
},
"iconName": {
"operator": "?",
"operands": [
{
"operator": ">",
"operands": [
"[$After]",
"[$Before]"
]
},
"SortUp",
{
"operator": "?",
"operands": [
{
"operator": "<",
"operands": [
"[$After]",
"[$Before]"
]
},
"SortDown",
""
]
}
]
}
}
},
{
"elmType": "span",
"txtContent": "[$After]"
}
]
}自前の編集・削除ボタン
リストのアイテムを編集する場合ってタイトル列を押すか、アイテムを選んで「編集」とやりますが、お年寄りの方にはわかりづらいようです（苦笑
そんな人は引退しなさい
と冷たくあしらってもよいのですが、ボタンでわかりやすくできます。
以下、編集ボタンのコード。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "editProps"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
"title": "Edit Item"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Edit",
"class": "ms-font-xxl"
}
}
]
}以下、削除ボタンのコード。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "delete"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
"title": "Delete Item"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Delete",
"class": "ms-font-xxl"
}
}
]
}フローを起動する
個人的によく使うのがリストからのPower Automateフローの起動です。
フローの起動は、リスト上部の「自動化」メニューから選択できますけど動線がよくないんですよね。アイテムを選択する手間がある上、実行するボタンを探すのもクリック操作が複数回必要です。
列を一つ用意して、実行するフローがわかるようにボタンを表示すると便利になります。アイテムを選ぶ手間もないので気に入っています。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"16ca8bd6-19f6-4afc-9da6-82f517190ca6\"}"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Flow"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "出勤連絡を行う"
}
]
}以下の箇所で、フローIDを指定しています。
"actionParams": "{\"id\": \"16ca8bd6-19f6-4afc-9da6-82f517190ca6\"}"Power AutomateのフローIDは、フローの編集画面のURLより取得します。以下の最後の部分です。
https://japan.flow.microsoft.com/manage/environments/Default-69d80b06-b85c-4016-ac4c-95c337f70441/flows/16ca8bd6-19f6-4afc-9da6-82f517190ca6より洗練された見た目を目指すなら Power Apps
JSON/CSSによる装飾以外にもPower Appsを使ってアプリ化する方法があります。
Sharepointリストや既存データソースを情報基盤にできるし、パーツを配置する要領はパワーポイントの操作感に近いです。慣れれば、パソコン、タブレット、スマートフォンに最適化されたレイアウトにすることができます。
まとめ
サンプル豊富でコピペでカスタマイズできるリストのJSON/CSSについて投稿しました。
ページを下書きしつつもサンプルが増えている様子が見てとれたので有志によるアップデートはやはり早いですね。私もよくお世話になっています。
