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

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

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

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

参考ページ

Link

Sharepointの新しい「レイアウトの構成」機能を試してみた - 鍋綿ブログ

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

Link

Sharepoint Online モダンリストのフォームのレイアウトをカスタマイズしてみる – Idea.tostring();

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

Link

Sharepoint Online のカスタムリストを Json で簡単カスタマイズ - Something.blog

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

Link

[sharepoint Online]リスト フォームの項目の並び順の優先順位を検証する - Qiita

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

マイクロソフトのページ

Link

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

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

アイコンについて

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

Link

Office Ui Fabric Icons

https://uifabricicons.azurewebsites.net/

Link

Home - Fluent Ui

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons#icons

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

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

Link

【sharepoint Online】モダンuiのリスト/ライブラリをjsonでカスタマイズする【アイコン設定】 -その2- | ほげふがな日常

https://www.hogehoge-note.com/2020/02/15/post-695/

その他参考ページ

Link

Sharepointリストの書式設定(json) チートシート - Qiita

https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1

Link

Sharepointリストのアイテムをニュース風にカスタマイズ - Qiita

https://qiita.com/Momono_gg/items/dc6b3253e4c0c64cf170

PAGETOP