ビューごとのスタイルをサーバースクリプトで指定する
サーバースクリプトで行やセルに CSS クラスを付ける仕組み(columns.項目名.ExtendedCellCss、model.ExtendedRowCss)は、1.5.8.1 では一覧とリンクテーブルでしか効きません。このページは、カレンダー・クロス集計・ガントチャート・時系列チャート・カンバンでもサーバースクリプトからスタイルを指定できるようにする本体改修の設計メモで、本体の標準機能ではありません。
前提にした現行実装
1.5.8.1 のソースで確かめた内容です。詳しくは columns で変更できるプロパティ を参照してください。
- 一覧は行ごとに
SetByBeforeOpeningRowServerScriptを呼び、戻り値(ServerScriptModelRow)のExtendedRowCssをtrの CSS クラスに、項目ごとのExtendedCellCssをtdの CSS クラスに足している(HtmlGrids.cs#L346-L379)。リンクテーブルも行ごとに呼んでいる(HtmlLinks.cs#L777-L789)。 HtmlCalendar.cs・HtmlCrosstab.cs・HtmlGantt.cs・HtmlTimeSeries.cs・HtmlKamban.csはSetByBeforeOpeningRowServerScriptもServerScriptModelRowも参照していない。- 各ビューの要素クラス(
CalendarElement・CrosstabElement・GanttElement・KambanElementなど、ViewModes)に CSS クラスを持つプロパティがない。 - サーバースクリプトに登録されるオブジェクトに、ビュー専用のものはない(ServerScriptUtilities.cs#L1221-L1253)。
図を読み込み中…
方針
columns と同じ形で、ビューごとのホストオブジェクトを足します。
| オブジェクト | 対象 | 単位 | 設定するもの(案) |
|---|---|---|---|
calendar | カレンダー | アイテムごと | ExtendedItemCss(CSS クラス)、Hide |
kamban | カンバン | カードごと | ExtendedCardCss、Hide |
gantt | ガントチャート | バーごと | ExtendedBarCss、BarColor |
crosstab | クロス集計 | ビュー全体 | ExtendedCellCss、ExtendedRowCss |
timeSeries | 時系列チャート | ビュー全体 | SeriesColor |
js
// 行表示の前(カレンダー・カンバン・ガントでも呼ぶようにした場合)
if (model.Status === 100) {
calendar.ExtendedItemCss = 'priority-high';
kamban.ExtendedCardCss = 'urgent';
gantt.ExtendedBarCss = 'delayed';
}アイテムを 1 件ずつ描くビュー(カレンダー・カンバン・ガントチャート)は、一覧と同じく行表示の前(BeforeOpeningRow)をアイテムごとに呼びます。集計結果を描くビュー(クロス集計・時系列チャート)は行単位の実行が合わないので、画面表示の前(BeforeOpeningPage)にビュー全体の値を設定する形にします。
改修箇所
| # | ファイル | 内容 |
|---|---|---|
| 1 | Libraries/ServerScripts/ServerScriptModelCalendar.cs など(新規) | ビューごとのクラス。ServerScriptModelColumn と同じく変更フラグを持たせる |
| 2 | Libraries/ServerScripts/ServerScriptModel.cs | 新しいクラスのフィールドを足す |
| 3 | Libraries/ServerScripts/ServerScriptUtilities.cs | Execute で AddHostObject("calendar", ...) などを足し、SetValues・SetRow で ServerScriptModelRow に値を移す |
| 4 | Libraries/ViewModes/CalendarElement.cs・FullCalendarElement.cs・CrosstabElement.cs・GanttElement.cs・KambanElement.cs | CSS クラスのプロパティを足す |
| 5 | Libraries/HtmlParts/HtmlCalendar.cs・HtmlKamban.cs・HtmlGantt.cs・HtmlCrosstab.cs | 要素を作るときに SetByBeforeOpeningRowServerScript を呼び、CSS クラスを出力する |
考慮すること
- 処理時間: アイテムごとに行表示の前を呼ぶと、表示する件数だけサーバースクリプトが動きます。一覧と同じ性質ですが、件数の多いカレンダーでは遅くなります。
- FullCalendar: 標準以外のカレンダー表示では要素を JSON(
FullCalendarElement)でブラウザに送るので、CSS クラスを JSON に入れ、FullCalendar のclassNamesに渡す必要があります。 - ガントチャート・時系列チャート: ブラウザ側の JavaScript で描いているので、サーバーから送る JSON にスタイルの情報を入れ、描画側で使う改修も要ります。
- 互換性: 新しいオブジェクトを足すだけなので、既存のスクリプトには影響しません。設定しなければ今までどおりの表示です。