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

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

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

作業の開始

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

  1. フォームを構成するリストまたはライブラリに移動します。

  2. リストを使用している場合:

    • アイテムを開いて、アイテムの詳細を表示フォームに表示します。
  3. ドキュメント ライブラリを使用している場合:

    • ファイルを選択します。
    • 選択します
    • [その他] を選択
    • [プロパティ] を選択
  4. フォームの上部にある [フォームの編集] アイコンを展開し、[レイアウトの構成] を選択します

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

  5. [書式] ウィンドウで、次のフォームセクションにフォーマットを適用することを選択できます。

    • ヘッダー
    • 本文
    • フッター

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

  1. ヘッダーにフォーマットを適用するには、[フォーマットの適用先] ドロップダウンで [ヘッダー] を選択します。

  2. カスタム ヘッダー フォーマッターを JSON テキスト入力領域に貼り付けます。

    注:

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

  3. カスタム ヘッダー & 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]"
                    }
                ]
            }
        ]
    }
    
  4. 変更をプレビューするには、[プレビュー] ボタンをクリックします。

  5. 変更を保存するには、[保存] ボタンをクリックします。

  6. フォームを閉じてからもう一度開き、カスタム ヘッダーを表示します。

  1. フッターに書式を適用するには、[書式] ウィンドウの [書式を適用する] ドロップダウンから [フッター] を選択します。

  2. カスタム フッター フォーマッターを JSON テキスト入力領域に貼り付けます。

    注:

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

  3. カスタム フッター & 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"
                        }
                    }
                ]
            }
        ]
    }
    
  4. 変更をプレビューするには、[プレビュー] ボタンをクリックします。

  5. 変更を保存するには、[保存] ボタンをクリックします。

  6. フォームを閉じてからもう一度開き、カスタム フッターを表示します。

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

  1. 本文に書式を適用するには、[書式] ウィンドウの [書式を適用する] ドロップダウンから [本文] を選択します。

  2. カスタムの本文フォーマッターを JSON テキスト入力領域に貼り付けます。

  3. ヘッダーやフッターとは異なり、本文の構成では、1 つ以上のセクションを定義し、それらの各セクションに 1 つ以上の列を追加することしかできません。

    • 1 つまたは複数のセクションを本文に定義できます。
    • 各セクションは、リストまたはライブラリの 1 つ以上の列を参照できます。
    • 列は 1 つのセクションでのみ参照できます。
    • 列が複数のセクションで参照されている場合、列が参照されている最初のセクションが優先されます。
    • どのセクションでも参照されていない列は、最後のセクションで自動的に参照されます。
    • 追加された新しい列は、最後のセクションで自動的に参照されます。
  4. 以下は、セクションの定義とセクション内の列の参照を開始するための 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
                ]
            }
        ]
    }
    
  5. 以下は、セクションを含むカスタムの本文 JSON の例です。

    {
        "sections": [
            {
                "displayname": "",
                "fields": [
                    "Title"
                ]
            },
            {
                "displayname": "Details",
                "fields": [
                    "Department",
                    "Email",
                    "Country"
                ]
            },
            {
                "displayname": "Application",
                "fields": [
                    "Application Id",
                    "Approver",
                    "Reviewer"
                ]
            }
        ]
    }
    
  6. 本文が 1 つ以上のセクションでカスタマイズされると、リストまたはライブラリフォームは複数列のレイアウトに切り替わります。

    注:

    フォーム 本文を構成すると、リストまたはライブラリのフォームレイアウトが単一列から複数列のレイアウトに切り替わります。 将来の更新で、単一列レイアウトで本文を構成するためのサポートを追加する予定です。

    セクション付きのカスタム リスト フォーム本文

  7. 変更をプレビューするには、[プレビュー] ボタンをクリックします。

  8. 変更を保存するには、[保存] ボタンをクリックします。

  9. フォームを閉じてからもう一度開き、カスタム本文を表示します。