リストフォームを構成する

[アーティクル]
04/08/2023

リストまたはライブラリのリストフォームは、カスタムヘッダー、フッター、および各セクションにフィールドを持つ 1 つ以上のセクションを持つフォーム本体で構成できます。フォーム構成は、リストアイテムまたはファイルのデータを変更しません。リストやライブラリを閲覧しているフォームの表示の方法が変わるだけです。リスト内のビューを作成および管理できるユーザーは誰でも、フォーム構成を使用して、ヘッダー、フッター、およびセクション付きの本文でフォームを構成できます。

フォームを構成するには、リストまたはライブラリーの列またはビューをフォーマットするときに、既に使い慣れている JSON フォーマッタを使用します。フォーム構成では、特定の定義済みの要素と属性を使用して、1 つ以上のセクションでカスタムヘッダー、フッター、および本文を作成できます。

作業の開始

リストまたはライブラリでフォームを構成するには:

フォームを構成するリストまたはライブラリに移動します。
リストを使用している場合:
- アイテムを開いて、アイテムの詳細を表示フォームに表示します。
ドキュメントライブラリを使用している場合:
- ファイルを選択します。
- 選択します
- [その他] を選択
- [プロパティ] を選択
フォームの上部にある [フォームの編集] アイコンを展開し、[レイアウトの構成] を選択します
[書式] ウィンドウで、次のフォームセクションにフォーマットを適用することを選択できます。
- ヘッダー
- 本文
- フッター

カスタムヘッダーを構成する

ヘッダーにフォーマットを適用するには、[フォーマットの適用先] ドロップダウンで [ヘッダー] を選択します。
カスタムヘッダーフォーマッターを JSON テキスト入力領域に貼り付けます。

注:

フォーム構成では、特定の事前定義された要素と属性でカスタムヘッダーを作成できます。

カスタムヘッダー & JSON の例を次に示します。

カスタムリストフォームヘッダー

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Group",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Contact details for ' + [$Title]"
                }
            ]
        }
    ]
}

変更をプレビューするには、[プレビュー] ボタンをクリックします。
変更を保存するには、[保存] ボタンをクリックします。
フォームを閉じてからもう一度開き、カスタムヘッダーを表示します。

フッターに書式を適用するには、[書式] ウィンドウの [書式を適用する] ドロップダウンから [フッター] を選択します。
カスタムフッターフォーマッターを JSON テキスト入力領域に貼り付けます。

注:

フォーム構成では、特定の事前定義された要素と属性でカスタムフッターを作成できます。

カスタムフッター & JSON の例を次に示します。

カスタムリストフォームフッター

{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "width": "100%",
                "padding-top": "10px",
                "height": "24px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "='Contact Details for ' + [$Title]",
                    "attributes": {
                        "target": "_blank",
                        "href": "='https://aka.ms/contacts?email=' + [$Email]",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        }
    ]
}

変更をプレビューするには、[プレビュー] ボタンをクリックします。
変更を保存するには、[保存] ボタンをクリックします。
フォームを閉じてからもう一度開き、カスタムフッターを表示します。

1つ以上のセクションでカスタムの本文を構成する

本文に書式を適用するには、[書式] ウィンドウの [書式を適用する] ドロップダウンから [本文] を選択します。
カスタムの本文フォーマッターを JSON テキスト入力領域に貼り付けます。
ヘッダーやフッターとは異なり、本文の構成では、1 つ以上のセクションを定義し、それらの各セクションに 1 つ以上の列を追加することしかできません。
- 1 つまたは複数のセクションを本文に定義できます。
- 各セクションは、リストまたはライブラリの 1 つ以上の列を参照できます。
- 列は 1 つのセクションでのみ参照できます。
- 列が複数のセクションで参照されている場合、列が参照されている最初のセクションが優先されます。
- どのセクションでも参照されていない列は、最後のセクションで自動的に参照されます。
- 追加された新しい列は、最後のセクションで自動的に参照されます。

以下は、セクションの定義とセクション内の列の参照を開始するための JSON 構造です。

{
    "sections": [
        {
            //give a display name for the section
            "displayname": "",
            "fields": [
                //reference your fields here using their display name
                "Title"
            ]
        },
        {
            //give a display name for the section
            "displayname": "",
            "fields": [
                //reference your fields here using their display name
            ]
        }
    ]
}

以下は、セクションを含むカスタムの本文 JSON の例です。

{
    "sections": [
        {
            "displayname": "",
            "fields": [
                "Title"
            ]
        },
        {
            "displayname": "Details",
            "fields": [
                "Department",
                "Email",
                "Country"
            ]
        },
        {
            "displayname": "Application",
            "fields": [
                "Application Id",
                "Approver",
                "Reviewer"
            ]
        }
    ]
}

本文が 1 つ以上のセクションでカスタマイズされると、リストまたはライブラリフォームは複数列のレイアウトに切り替わります。

注:

フォーム本文を構成すると、リストまたはライブラリのフォームレイアウトが単一列から複数列のレイアウトに切り替わります。将来の更新で、単一列レイアウトで本文を構成するためのサポートを追加する予定です。
変更をプレビューするには、[プレビュー] ボタンをクリックします。
変更を保存するには、[保存] ボタンをクリックします。
フォームを閉じてからもう一度開き、カスタム本文を表示します。

リストフォームを構成する

作業の開始

カスタムヘッダーを構成する

カスタムフォルダーを構成する

1つ以上のセクションでカスタムの本文を構成する

その他のリソース

その他のリソース

リスト フォームを構成する

作業の開始

カスタムヘッダーを構成する

カスタム フォルダーを構成する

1つ以上のセクションでカスタムの本文を構成する

その他のリソース

その他のリソース

リストフォームを構成する

カスタムフォルダーを構成する