Skip to content

ビューごとのスタイルをサーバースクリプトで指定する ​

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

サーバースクリプトで行やセルに 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)にビュー全体の値を設定する形にします。

改修箇所 ​

#ファイル内容
1Libraries/ServerScripts/ServerScriptModelCalendar.cs など(新規)ビューごとのクラス。ServerScriptModelColumn と同じく変更フラグを持たせる
2Libraries/ServerScripts/ServerScriptModel.cs新しいクラスのフィールドを足す
3Libraries/ServerScripts/ServerScriptUtilities.csExecute で AddHostObject("calendar", ...) などを足し、SetValues・SetRow で ServerScriptModelRow に値を移す
4Libraries/ViewModes/CalendarElement.cs・FullCalendarElement.cs・CrosstabElement.cs・GanttElement.cs・KambanElement.csCSS クラスのプロパティを足す
5Libraries/HtmlParts/HtmlCalendar.cs・HtmlKamban.cs・HtmlGantt.cs・HtmlCrosstab.cs要素を作るときに SetByBeforeOpeningRowServerScript を呼び、CSS クラスを出力する

考慮すること ​

  • 処理時間: アイテムごとに行表示の前を呼ぶと、表示する件数だけサーバースクリプトが動きます。一覧と同じ性質ですが、件数の多いカレンダーでは遅くなります。
  • FullCalendar: 標準以外のカレンダー表示では要素を JSON(FullCalendarElement)でブラウザに送るので、CSS クラスを JSON に入れ、FullCalendar の classNames に渡す必要があります。
  • ガントチャート・時系列チャート: ブラウザ側の JavaScript で描いているので、サーバーから送る JSON にスタイルの情報を入れ、描画側で使う改修も要ります。
  • 互換性: 新しいオブジェクトを足すだけなので、既存のスクリプトには影響しません。設定しなければ今までどおりの表示です。

関連ページ ​

変更履歴

第1版サーバースクリプトの仕組み・項目の変更可否・拡張サーバースクリプトの解説と、関連する改修・設計メモを追加