列の書式設定 がテナントに展開された

SharePoint Online 列の書式設定(Column Formatter)が、使えるようになりました。Office365/SharePoint Onlineロードマップでは、2017年11月末までに展開ということらしいです。

すべてのリスト・ライブラリの列設定画面に「列の書式設定(Column Formatting)」という設定項目が増えています。モダン表示されないリストにも この設定項目は必要なの?っという疑問はありますが。

SharePoint Online 列の書式設定 Column Formatting 1

列の書式設定:
この列の表示を変更するには、次の JSON を追加します。
ボックスからテキストを削除して、カスタムの書式設定をクリアします。
JSONを使用した列の書式設定に関する詳細情報

機能リリース直後は、日本語サイトでも「Column Formatting:」と英語で表示されていましたが、「列の書式設定」に修正されました。素早い対応で驚きました。
ただし、「JSON詳細情報」のリンク先が Officeヘルプをポップアップするのですが ヘルプコンテンツがない...っという残念な状態。

SharePoint Online 列の書式設定 Column Formatting 2

列の書式設定 の仕様

とりあえず ググってみたら SharePoint Technical Notes(オフィスアイ)のブログに 記事が掲載されていますね。ありがたいです。

[SharePoint Online] Viva ! リストの条件付き書式 (Column Formatting) 機能、登場。
[SharePoint Online] Column Formatting 機能に関する追加情報

本家 Microsoftの記事(英語版)は、こちらです。
Column Formatting
Use column formatting to customize SharePoint

Use column formatting to customize SharePointには、例、文法、スタイル、アイコンなどなど必要な情報が載っています。主な実装例は以下の通りです。
・数値 列の値が条件にマッチ(XX以上)したら色を変える
・選択肢列の値に応じて背景色を変える
・日付 列の値が今日だったら色を変える
・アクションのリンク(Aタグ)を追加する
・日付 列の値に応じて グラフのように横幅を広げる
・数値 列の値に応じて、上昇/下降の画像を表示する

列の書式設定 のサンプル

本家 Microsoftの例を転載しても面白くないので・・・サンプルを作ってみました。

SharePoint Online 列の書式設定 Column Formatting 3

タイトル列の値を 太字(Bold)にして、フォントサイズを大きくする場合、以下のコードをタイトル列の「列の書式」に設定します。

選択肢列の値に応じて、背景色を変更する場合、以下のコードを選択肢列の「列の書式」に設定します。if文のように入れ子になっていくので、条件が増えると大変な感じ。

idea.toString(); にも 解説付きのサンプル、ありますね。
SharePoint Online モダン リストの Column formatting を試してみた

(2018.04.17 追記)

spanタグに width属性を付けて 横幅指定できないかな?っと試してみましたが...
テキストが折り返すだけで spanタグの上位タグにあるwidth属性で 横幅が決まっているので、スペース節約できませんでした。
{"txtContent": "@currentField", "elmType": "span", "style": {"width":"120px"}}

spanタグの代わりに divタグを elmTypeに指定して、width属性つけてみても 同じ表示ですね。
{"txtContent": "@currentField", "elmType": "div", "style": {"width":"120px"}}

styleの強制で !importantを最後につけてみると...列の値が表示されなくなってしまいました。
ColumnFormattingは !important サポートされてないってことですかね。
{"txtContent": "@currentField", "elmType": "div", "style": {"width":"120px!important"}}

(2018.04.18 追記)

他の列の値を表示するとか、他の列を参照して 背景色を変えるとか もできますね。
{"txtContent": "[$Status]", "elmType": "span", "style": {"width":"120px"}}

当該列の値は @currentField になっていますが、ここを [$(列の内部名)]に変更します。

列の内部名は、リストの設定画面で列(フィールド)を編集する場合などに URLの末尾に「&Field=Title」という感じで表示されています。

(2018.04.19 追記)

他の列をtxtContentで表示、他の列をoperandsで参照できるのですが、参照元の「他の列」がビューに表示されていないと NGのようです...。

「集計値列で色々と計算した結果を元に Titleの背景色を変える」なんてことをやろうとすると、集計値列がビューに表示されていないと、集計値列の値を参照できず Title列の背景色が変わらないですね。


2018年の記事

2017年の記事


風水吉凶方位 風水吉凶方位 |  奇門遁甲 奇門遁甲 |  金運神社 金運神社 |  仏像 仏像 |  論語 論語 |  般若心経 般若心経 |  二十四節気 二十四節気 |  菜根譚 菜根譚 |  SharePoint活用 SharePoint |  OneNote活用 OneNote |  ICT活用 ICT