Sharepointのリストで列の条件付き書式を設定したい！列と列を比較して色をつけるなどの方法をまとめてみました

2021.05.06
Share point
スポンサーリンク

Sharepoint上に作成できるリスト（カスタムリスト）はExcelと同じような行列データの管理が可能な便利アプリです。

在庫管理や販売・営業データの蓄積など様々な使い方ができますが普段からリストを使っているとデータの見え映えも気になり、その内「Excelみたいに条件付き書式の設定がしたい」と思うようになってきます。

実はSharePointのリストにも列の条件付き書式設定の機能が設けられており、これを使えばある設定値になると文字色・背景色・枠線などを所定の設定に表示を変えられますし、アイコンを付けて装飾することも可能です。

この記事ではSharePointで作成したリストの列の条件付き書式設定の方法について実際の例を挙げて説明していきます。

SharePointの書式設定を駆使しして強調しましょう！

SharePoint×Teamsで自動投稿フローを作ってみました。
【SharePoint×Teams連携】リストに登録したらTeamsに自動投稿するフローを作る方法
...
www.logicalrat.online
2021.12.27
SharePoint×Teamsで自動承認回覧フローを作ってみました。
【SharePoint×Teams連携】PowerAutomateを使って複数人の承認フローを作る方法
...
www.logicalrat.online
2021.12.27
この記事の目次
  1. Share pointリストの準備
    1. 比較条件に使えるデータ形式と種類
    2. 設定できる比較条件について
    3. 比較条件は複数の設定が可能
  2. 列の書式設定の3つの事例
    1. 1．特定の文字列に対して条件付き書式設定
    2. 2．日付に対して条件付き書式設定
    3. 3．列と列を比較して条件付き書式設定
  3. まとめ
スポンサーリンク

Share pointリストの準備

まずはShare point上にリストを作っていきましょう。Share pointで使用するリストは「機能が予め決まっている列」を差し込んで作られます。

列の条件付き書式を設定する時に

  • 指定の列にある「文字列」が入力されていたら列を赤くする
  • 現在の「日付」が指定の日を過ぎたら列を赤くする
  • A列の「数値」以下になったらB列を赤くする

などのように、データの形式によって条件を指定していきますので、やりたいことに合った列の機能を選ぶ必要があります。

比較条件に使えるデータ形式と種類

比較条件に使えるデータ形式と列の種類
  • 文字列
    1. 一行テキスト
    2. 複数行テキスト
    3. 場所
    4. Yes/No
    5. ユーザーまたはグループ
    6. 選択肢
    7. ハイパーリンク型
  • 数値
    1. 数
    2. 通貨
  • 日付
    1. 日付と時刻

あなたの作成したい列の条件付き書式設定に応じて列の種類の選んでいきましょう。

設定できる比較条件について

Share pointのリスト上で設定できる条件は以下のようになります。この他にもJSONを使った高度な比較条件が準備できますが本記事では割愛します。

  • 文字列
    1. 等しい
    2. 等しくない
  • 数値
    1. 等しい
    2. 等しくない
    3. より大きい
    4. より小さい
    5. 以上
    6. 以下
    7. の間
  • 日付
    1. 等しい
    2. 等しくない
    3. より後
    4. より前
    5. 以降
    6. 以前
    7. の間

→参考：Microsoftcom 列の書式設定でSharePointをカスタマイズする

比較条件は複数の設定が可能

比較条件は複数の設定が可能となっています。

例えば0～10の数字があったとして0～3，4～7，8～10のように範囲を設定してでそれぞれの範囲で書式設定が可能です。

また、文字列においても、A～Dのランク分けがあったとして、Aには緑、Bには黄、Cには赤、Dには灰などの書式設定をすることも可能です。

任意の範囲や文字列に対して書式設定ができるため、進捗管理や重要度別の表示など様々なアクセントをつける事ができます。

列の書式設定の3つの事例

列の書式設定について3つの事例を用いて設定手順を説明します。

Share pointもバージョンアップしておりJSONコードの入力がなくても設定しやすくなっています。

今回の事例の中では1つだけJSONのコードを編集しますが、編集内容はコピー&ペーストのみとお手軽な内容になっています。

1．特定の文字列に対して条件付き書式設定

例題1）ある列の入力値が”東京”と等しい時に列の”背景をピンク、文字を赤”にする。

列に入力された文字列がある設定値になった時に書式を変更する際の設定方法です。例題１の設定をShare pointのリスト上で行っていきます。

  1. 列の追加で一行テキスト（列名を都道府県とする）を選択する。
  2. 列に”東京”と入力する。
  3. 列名の横の∨をクリック/タップする。
  4. 列の設定＞この列の書式設定をクリック/タップする。
  1. 列の書式設定＞条件付き書式のルールを管理をクリック/タップする。
  1. 全ての値を表示するの右側にある…をクリック/タップし、ルールの編集を選択する。
  2. IFの選択肢を次のように入力する。
    • 列の選択：都道府県
    • 比較の選択：等しい
    • 値の選択、または入力：東京
  3. リスト、アイテムを表示のアイコンをクリック/タップし、その他のスタイルを選択する。
  1. 塗りつぶしの色（赤 透明 80％）、フォント（赤）、アイコン（未設定）、罫線（未設定）を選択して保存をクリック/タップする。
  1. ルールの編集画面の保存をクリック/タップする。

以上で設定が完了しました。

列の入力値を東京以外にすると書式は反映されず、東京にすると書式設定が反映されました！

2．日付に対して条件付き書式設定

例題2）ある列の入力値が”今日の日付よりも前”であれば列の”文字を赤、アイコンをWarnning”にする。

列の日付によって書式設定を反映する設定方法です。例題２の設定をShare pointのリスト上で行っていきます。

  1. 列の追加で日付と時刻（列名を締め切りとする）を選択する。
  2. 列に”2015/4/1”と入力する。
  3. 列名の横の∨をクリック/タップする。
  4. 列の設定＞この列の書式設定をクリック/タップする。
  1. 列の書式設定＞条件付き書式のルールを管理をクリック/タップする。
  1. 全ての値を表示するの右側にある…をクリック/タップし、ルールの編集を選択する。
  2. IFの選択肢を次のように入力する。
    • 列の選択：締め切り
    • 比較の選択：より後
    • 値の選択または入力：今日（相対）
  3. リスト、アイテムを表示のアイコンをクリック/タップし、その他のスタイルを選択する。
  1. 塗りつぶしの色（未設定）、フォント（赤）、アイコン（Warnning）、罫線（未設定）を選択して保存をクリック/タップする。
  1. ルールの編集画面の保存をクリック/タップする。

以上で設定が完了しました。

現在の日付（2021年5月）は締め切りを過ぎていますので書式が反映されます。

一方で、現在の日付よりも未来の日付であれば書式は反映されません。

3．列と列を比較して条件付き書式設定

例題３）”A列の入力値がB列の入力値以下”であれば、A列の”背景を黄、文字を赤、アイコンをWarnning”にする。

JSONの簡単な編集（コピー&ペースト）が必要になりますが、列に入力された値と比較して書式設定を反映することができます。例題3の設定をShare pointのリスト上で行っていきます。

  1. 列の追加で数列を2つ（列名を現在の在庫数、必要在庫数とする）を作る。
  2. “現在の在庫数”に次の値を入力（比較のために3行分の値を設定）する。
    • 1行目：0
    • 2行目：2
    • 3行目：6
  3. “必要在庫数”に次の値を入力する。
    • 1行目：1
    • 2行目：1
    • 3行目：6
  4. “現在の在庫数”の横の∨をクリック/タップする。
  5. 列の設定＞この列の書式設定をクリック/タップする。
  1. 列の書式設定＞条件付き書式のルールを管理をクリック/タップする。
  2. 全ての値を表示するの右側にある…をクリック/タップし、ルールの編集を選択する。
  1. リスト、アイテムを表示のアイコンをクリック/タップし、その他のスタイルを選択する。
    ※先に設定しておくと余分な操作が減ります。
  1. 塗りつぶしの色（黄色）、フォント（赤）、アイコン（Warnning）、罫線（囲い線）を選択して保存をクリック/タップする。
  1. ルールの編集画面の保存をクリック/タップする。
  2. IFの選択肢を次のように入力し、詳細モードをクリック/タップする。
    • 列の選択：必要在庫数
    • 比較の選択：以下
    • 値の選択または入力：（空白）
  1. JSONの15行目の” ”の中身をコピーする。
    ※JSONの設定によっては行数が異なります。
13　"operator": "<="
14　"operands": [
15　"[$_x5fc5_~~_x65]" ←この" "で囲まれた部分
16  ""
  1. デザインモードに切り替えるをクリック/タップする。
  1. IFの選択肢を次のように入力し、詳細モードをクリック/タップする。
    • 列の選択：現在の在庫数
    • 比較の選択：以下
    • 値の選択または入力：（空白）
  1. JSONの16行目の” ”の間に先ほどのコードをペーストする。
    ※JSONの設定によっては行数が異なります。
13  "operator": "<="
14　"operands": [
15  "[$_x73fe_~~_x5e]"
16　"[$_x5fc5_~~_x65]" ←" "の間に貼り付け
  1. プレビューをクリック/タップして列に書式設定が反映されることを確認する。
    ※1か所、Warnningのアイコンが反映されていないと思います。JSONコードでは文字の装飾とアイコンの設定は別の行で決められていますので、もう1か所に先ほどコピーしたものを貼り付ける必要があります。
  1. JSONの39行目の” ”の間に先ほどのコードをペーストする。
    ※JSONの設定によっては行数が異なります。
36  "operator": "<="
37  "operands": [
38  "[$_x73fe_~~_x5e]"
39  "[$_x5fc5_~~_x65]" ←" "の間に貼り付け
40    ]
41  }.
42  "warnning",
43  ""
  1. プレビューをクリック/タップしてWarnningのアイコンが反映されることを確認して保存をクリック/タップする。

以上で設定が完了しました。

必要在庫数以下であれば、書式が反映されます。これで備品を発注しないと！と気付けるはずです。

試しに”現在の在庫数”の3行目を6から7に変更すると書式設定が解除されます。

まとめ

Share pointのリストでもExcelのように条件付き書式設定ができましたね！

Share pointはMicrosoft社の様々なアプリと連携することができるため、自動的にリストにデータを反映させたりすることもできます。

それだけでも便利ですが、さらに書式設定もできると列を目立たせることができますので、在庫管理機能を持たせたりするときに便利です。

SharePointの見た目をカスタマイズしてよりユーザーフレンドリーなリストにしてあげましょう！

スポンサーリンク

コメント

  1. Twicsy より:
    2022年6月16日 5:32 AM

    Howdy just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Safari.
    I’m not sure if this is a formatting issue or something to
    do with internet browser compatibility but I figured I’d post to let you know.
    The design look great though! Hope you get the problem fixed soon. Kudos

    返信
  2. Twicsy より:
    2022年6月22日 5:21 AM

    Hello Dear, are you actually visiting this website daily, if so then you will definitely obtain fastidious knowledge.

    返信
  3. Twicsy より:
    2022年7月11日 12:12 AM

    Excellent post. I was checking constantly
    this blog and I am impressed! Very helpful info specially the last part :
    ) I care for such information much. I was seeking this
    particular information for a long time. Thank you and good luck.

    返信
タイトルとURLをコピーしました