【SharePoint】編集フォームのレイアウトを変更する方法メモ

Wed, 25 May 2022 14:10:57 +0900

フォームのレイアウトを複数列にしたい

ShraePointのリストに新規レコードを追加したり、既存のレコードを編集したりする際、デフォルトの状態だとフィールドが縦一列に並んで表示されます。フィールド（列）が少ないと問題ありませんが、登録したい項目が多いとスクロールしたり、情報が部分的にしか見れないため不便です。

そこで、複数列にできないか方法を探したところ、「レイアウトの構成」から「コードの書式設定」にJSON形式で設定を記述すれば、ある程度はカスタマイズできることがわかりました。参考になったページをメモ。

参考ページ

https://www.micknabewata.com/entry/sharepoint/list-form-configuration https://www.micknabewata.com/entry/sharepoint/list-form-configuration

https://idea.tostring.jp/?p=6886 https://idea.tostring.jp/?p=6886

https://pa-wsc.work/2022/03/31/spo_json_list_custom/ https://pa-wsc.work/2022/03/31/spo_json_list_custom/

https://qiita.com/maekawawawa/items/b814d08cefb3911b5cf9 https://qiita.com/maekawawawa/items/b814d08cefb3911b5cf9

マイクロソフトのページ

https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration

複数列にしたいときの書式例

とりあえず、以下の書式を「コードの書式設定」に貼り付けて必要なフォールド名を書き換えていくことで、感覚が掴めると思います。

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

ヘッダーのカスタマイズ

簡易版

とりあえず、ヘッダーに色の付いたタイトルを表示したいときは以下ソースを「ヘッダー」の「コードの書式設定」に貼り付ければ適用できます。

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary, ReactClientFormDefaultHeader"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "border-color": "#ccc",
        "margin-bottom": "16px",
        "color": "#974B8B"
    },
    "txtContent": "=[$Title]"
}

アイコン付き版

ヘッダーにアイコン付きのタイトルを表示したいときのソース。

{
    "elmType": "div",
    "attributes": {
        "iconName": "Group",
        "class": "ms-borderColor-neutralTertiary, ReactClientFormDefaultHeader"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "border-color": "#ccc",
        "margin-bottom": "16px",
        "color": "#974B8B"
    },
    "txtContent": "=[$Title]"
}