harePoint名列アイコン表示完全ガイド：JSON書式設定とダミーファイル活用法

こんにちは！今回は、SharePoint ドキュメントライブラリで「名前」列に表示されるファイル名を非表示にして、ファイルの拡張子に基づいたアイコンを表示する方法について、詳しくご紹介いたします。

このカスタマイズを行うことで、ファイルの種類が一目でわかり、操作性が向上します。また、ユーザーのニーズに合わせた表示の調整が可能になり、より使いやすいライブラリ管理が期待できます。

この記事では、その目標を達成するために試みた手法や、途中で直面した課題、そして最終的な解決策についてお伝えします。

背景と目標
1. 背景
2. 目標
最初の試み
課題の解決策
最終的な結果
まとめ
おわりに

背景と目標

背景

SharePoint のドキュメントライブラリには、ファイルをアップロードすると自動的にファイルに応じたアイコンが表示される「種類」列があります。しかし、この列はファイルをアップロードしないと行が作成できず、アイコンが表示されないという制約があります。

ドキュメントライブラリをリスト形式で使用したい場合や、見栄え上ファイルをアップロードせずに情報を管理したい場合、この制約は不便です。そこで、独自にアイコンを表示させるカスタマイズが必要となりました。

目標

今回のカスタマイズで達成したい目標は、次のとおりです。

各ファイル拡張子（例：.docx、.xlsx）に応じた適切なアイコンを表示すること。
ファイル名を完全に非表示にし、アイコンだけを表示すること。
未対応の拡張子の場合は、デフォルトのアイコン（archive.svg）を表示すること。
ダミーのファイルを使用して、仮想的にファイルをアップロードして行を作成し、それを非表示にし、独自にアイコンを表示すること（リンク付き）。

これらの目標を達成することで、ユーザーにとって視覚的にわかりやすく、操作性の高いライブラリを実現します。

最初の試み

ダミーファイルの活用

まず、ファイルをアップロードしないと行が作成できないという制約を克服するために、ダミーのファイル「DUMMY999.txt」をアップロードしました。このファイルを利用して、必要な行を作成し、デフォルトの「種類」列と「名前」列を非表示にしました。

次に、独自に作成したアイコン表示用のカスタム列を追加し、この列でファイルの拡張子に応じたアイコンを表示させることにしました。

最初の JSON コード

以下のような JSON コードを作成し、カスタム列の書式設定に適用しました。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "=if(endsWith([$FileLeafRef], '.docx'), '/sites/siteassets/word-icon.svg', if(endsWith([$FileLeafRef], '.xlsx'), '/sites/siteassets/excel-icon.svg', '/sites/siteassets/archive.svg'))",
    "alt": "ファイルアイコン"
  },
  "style": {
    "width": "32px",
    "height": "32px"
  }
}

発生した問題

このコードを適用したところ、期待通りにアイコンが表示されませんでした。原因を調べるために、いくつかの仮説を立てました。

フィールド参照の問題：[$FileLeafRef] が正しく機能していない可能性。
if 関数のネスト制限：if 関数のネストが深すぎて、制限に達している可能性。
ダミーファイルの行でアイコンを非表示にする条件が正しく設定されていない可能性。

課題の解決策

IF 関数のネスト制限への対応

SharePoint の列書式設定では、if 関数のネストは最大で7個までという制約があります。複数の拡張子を条件分岐で判定する場合、この制限に達してしまうため、意図した動作をさせることが難しくなります。

そこで、条件分岐を並列化する方法を検討しました。if 関数を多重にネストするのではなく、各条件を独立したブロックとして記述し、それぞれの条件に合致した場合のみ表示させるようにしました。

並列化による条件分岐の実装

以下のように、children 配列を使用して各条件を並列に設定しました。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "attributes": {
        "href": "=if([$FileLeafRef] != 'DUMMY999.txt', [$FileRef], '')",
        "title": "[$FileLeafRef]",
        "target": "_blank"
      },
      "style": {
        "display": "=if([$FileLeafRef] == 'DUMMY999.txt', 'none', 'inline')"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "/sites/siteassets/word-icon.svg",
            "alt": "Word ファイル"
          },
          "style": {
            "display": "=if(endsWith([$FileLeafRef], '.docx'), 'inline', 'none')",
            "width": "32px",
            "height": "32px"
          }
        },
        {
          "elmType": "img",
          "attributes": {
            "src": "/sites/siteassets/excel-icon.svg",
            "alt": "Excel ファイル"
          },
          "style": {
            "display": "=if(endsWith([$FileLeafRef], '.xlsx'), 'inline', 'none')",
            "width": "32px",
            "height": "32px"
          }
        },
        {
          "elmType": "img",
          "attributes": {
            "src": "/sites/siteassets/archive.svg",
            "alt": "その他のファイル"
          },
          "style": {
            "display": "=if(endsWith([$FileLeafRef], '.docx') || endsWith([$FileLeafRef], '.xlsx'), 'none', 'inline')",
            "width": "32px",
            "height": "32px"
          }
        }
      ]
    }
  ]
}

ダミーファイルの行の制御

ダミーファイル「DUMMY999.txt」の行では、アイコンやリンクを表示させないように設定しました。

"style": {
  "display": "=if([$FileLeafRef] == 'DUMMY999.txt', 'none', 'inline')"
}

これにより、ダミーファイルの行は表示されず、ユーザーがクリックできない状態になります。

複数の条件を || 演算子で結合

未対応の拡張子の場合にデフォルトのアイコンを表示させるために、|| 演算子を使用して複数の条件を結合しました。

"style": {
  "display": "=if(endsWith([$FileLeafRef], '.docx') || endsWith([$FileLeafRef], '.xlsx'), 'none', 'inline')"
}

これにより、指定した拡張子以外のファイルにはデフォルトのアイコンが表示されます。

最終的な結果

上記の修正と工夫により、以下の目標を達成することができました。

各ファイル拡張子に応じた適切なアイコンの表示：.docx や .xlsx などのファイルに対して、それぞれのアイコンが表示されます。
ファイル名を非表示にしてアイコンのみを表示：デフォルトの「名前」列を非表示にし、カスタム列でアイコンを表示しました。
未対応の拡張子にはデフォルトのアイコンを表示：指定した拡張子以外のファイルには、archive.svg のアイコンが表示されます。
ダミーファイルの行でアイコンとリンクを非表示に：ダミーファイル「DUMMY999.txt」の行では、アイコンとリンクが表示されず、ユーザーが誤って操作することを防ぎます。