ビューの書式設定を使用して SharePoint をカスタマイズする

ビューの書式設定を使用して、SharePoint のリストやライブラリのアイテムの表示方法をカスタマイズできます。 これを行うには、ビュー内でアイテムが読み込まれるときに表示される要素と、それらの要素に適用されるスタイルを記述する JSON オブジェクトを作成します。 ビューの書式設定がリスト アイテムのデータを変更することはありません。リストを閲覧しているユーザーへの表示方法のみが変更されます。 リスト内でビューを作成および管理できるユーザーは、ビューの書式設定を使用してビューの表示方法を設定できます。

ヒント

この記事や他の多数のコミュニティ サンプルで例示されているサンプルは、オープン ソースのリスト形式定義専用の GitHub リポジトリから入手できます。 これらのサンプルは、SharePoint GitHub 組織の sp-dev-list-formatting リポジトリ内で検索できます。

注意

ビューの書式設定は、現在、SharePoint Online でのみサポートされています。

ビューの書式設定の作業を開始する

ビューの書式設定ウィンドウを開くには、ビューのドロップダウンを開き、[現在のビューの書式設定] を選択します。

ビューのドロップダウン メニュー

このウィンドウは現在のレイアウトによって、次のように表示されます。

リスト レイアウトの書式設定ウィンドウ ギャラリー レイアウトの書式設定ウィンドウ

注意

ビューの書式設定ウィンドウの表示を簡略化し、JSON の書式設定のリストとギャラリーのレイアウトを分けました。 この変更により、tileProps プロパティを追加する必要はありません。

「リスト」または「コンパクト リスト」のレイアウトで行の書式設定をするには、書式ウィンドウの [レイアウトの選択] ドロップダウンから [リスト] を選択し、rowFormatter または additionalRowClass プロパティを使用します。 「ギャラリー」のレイアウトでカードの書式設定をするには、書式ウィンドウの [レイアウトの選択] ドロップダウンから [ギャラリー] を選択し、formatter プロパティを使用します。

ビューの書式設定を使用する最も簡単な方法は、例を使用して特定のビューに適用できるように編集する方法です。 次のセクションで、特定のニーズに合わせたコピー、貼り付け、カスタマイズの例を示します。 SharePoint/sp-dev-list-formatting リポジトリにも、使用可能なサンプルがいくつかあります。

カスタム JSON の作成

ユーザーがスキーマを理解できているなら、カスタム ビューの書式設定 JSON を一から作成するのが簡単になりました。事前入力された JSON スキーマの参照と Monaco Editor が書式ウィンドウに統合したので、ビューの書式設定の作成に役立ちます。Monaco Editor には検証とオート コンプリートがあるため、正しい JSON を作成できます。ユーザーは、スキーマの場所を定義する最初の行の後に JSON を追加できるようになります。

ヒント

Ctrl+スペース を選択して、いつでもプロパティや値の候補を表示することができます。

ヒント

HTMLとCSS をインラインスタイルのフォーマッタ JSON に変換するができる フォーマッタヘルパーツールを使用して HTML から開始することができます。

関連項目