モダン リスト 列の書式設定例： 値による表示変更

SharePoint Online では、リストやライブラリの列の表示形式を変更する際に列の書式設定 (Column formatting) が利用できます。

モダン UI でリストやライブラリを利用されているケースが増えてきたのか、トレーニングを開催させていただく中でも、近頃こちらの設定について質問いただくことが多くなってきました。

列の書式設定は、列表示をカスタマイズするための機能で、JSON形式で列に対する表示を指定できます。各列の設定画面にて、[列の書式設定] に JSON を挿入することで表示形式を設定します。

■ 設定画面の開き方
設定画面の開き方は下記のように2パターンあります。

方法１：ビューから直接開く
こちらのほうが簡単な操作ですが、ビューで対象列のメニューより設定画面を開きます。

方法２： リストの設定画面から開く
またリストの設定画面より、該当列の編集画面を開く、列の編集画面内でも同様の設定項目が確認できます。

■ 条件による背景色変更例
「進行中」 「保留」 「完了」 の項目がある選択肢列で、入力された値により背景色を変更する例です。

※ 3択の選択肢の場合、値および色指定の部分を変更するだけで、利用可能です。

■ 参考URL
  詳細確認やサンプル確認には下記がおすすめです。

・ 列の書式設定で SharePoint をカスタマイズする
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting
・ SharePoint Column Formatting Samples
https://github.com/SharePoint/sp-dev-column-formatting

■ 集計列での HTML 表示

とても前の投稿ですが、、「SharePoint 集計列 列の表示デザインに使ってみる」という記事でご紹介した集計列でHTMLを表示するやり方は現在動作しなくなってます。

  参考 「SharePoint 集計フィールドにおける HTML マークアップの処理 」
https://support.microsoft.com/ja-jp/help/4032106/handling-html-markup-in-sharepoint-calculated-fields

SharePoint Online ではもちろん、SharePoint Server (2013/2016) の場合、2017年6月の更新プログラム適用により、その後作成されたWebアプリケーション上では既定で動作できなくなります。(Webアプリケーション設定でオプション変更は可能)

以前のブログ記事では、次のような例を集計列で設定する方法をご紹介していましたが、SharePoint Online ではぜひ、列の書式設定を利用してみてください。

達成率のプログレスバー表示は 「SharePoint Column Formatting Samples」 に似たような例がありますね。優先度の表示にはこの記事で紹介したサンプルを参考にくださいませ。

奥田