ブログ

2024/03/06
【プリザンター】 第237回)サーバスクリプトで条件に一致するレコードを装飾する方法

サーバスクリプトで一覧画面をカスタマイズ

こんにちは、シーイーシーカスタマサービスの森山です。

過去の記事にて、「一覧で条件にあった行を色変更」についてご紹介していますが、利用シーンによっては、設定値を下回った「在庫数」、完了の「日付」など、「行とは別の色でセルの色を変更して目立たせたい」という場合があります。

そこで今回は、過去の記事を応用して「一覧で条件に一致するレコード(行)と、その中の対象セルの色を変更」する方法についてご紹介します。

色の設定には「スタイル」を使用

今回は以下の記事をアレンジして、ログインユーザが担当者のレコードだけにフィルタし、状況が「完了」であれば行背景を、状況が「未完了」で完了の日付が過去日であれば行とセルの背景色を変更します。
この設定を行うことで、自分が担当するレコードだけを確認することができます。

【プリザンター】 第97回)サーバスクリプト#6 一覧で条件にあった行を色変更
【プリザンター】 第123回)サーバスクリプトでビューのフィルタリング設定

まず、今回紹介する内容を設定するテーブルを「期限付きテーブル」で用意します。
テーブルの一覧画面には「状況」「担当者」「完了」を表示します。

次に、色を変更するための「スタイル」を設定します。出力先は「一覧」を指定します。

/* 未完了+過去日のセル */
.unfinished_past_cell {
background-color: red;
color: white;
}
/* 未完了+過去日の行 */
.unfinished_past_row {
background-color: yellow;
}
/* 完了 */
.complete {
background-color: grey;
}


次に、サーバスクリプトを設定します。今回の内容は "一覧画面の表示" を設定しているので、条件は「行表示の前」を指定します。
try{

// 状況が「完了以外」、且つ、日付が過去日であれば、スタイルを適用
if (model.Status != 900 && model.CompletionTime < utilities.Today()) {
columns.CompletionTime.ExtendedCellCss = 'unfinished_past_cell';
model.ExtendedRowCss = 'unfinished_past_row';
}

// 状況が「完了」であれば、スタイルを適用
if (model.Status === 900) {
model.ExtendedRowCss = 'complete';
}

} catch(e) {
context.Log(e.stack);
}

最後に、ログインユーザが担当者のレコードだけにフィルタする設定を行います。また、見やすくするために完了の日付で昇順にソートを設定します。
先程のコードとは条件が異なりますので、新規作成にて下記コードを設定してください。
一覧画面のソート、フィルタを設定しますので、ここでは条件に「ビュー処理時」を指定します。
// 日付順にソート
view.Sorters.CompletionTime = 'asc';
// ログインユーザが「担当者」のレコードをフィルタ
view.Filters.Owner = context.UserId;


上記設定を行ったら、一覧画面を見てみましょう。下の画像は、2024/3/1に実行した時のものになります。
設定前は全てのレコードが表示され完了は日付順となっていませんが、設定後は担当者がログインユーザでフィルタされ、完了が日付順にソートされていることが分かります。
また、スクリプトにて設定した条件に合わせて、レコードにスタイルが適用されていることを確認できます。

まとめ

いかがでしたか?

今回ご紹介したコードに記載している「ExtendedCellCss」「ExtendedRowCss」を利用すると、項目自体にCSSクラス名を設定することなく、「ログインユーザ」や「レコードの内容」などが条件に一致する場合にCSSクラス名を設定することが可能です。
「ログインユーザ」や「レコードの内容」などによる制御が必要な場合にこれらをお使いいただくことで、ご希望動作の実装が実現するでしょう。

弊社ではスタイル・スクリプトサンプル集、プリザンター逆引き辞典だけでなく、運用ノウハウ集の販売もございます。
また、 プリザンターからのExcel帳票出力・PDF帳票出力の支援パック販売 も行っております。
プリザンター導入の支援や、スクリプト開発などの支援も行っておりますので、まずは気軽にご相談ください。
※ご相談の内容によっては有料となる場合がございます。予めご了承ください。
☆☆☆
ブログ内容への質問や追加説明をご希望の方は【 問い合わせフォーム 】からお気軽にお問い合わせください
☆☆☆

PAGE TOP