Skip to content

セクション(見出し)の制御 ​

第6版作成 最終更新 (日本時間)
確認バージョン1.5.8.1

編集画面のセクション(見出し)は、サーバースクリプトの siteSettings.Sections で制御できます。マニュアルに載っていない Hide プロパティと Update メソッドも使えます。ただし siteSettings.Sections は画面の初期ロード時にしか効かないため、入力内容に応じて自動ポストバックで開閉したい場合は context.AddResponse を使います。

方法効くタイミングセクションの指定方法
siteSettings.Sections画面の初期ロード時画面の上から数えた添字(0 始まり)
context.AddResponse自動ポストバック時見出しの ID(#SectionFields{ID})
スクリプト(ajax_after_done)自動ポストバック時見出しの ID(#SectionFields{ID}Container)

siteSettings.Sections で制御する(初期ロード時) ​

マニュアルにある siteSettings.Sections を使います。

添字 ​

マニュアルには書かれていませんが、配列の添字は 0 から始まります。セクション自体の ID は使われず、編集画面の上から順に 0, 1, 2… と連番になります。

使えるプロパティ ​

プロパティ型説明
Idintセクション ID
LabelTextstring表示名
AllowExpandboolセクションを展開可能にするかどうか
Expandboolセクションを開く / 閉じる
Hideboolセクションを非表示にする(マニュアルに記載なし)

プロパティ名は Section クラスの定義に合わせています(Section.cs)。表示名のプロパティは LabelText です(LableText と綴ると、この名前のプロパティは存在しないため動きません)。

Update メソッド ​

プロパティをまとめて設定する Update メソッドもあります(マニュアルに記載なし)。

js
siteSettings.Sections[index].Update(
   id,
   labelText,
   allowExpand,
   expand,
   hide
)
  • id には必ず値をセットします。ただし変更しないのが望ましい項目なので、現在の Id をそのまま渡します。
  • 変更しない項目には null をセットします。null 以外を渡した項目だけが更新されます(Section.cs)。
js
siteSettings.Sections[0].Update( //インデックスを指定する
   siteSettings.Sections[0].Id, //Idは現状のものをそのままセットする
   '変更後フィールド名',
   null, //変更する必要のない項目はnullをセットする
   true,
   false
);

自動ポストバックでは効かない理由 ​

サーバースクリプトの siteSettings.Sections は SiteSettings.Sections そのものを参照しています(ServerScriptModelSiteSettings.cs)。Hide などを書き換えると本体側のセクション設定がそのまま変わるので、画面を描画するときには反映されます。自動ポストバックでも「画面表示の前」のサーバースクリプトは実行されます(IssueUtilities.cs)。効かないのは、自動ポストバックの応答の作り方が違うためです。

初期ロード自動ポストバック
応答編集画面の HTML 全体を作るEditorFields で項目ごとの値だけを返す(IssueUtilities.cs)
セクションHide が true でなければ #SectionFields{ID}Container を出力する(IssueUtilities.cs)処理しない

自動ポストバックの応答を作る FieldResponse は、エディタの列名を ss.GetColumn() で列に変換し、null を除いてから値を返します(IssueUtilities.cs)。セクションはエディタの列一覧の中で _Section-{ID} という疑似的な列名で管理されていて、列ではないため null になり、ここで落ちます。EditorFields にもセクションの表示・非表示を返す処理はありません(IssueUtilities.cs)。記録テーブルの ResultUtilities.cs も同じ作りです。Wiki は自動ポストバックでも #MainContainer を丸ごと描き直すので、Hide が反映されます(WikiUtilities.cs)。

初期ロードで Hide にしたセクションは後から表示できない

Hide が true のセクションは、非表示にするのではなく HTML に出力されません。初期ロードで siteSettings.Sections[i].Hide = true にすると、そのセクションと中の項目は画面に存在しないので、自動ポストバックで Toggle や Css を送っても表示できません。自動ポストバックで開閉するセクションは Hide を使わず、表示したまま context.AddResponse やスクリプトで隠してください。

hidden.Add() で渡した値も、初期ロードのときだけ hidden 要素として出力されます(HtmlTemplates.cs)。自動ポストバックの応答では更新されないので、判定結果の受け渡しには使えません。

本体を改修して自動ポストバックでも Hide を反映させる案は 自動ポストバックでのセクション表示切り替え(設計) にまとめています。

自動ポストバックで制御する ​

自動ポストバックに関わるため、サーバースクリプトで実装します。context.AddResponse でブラウザ側の要素を直接操作します。

セクションの ID ​

この方法では、見出しを追加したときに付与される ID を使います。ID は見出しの詳細設定モーダルで確認できます。

見出しの詳細設定ダイアログに表示される ID

閉じる ​

js
//Cssを使う方法
context.AddResponse("Css", "#SectionFields1", '{"Name":"display","Value":"none"}');
//Toggleを使う方法
context.AddResponse("Toggle", "#SectionFields1", "0");

開く ​

js
//Cssを使う方法
context.AddResponse("Css", "#SectionFields1", '{"Name":"display","Value":""}');
//Toggleを使う方法
context.AddResponse("Toggle", "#SectionFields1", "1");

第 2 引数の 1 の部分は実際の ID に置き換えてください。

表示順から ID を取得する ​

siteSettings.Sections と組み合わせれば、画面の表示順から ID を取得できます。たとえば 1 番目のセクションの ID は siteSettings.Sections[0].Id です。

js
context.AddResponse("Toggle", `#SectionFields${siteSettings.Sections[0].Id}`, "1");

「セクションの折りたたみを許可」との関係 ​

「セクションの折りたたみを許可」は、見出しをクリックする手動操作についての設定です。この方法は許可・不許可のどちらでも使えます。ユーザーに手動で開閉させたくない場合は、不許可のまま使うこともできます。

スクリプトで制御する(自動ポストバック後) ​

判定を画面の値だけで行えるなら、サーバースクリプトを使わずにスクリプト(サイトの「スクリプト」や拡張スクリプト)で開閉することもできます。

自動ポストバックは $p.controlAutoPostBack が URL に control-auto-postback=1 を付けて送ります(_controllevents.js)。$p.ajax は応答を画面に反映したあとで ajax_after_done イベントを呼び、引数には url・data・json などを持つオブジェクトを渡します(_ajax.js、_event.js)。url に control-auto-postback が含まれるかで自動ポストバックを見分けます。

js
$p.events.ajax_after_done = function (args) {
    if (!args || !args.url || args.url.indexOf('control-auto-postback') === -1) return;
    // 分類A が「非表示」のとき、セクション 1 を隠す
    var hide = $p.getControl('ClassA').val() === '非表示';
    $('#SectionFields1Container').toggle(!hide);
};
  • #SectionFields{ID}Container は見出しと中身を含むセクション全体、#SectionFields{ID} は中身だけの要素です(IssueUtilities.cs)。
  • EditorFields の応答には on_editor_load を呼ぶ処理がないので、自動ポストバックのあとに on_editor_load は動きません。初期表示でも同じ判定をしたい場合は、on_editor_load にも同じ処理を書きます。

関連ページ ​

変更履歴

第6版「セクション(見出し)の制御」にスクリーンショットを追加
第5版サーバースクリプトの仕組み・項目の変更可否・拡張サーバースクリプトの解説と、関連する改修・設計メモを追加
第4版本文から元記事や以前の版への言及を除き、正しい動作だけを書く形に整理
第3版「サーバースクリプト」を 1.5.8.1 のソースで検証して修正
第2版記事のファイル名に並び順の番号を付け、元記事リンクを frontmatter の sources に移行
第1版「サーバースクリプト」セクションの記事を追加