はじめに
プリザンターのサーバスクリプトでは、siteSettings.Sectionsを使うことで、セクションをサーバスクリプトで制御することが可能です。ただし、このsiteSettings.Sectionsを使った方法は、画面の初期ロード時のみの対応で、自動ポストバックには対応していないため、入力項目に応じてセクションを閉じたり開いたりすることは出来ません。
今回は自動ポストバック時にセクションを制御する方法を紹介します。
自動ポストバックに関連する部分になるので、サーバスクリプトでの実装となります。
実装方法
context.AddResponseを使用して、JavaScriptを直接実行することで自動ポストバック時の制御を実現します。
siteSettings.Sectionsを使用する制御の場合は、編集画面の上から順番に0,1,2...と番号が採番されますが、この方法では見出しを追加時に付与されるIDを使用します。
詳細設定モーダルのIDを参照してください。
閉じる方法
//Cssを使う方法
context.AddResponse("Css", "#SectionFields1", '{"Name":"display","Value":"none"}');
//Toggleを使う方法
context.AddResponse("Toggle", "#SectionFields1", "0");
第2引数は実際のIDに置換してください。
開く方法
//Cssを使う方法
context.AddResponse("Css", "#SectionFields1", '{"Name":"display","Value":""}');
//Toggleを使う方法
context.AddResponse("Toggle", "#SectionFields1", "1");
第2引数は実際のIDに置換してください。
「セクションの折りたたみを許可」について
「セクションの折りたたみを許可」のオプションについては、見出しをクリックしての手動操作についての制御になるため、許可・不許可のいずれでも使用は可能です。ユーザによる操作を断ちたい場合もあるかと思いますので、不許可のままで使用するのもありです。
画面の表示順からIDを取得する方法
siteSettings.Sectionsと互換性のある方法で、IDを取得することも可能です。例えば、1番面のセクションのIDを取得したい場合は、
siteSettings.Sections[0].Id
で取得が可能です。これを開くパターンで使用すると
context.AddResponse("Toggle", `#SectionFields${siteSettings.Sections[0].Id}`, "1");
このようになります。
まとめ
今回は自動ポストバック時にセクションを制御する方法を紹介しました。本来ならsiteSettings.Sectionsで制御できるのが良いのですが、現状の実装だと制御が抜け落ちているのでcontext.AddResponseを使った代替手段の紹介となりました。
セクションの制御が動的に出来ると、画面内に大量の項目がある場合などに項目の絞り込みを行うことが出来るためUXの向上を図ることが可能です。
皆さん是非試して見てください。