意識高い系のコワーキングスペースが月額2,000円〜 全国規模で店舗も多くてテレワークが捗る!(詳細はリンク先にて)

【SharepointモダンUI】リストをCSS/JSONカスタマイズするときに役立つ情報

【SharepointモダンUI】リストをCSS/JSONカスタマイズするときに役立つ情報 SharePoint
スポンサーリンク

SharepointモダンUIでのリストカスタマイズで役立つWebページを紹介します。

モダンUIではクラシックUIと異なり、スクリプトエディタでのカスタマイズができなくなりました。一方で、見た目は昔に比べると良い意味で無難な程度に仕上がっているのであまりこだわってCSSを記述する必要はないかもしれません。

必要以上に見た目にこだわるよりも有用な情報をはやくサイト上にあげたり、広く活用される基盤にすべく運用を工夫したりしたほうが生産的です。

とはいえ、見た目を工夫する手段がないわけでもないのでリスト装飾する際に役立つ情報を掲載します。

スポンサーリンク

基本的なSharepointリストの操作

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(GUIからできるリスト装飾)
GUIからできるリスト装飾

以前、モダンUIリストの閲覧者目線の使い方を投稿しています。ここで、GUI操作でできる範囲の列やビューの装飾に触れています。

リストの概念や基本操作を知らないとこの先を読むのはきついかも。

リストをCSS/JSONカスタマイズするときに役立つ情報

まずはマイクロソフトのSharepoint開発ドキュメントの記事です。

▲ 上記は、列の書式設定です。

▲ 上記は、ビューの書式設定です。

▲ 上記は、フォームの書式設定です。フォームのJSON/CSS装飾も最近可能になりました(記事は少し情報不足かな、と思います)。

ビュー定義、列定義のJSON記法によるCSS装飾が紹介されています。サンプルは、コピー&ペーストできるようになっており、コードを少し記述しなおすだけですぐに使えます。

▲ マイクロソフトのページでも紹介されていますが、有志によるリストフォーマットのサンプル集サイト(GitHub)です。

▲ リストフォーマットの表現手段としてアイコンを使うことができます。アイコン集については「Fluent UI Icons」というものが使えます。アイコン名称を取得してJSON記法の属性iconNameに指定すると表示できるようになります。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(センスのよいFluent UI アイコン)
センスのよいFluent UI アイコン

▲ アイコンは、Webパーツ「クイックリンク」で使えるものと同じかと思います。

サンプルのJSON/CSSで少し遊んでみる

マイクロソフトの公式ドキュメントや、有志によるサンプル集から少し試してみます。

以下は、遊んだ後の完成形。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ

列の書式設定

列の見た目をカスタマイズするには、リスト一覧画面で任意の列を選んで「列の設定」→「この列の書式設定」を開き「詳細モード」で設定します。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(列の書式設定)
SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(列の書式設定))
SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(JSONで列の書式設定を行う)
JSONで列の書式設定を行う

初期状態では、以下のJSONコードのみが表記されます。JSON/CSSを使ったカスタマイズを行うには、このカスタム書式設定から行います。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
}

条件付き書式(アイコンあり)

まずは「条件付き書式」です。GUI設定からも同じような装飾が可能ですが、こちらはアイコンがついています。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(条件付き書式)

属性 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 でアイコンを探して名称変更すれば、アイコンを変更できます。

日付の期限切れ

次に日付を比較して現在より過去であれば、それが明確にわかるようにする装飾です。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(リスト内で期限切れを示す)
{
  "$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]の箇所は列の内部名です。

日本語で列名称をつけるとこのような内部名になります。スペース・記号なし英語入力ならそのままの表示になるので日本語環境は使い勝手悪くちょっと不便。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(列の内部名称の取得方法)
列の内部名称の取得方法

▲ 列の内部名は、リスト設定から調べたい列を選んでURLの最後尾を確認するとわかります。上記では、”Field=”より右の部分が内部名となります。

リストで簡易グラフ:データバー

データバーは、エクセルでもお馴染みですよね。リスト内の数値を視覚的に大小を示す場合に非常に有効です。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(エクセルでもお馴染みのデータバー)

▲ 上記は、数値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) + '%')"
  }
}
SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(最近、データバーはGUIからできるようになった)

ただ、この記事の下書きをしているときに気づいたのですが、どうやらGUIからデータバーができるようになったらしい。

最近のシェアポイントはアップデートが早いです。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(GUIから書式設定したデータバー)
GUIから書式設定したデータバー

上昇・下降傾向を示す

数値比較でデータの上昇・下降を示すこともできます。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(リスト内データの上昇・下降を示す)

数値データを二つ用意します。コード例では[$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]"
        }
    ]
}

自前の編集・削除ボタン

リストのアイテムを編集する場合ってタイトル列を押すか、アイテムを選んで「編集」とやりますが、お年寄りの方にはわかりづらいようです(苦笑

アンナ
アンナ

そんな人は引退しなさい

と冷たくあしらってもよいのですが、ボタンでわかりやすくできます。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(編集・削除ボタンを配置する)

以下、編集ボタンのコード。

{
  "$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フローの起動です。

フローの起動は、リスト上部の「自動化」メニューから選択できますけど動線がよくないんですよね。アイテムを選択する手間がある上、実行するボタンを探すのもクリック操作が複数回必要です。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(Power Automateフロー実行の動線がよくない)

列を一つ用意して、実行するフローがわかるようにボタンを表示すると便利になります。アイテムを選ぶ手間もないので気に入っています。

SharepointモダンUIにおけるリストのCSS/JSONカスタマイズ(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について投稿しました。

ページを下書きしつつもサンプルが増えている様子が見てとれたので有志によるアップデートはやはり早いですね。私もよくお世話になっています。

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