ColumnFormatting

【Microsoft Lists】自分の色を変えて目立たせる🎨

ビュー上で自分を見つけやすくするため、上図のように自分(現在のログインユーザー)の背景色や文字色を変えて強調表示する列の書式設定を作成してみました。色はサイトのテーマカラーに応じて変化します。

【Microsoft Lists】リニアゲージの表示📊

2023/11/27 更新: 現在の値がどのグループに属しているか分かりにくかったため、現在の値が属しているグループ以外は背景色を薄くしてみました。 2023/11/29 更新: グラフの最大値と最小値を表示するように修正しました。 2023/11/30 更新: 範囲の設定方法を…

【Microsoft Lists】ガントチャートの表示(自分でガントチャートの開始日、終了日を設定できるバージョン)

2023/09/27追記 : レイアウト調整のため、書式設定のコード、および集計値の数式を修正しました。 過去に次のガントチャートを表示する書式設定を作ってきましたが、いずれも自分で自由にガントチャートの開始日と終了日を設定できるものではありませんでし…

【Microsoft Lists】管理されたメタデータ列の値をタグの見た目に変身🔖

管理されたメタデータの値の見た目を、上図のようなタグのような見た目に変える書式設定を作成してみました。

【Microsoft Lists】色の表示

「今乗っている車、もうそろそろダメそう…」ということで、Microsoft Lists MSA を使い、新車候補をリストにまとめていました。 その新車候補リストに複数選択可能な「カラーバリエーション」列を作っていたのですが、「文字だけではわかりにくい!」と感じ…

【Microsoft Lists】Assign to Me! 私が担当します!

次の動画のような、ユーザー列に現在のログインユーザーを設定する列の書式設定を作成してみました。

【Microsoft Lists】承認の状態(Approval status)列の書式設定

Microsoft Lists で、新たに Microsoft Teams の承認アプリ(Approvals)と連携したリストを、リストテンプレートから作成できるようになりました。(※2023/04/25 時点、展開中の機能であり、テナントによっては利用できない可能性があります。また、日本語…

【Microsoft Lists】この日付列の時刻、世界の国々では何時何分?🌏⏰

上図のような、時間を含む日付列に対して、世界各国の時刻を表示する列の書式設定を作成してみました。

【List Formatting】複数選択肢列の値を箇条書きのように表示する

Microsoft Lists のリストでは、複数選択可能な選択肢列を作成できます。

【List Formatting】指定回数の繰り返し

Microsoft Lists のリストの書式設定では、指定回数を繰り返す、いわゆる for 文は本記事作成時点では用意されていません。そこで、文字列の先頭に指定の文字を追加していく「padStart 演算子」と、指定の文字で文字列を分割する「split 演算子」を利用して…

【Microsoft Lists】ステータス列の書式設定

Microsoft Lists を利用するときに、アイテムの状況を表す「ステータス」列という選択肢列を個人的によく作成します。 そして、そのステータス列の選択肢の値として、「0-作業前」「1-進行中」「2-作業完了」という風な「数字-ステータス名」をよく設定しま…

【Microsoft Lists】QR コードを表示する

TEC-IT さんのサービス Barcode Generator を利用して、上図のような QR コードを表示する列の書式設定を作成してみました。 以下に、作成した書式設定の JSON を掲載します。利用される場合は、1 行テキスト列の書式設定に掲載されている JSON を設定くださ…

【Microsoft Lists】0 ~ 10 の 11 段階評価の書式設定

ネットのアンケートでよく見る 0 ~ 10 の 11 段階評価を、新登場の split 演算子 を利用した列の書式設定で再現してみました。 以下に、作成した書式設定の JSON を掲載します。利用される場合は、数値列の書式設定に掲載されている JSON を設定ください。

【Microsoft Lists】サイトの表示言語にあわせた書式設定(@UIlcid)

リストの書式設定で @UIlcid トークン が利用できるようになり、 サイトの表示言語にあわせた書式設定 ができるようになりました。

【Microsoft Lists】ロケールを利用した書式設定(@lcid)

リストの書式設定で @lcid トークン が利用できるようになり、 ロケールを利用した書式設定 ができるようになりました。

【Microsoft Lists】星評価⭐ と ハートゲージ💖

数値列の値を、星やハートに変身させる列の書式設定を作成してみました。 以下に、作成した書式設定の JSON を掲載します。利用される場合は、数値列の書式設定に掲載されている JSON を設定ください。

【List Formatting】ファイルプレビューカードについて

2022/06/04 更新 上図のようなファイルプレビューカードを表示する書式設定を作成していたのですが、サポートされていない方法でコーディングをしていました。 そのため、現在この書式設定は正しく動作せず、ファイルがプレビューされません。もしこの書式設…

【Microsoft Lists】絵文字の縁取りと塗りつぶし

書式設定で絵文字の縁取りと塗りつぶしを実装してみました。 以下に、書式設定のコードを掲載します。利用する際は、数値列に適用ください。

【Microsoft Lists】あの国は今何時?⏰

2022/06/10 更新:分単位の時差があった場合にも対応 2022/06/15 更新:現在時刻が正しく表示されない現象を修正、それに伴い [TimeDifference] 列を [UTC] 列に変更 上図のような各国の時間をパっと比較するための書式設定を作成してみました。 以下に、作…

【Microsoft Lists】リストに桜を🌸

桜の季節だなーと思い、上図のような桜(?)を表示する書式設定を作成してみました。 以下に書式設定の JSON を記載します。利用する場合は、複数選択を許可したユーザー列に次の JSON を適用ください。

【Microsoft Lists】数値列の値に応じて背景色の濃淡を変える

上図のように、数値列の値に応じて背景色の濃淡を変える書式設定を作成してみました。 以下に作成した書式設定の JSON を掲載いたしますので、利用する場合は数値列の書式設定に JSON をコピー & ペーストしてください。

List Formatting Updates (Tweet Summary)

I noticed a change in the documentation for the following List Formatting.

【Microsoft Lists】日付列に月度を表す絵文字を表示してみた📆

日付にその月度を象徴するような絵文字を付けると、月度が分かりやすくなるかな?と思い、上図のような絵文字を表示する列の書式設定を作ってみました。

【Microsoft Lists】書式設定で Microsoft Lists ice cream を作ってみた!

Twitter で次の Microsoft の社員さんのツイートを見かけました。

【Microsoft Lists】ドーナツグラフを表示する

上図のように、数値列(パーセント表示)の見た目を、ドーナツ円グラフに変える書式設定のサンプルを作成してみました。 以下に作成した書式設定の JSON を掲載しておきます。利用する場合は、数値列(パーセント表示) の書式設定に、掲載されている JSON …

【List Formatting】hour と minute を算出する

Microsoft Lists の書式設定では、 「年」「月」「日」を取得する関数(getYear , getMonth 、getDate)は用意されていますが、「時間(hour)」「分(minute)」 を取得する関数は用意されていません。 そこで、どうにかして「時間(hour)」「分(minute)…

【SharePoint】リストにはんこを表示する

列の書式設定を利用し、上図のようなはんこをリスト上に表示してみました。 以下、はんこを表示する方法を記載します。

【SharePoint / Microsoft Lists】コメント数を表示する

SharePoint のリスト(Microsoft Lists)で、上図のようにリストアイテムに対してコメントができるようになりました。 (ご利用のテナントによっては、まだ利用できないかもしれません) そのコメント数を一覧画面上に表示することができたので、以下に表示…

【SharePoint】サイトのページの「ページ」と「ニュース」を分かりやすくする

サイトのページライブラリには、そのサイト内で作成された「ページ」と「ニュース」が格納されます。 しかし、標準の一覧画面では上図のように「ページ」と「ニュース」の見分けがつきません。

【SharePoint】時間のガントチャートを表示する

上図のような時間のガントチャート(?)を、列の書式設定で作成してみました。 以下、ガントチャートの作成方法を記載します。 よし!それっぽくできた😆✨ #SharePoint #ListFormatting #SVG pic.twitter.com/1156Kt4X08— てっちゃん (@techan_k) 2020年11月2…