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

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

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

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

参考ページ

マイクロソフトのページ

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

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

{
    "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]"
}

アイコンについて

タイトルの左側に表示されるアイコンは"iconName": "Group"で指定していますが、他のアイコンに変更したいときは以下のページでアイコンを探し、アイコン名を変更すれば可能です。

カテゴリによってアイコンを切り替えたいとき

以下のページによると、IF文を使ってカテゴリ名によって表示するアイコンを切り替えることができるようです。

Gadget Gate