ビューの書式設定を使用して SharePoint をカスタマイズする
ビューの書式設定を使用して、SharePoint のリストやライブラリのアイテムの表示方法をカスタマイズできます。 これを行うには、ビュー内でアイテムが読み込まれるときに表示される要素と、それらの要素に適用されるスタイルを記述する JSON オブジェクトを作成します。 ビューの書式設定がリスト アイテムのデータを変更することはありません。リストを閲覧しているユーザーへの表示方法のみが変更されます。 リスト内でビューを作成および管理できるユーザーは、ビューの書式設定を使用してビューの表示方法を設定できます。
ヒント
この記事や他の多数のコミュニティ サンプルで例示されているサンプルは、オープン ソースのリスト形式定義専用の GitHub リポジトリから入手できます。 これらのサンプルは、SharePoint GitHub 組織の sp-dev-list-formatting リポジトリ内で検索できます。
注:
ビューの書式設定は、現在、SharePoint Online でのみサポートされています。
ビューの書式設定の作業を開始する
ビューの書式設定ウィンドウを開くには、ビューのドロップダウンを開き、[現在のビューの書式設定] を選択します。
このウィンドウは現在のレイアウトによって、次のように表示されます。
注:
ビューの書式設定ウィンドウのエクスペリエンスを簡素化して、レイアウト固有の書式設定 JSON を分離しました。 この変更により、tileProps のようなレイアウト固有の小道具を追加する必要がなくなりました。
「リスト」または「コンパクト リスト」のレイアウトで行の書式設定をするには、書式ウィンドウの [レイアウトの選択] ドロップダウンから [リスト] を選択し、rowFormatter または additionalRowClass プロパティを使用します。 「ギャラリー」のレイアウトでカードの書式設定をするには、書式ウィンドウの [レイアウトの選択] ドロップダウンから [ギャラリー] を選択し、formatter プロパティを使用します。 「ボード」ビューでカードを書式設定するには、formatter プロパティを使用するだけです。
ビューの書式設定を使用する最も簡単な方法は、例を使用して特定のビューに適用できるように編集する方法です。 次のセクションで、特定のニーズに合わせたコピー、貼り付け、カスタマイズの例を示します。 SharePoint/sp-dev-list-formatting リポジトリにも、使用可能なサンプルがいくつかあります。
カスタム JSON の作成
ユーザーがスキーマを理解している場合は、カスタム ビューの書式設定 JSON を一から作成するのが簡単になりました。事前入力された JSON スキーマ参照と一緒に Monaco Editor が書式ウィンドウに統合され、ビューの書式設定の作成に役立ちます。Monaco Editor には検証とオート コンプリートがあるため、正しい JSON を作成できます。 JSON の追加は、スキーマの場所を定義する最初の行の後から始めます。
ヒント
Ctrl+スペース を選択して、いつでもプロパティや値の候補を表示することができます。
ヒント
HTMLとCSS をインラインスタイルのフォーマッタ JSON に変換するができるフォーマッタヘルパーツールを使用して HTML から開始することができます。