SharePoint Online のモダンリストでは、列の表示は「列の書式設定」、ビューの表示は「ビューの書式設定」でカスタマイズができるほか、アイテム個別の閲覧・作成・編集を行う際のフォームもちょっとしたカスタマイズができるようになっています。
列やビューの書式設定は、以前にも試したことがあり、最近は JSON を記述しなくても設定できる項目が増えてきたので便利に利用しているのですが、フォームの書式設定は試したことが無いなとふと思いました。
というわけで、簡単にできる範囲でサッと試してみたいと思います。
フォーム レイアウトのカスタマイズ
フォームの書式設定の機能を利用すると、入力項目を「セクション」でグループ化することができます。同時に、標準では縦並びになっている入力項目が、セクションごとに横並びに配置されるようになり、アイテムの値をパッとひと目で見やすくなります。
たとえば、あらかじめ用意されているリストテンプレートから作成できる「出張申請」では、標準では次のようにフォームが表示されます。
これが、書式設定を利用すると、次のようなフォームに変更することができます。
書式設定自体は、他にも変更できるところがあるのですが、まずは入力項目が整理できるだけでも嬉しいですよね。
フォームのレイアウトを変更してみる
それでは実際の設定手順を見ていきましょう。今回設定するのはフォームの「本文」の部分です。公式ドキュメントを読むと、JSON を書く必要があるようです。
リスト フォームを構成する | Microsoft Docs
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration
しかしながら、JSON を記述するのは大変なので、その部分を最小限に抑えつつ設定できる方法を我流で編み出しました。
最小限の JSON を記述する
ブラウザ上のマウス操作で設定できない箇所は、「セクション」を定義する部分なので、JSON ではセクション定義のみを記述します。
{
"sections": [
{
"displayname": "案件名"
},
{
"displayname": "出張詳細"
},
{
"displayname": "飛行機代とホテル代"
},
{
"displayname": "補足など"
}
]
}
構造は単純で、sections の中に { "displayname": "セクション名" } を必要なだけ追加する形になります。
レイアウトの構成
先ほど記述した JSON をリストに設定するには、アイテム作成フォームなどを開き、右上のメニューから [レイアウトの構成] を選択します。
「書式設定」のパネルが表示されますので、[書式の適用先] では「本文」を選択し、[コードの初期設定] に JSON を貼り付けたあとで、[保存] をクリックしましょう。
[保存] をクリックした後で、上手く表示に反映されないこともありますので、一度ブラウザでリストのページを再読み込みし、再度リストのフォームを開き直して確認しましょう。上手くいけば、次のような形で、セクション名が表示されているはずです。
あとは、各セクションに割り当てる項目を設定していきましょう。
列の編集
今度はフォームの右上のメニューから [列の編集] を選択します。
「フォームの列を編集します」のパネルでは、各セクションに項目を割り当てることができます。任意の項目をドラッグ & ドロップで目的のセクションに移動させましょう。
設定が終わったら [保存] をクリックして終了します。 上手く表示に反映されないこともありますので、一度ブラウザでリストのページを再読み込みし、再度リストのフォームを開き直して確認しましょう。 上手くいけば、最初に紹介したように、各セクションにそれぞれ項目が割り当てられたフォームが表示されるはずです。
トラブルシュート
ためしてみていて、いくつか不具合が発生するパターンを見つけたので書いておきます。
項目が空のセクションがあると表示が既定の状態に戻ってしまう
列を編集を行い、ちゃんと保存したにも関わらず、フォームの表示が既定の状態に戻ってしまうことがあります。たとえば、いくつか定義したセクションの内、どれかに項目をひとつも割り当てずに保存した場合などに起こるようです。
この問題が発生している場合は、[レイアウトの構成] から「本文」に設定されている JSON を見るとすぐに分かります。次のように JSON が整形されることなく表示されている場合は、JSON の記述に問題があります。
このような場合は、fields の項目を閉じるカッコなどが不足しているため該当箇所を探して次のように書き換えます。
{"displayname":"飛行機代とホテル代","fields":[
閉じカッコを追加します。
{"displayname":"飛行機代とホテル代","fields":[]}
書き換えたあとで保存すると、正常に表示されるようになるはずです。
列名に「”」が含まれると表示が既定の状態に戻ってしまう
遭遇する機会の多くないパターンかもしれませんが、列名に「”」が含まれるものがあると、「列の編集」のあとに表示が既定の状態に戻ってしまうことがあります。
この問題も、「レイアウトの構成」から「本文」に設定されている JSON を見るとすぐに分かります。
このような場合には、列名の「”」をエスケープする必要があります。難しく聞こえるかもしれませんが、列名の「”」の前に \ を加えて「\”」と書き換えるだけです。
{"displayname":"飛行機代とホテル代","fields":[""特記事項""]}
「”特記事項”」という列名の「”」をエスケープして「\”特記事項\”」に書き換えます。
{"displayname":"飛行機代とホテル代","fields":["\"特記事項\""]}
書き換えたあとで保存すると、正常に表示されるようになるはずです。
「添付ファイル」の表示位置を変えたい
「列の編集」では、「添付ファイル」の位置を変更することができません。[レイアウトの構成] から「本文」の JSON を直接書き換える必要があります。
たとえば、該当する部分を次のように変更しましょう。
{
"displayname": "案件名",
"fields": [
"出張のタイトル",
"申請者",
"添付ファイル"
]
}
表示したいセクションの fields の中に「”添付ファイル”」を追加しています。
モバイルから利用する際の制限事項
残念ながら、ここで設定したフォームの書式設定は、Microsoft Lists アプリや SharePoint アプリなどのモバイルから利用する場合には反映されません。厄介なのは、利用するアプリによって、並び順の元となる設定箇所が異なる点です。
Microsoft Lists アプリから利用する場合は、列の編集で並び替えた順番で縦に並んで表示がされますが、SharePoint アプリから利用する場合は、[リストの設定] 画面の「列」の設定項目になる [列の順序] で設定した順番に並ぶようです。
このあたりは Qiita でも解説されている記事がありましたので、こちらも参考にしていただけるかと思います。
[SharePoint Online]リスト フォームの項目の並び順の優先順位を検証する – Qiita
https://qiita.com/maekawawawa/items/b814d08cefb3911b5cf9
さいごに
つまづきポイントがいくつかあるものの、設定方法自体は簡単で、見た目も使い勝手もグッと良くなる設定項目ですね。また、レイアウト以上に、入力規則や制限などを設けたい場合には、Power Apps でフォームをカスタマイズするのが良さそうですね。
もしよければ、リストやビューの書式設定については、以前に書いた下記の記事もご覧ください。
SharePoint Online モダン リストの Column formatting を試してみた
https://idea.tostring.jp/?p=3163
SharePoint Online モダン リストの View formatting を試してみた
https://idea.tostring.jp/?p=3782
