[Wagby EE Tips #2] 日付時刻型項目の範囲検索におけるスクリプトを利用した時刻の自動設定 

# はじめに
[Wagby EE](https://wagby.com/ee/index.html) は、(株)ジャスミンソフトが提供する国産のローコード開発プラットフォームです。

今回は、日付時刻型項目の検索に関するTipsを紹介します。

# 実現したいこと
* 日付時刻型項目を範囲を指定して検索する際、終了部に固定した時刻 11:59:59 を自動的に付与して検索したい

# 背景
日付時刻型の項目を検索画面で入力する場合、日付を設定すると以下のキャプチャのように終了部の時刻には「23:59:59」が初期値として自動的に設定されます(※)。本記事では、終了日の時刻に他の時刻を自動的に設定したい場合の実装方法について紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/fe84d718-17b4-d6bd-2f43-f94064d7f8db.png)

(※) 23:59:59 の自動補完は R9.0.3 ([ENH1236101](https://wagby.com/changelog/changelog_r9_0_3.html))にて対応されたものです。R9.0.2 以前で、終了部の時刻に 23:59:59 を設定したい場合も本記事の内容で対応することができます。

# 実装
## 実装内容
**以下の2箇所でスクリプト(サーバサイドJavaScript)を作成します。**
1. 検索する時刻を上書きする
　→ スクリプト「ヘルパ＞検索(前処理)」 を作成
1. 検索実行後、画面に表示される検索条件の値を設定する
　→ スクリプト「コントローラ＞一覧＞検索(検索条件保持)」 を作成

今回はスクリプトの作成のみの対応となりますので、**ビルドは必要ありません**。

## 実装対象項目
下図は本記事で利用する「システム利用記録」モデルです。
今回は項目「利用時刻」(項目ID： usage_time)の値をスクリプトで加工します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/76c0f76a-162c-ffc7-bfe6-b37af95dba5c.png)

システム利用記録モデルに登録されている全件データは以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/104c2dba-15df-418d-7812-615d95f9bbe5.png)


## 1. 検索する時刻を上書きする
Wagby Designer にてモデル「システム利用記録」の「画面＞スクリプト」タブを選択し、「ヘルパ＞検索(前処理)」 を選択した後、以下のようにスクリプトを記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/69db7d8c-ca6b-13b1-ed98-1ee79ba28d53.png)
``` javascript:「ヘルパ＞検索(前処理)」スクリプト
// 終了部に値が設定されているときのみ処理する
if(usage_history_c.usageTime2jshparam !== null){
    // 検索条件(終了部)から日付を取得する
    var date = ExcelFunction.TODATE(usage_history_c.usageTime2jshparam);

    // 時刻を 11:59:59 に設定する
    usage_history_c.usageTime2jshparam = ExcelFunction.DATETIMEVALUE(date + " 11:59:59");
    // stdout.println(usage_history_c); /* デバッグ出力用 */
}
```

■補足1 
ユーザーが入力した日付時刻型項目「xxx」の終了部の値は、接尾語「2jshparam」を追加した変数名「xxx2jshparam」で取得できます。今回の対象項目のIDは「usage_time」であり、スクリプト内での表記は[キャメル記法](https://wagby.com/wdn9/operation-script-helcon.html#item-1-5)に従うため変数名は **usageTime2jshparam** となります。

■補足2
接尾語 "_c" はコンディションモデルを意味し、ユーザが入力した検索条件の値を保持します。

■補足3
コメントアウトされている行のコードを有効にすると Tomcat の標準出力に値を出力できるため、スクリプトのデバッグ時に役立ちます。

## 2.検索実行後、画面に表示される検索条件の値を設定する
前項目の対応で範囲検索の終了時刻が 11:59:59 で検索されるようになります。
しかし、検索画面の表示は「23:59:59」のままとなっています。
本項目は、この表示を 11:59:59 となるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/6c0143e5-941b-d113-bc6b-d118a68e3074.png)

Wagby Designer にてモデル「システム利用記録」の「画面＞スクリプト」タブを選択し、「コントローラ＞一覧＞検索(検索条件保持)」 を選択した後、以下のようにスクリプトを記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/0f57770f-3557-6c0a-7cef-b4773bbec3e4.png)
``` javascript:「コントローラ＞一覧＞検索(検索条件保持)」スクリプト (R9.0.0 以降)
var value = ExcelFunction.DATETIMEVALUE(usage_history_cp.usageTime2jshparam.rawvalue);
var date = ExcelFunction.TODATE(value);

usage_history_cp.usageTime2jshparam.rawvalue = ExcelFunction.DATETIMEVALUE(date + " 11:59:59");
// stdout.println(usage_history_cp); /* デバッグ出力用 */
```

■補足1
接尾語 "_cp" はコンディションのプレゼンテーションモデルを意味し、検索時に画面で表示される値を保持します。このモデルの値は全て文字列型であるため、DATETIMEVALUE関数で日付時刻型に変換してから操作を行います。

■補足2
最後の処理で rawvalue 属性に値をセットしていますが、これは R9.0.0 以降の記述となります。
それより前のバージョンでは、下記のように rawvalue 属性ではなく content 属性に値をセットしてください。
``` javascript:R9.0.0 より前のバージョンでのスクリプト
// rawvalue から content に変更(その1)
var value = ExcelFunction.DATETIMEVALUE(usage_history_cp.usageTime2jshparam.content);
var date = ExcelFunction.TODATE(value);

// rawvalue から content に変更(その2)
usage_history_cp.usageTime2jshparam.content = ExcelFunction.DATETIMEVALUE(date + " 11:59:59");
```
## 動作確認
1. 初期画面を表示します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/42112935-096c-2bca-f3e2-d7ec5f2d1b79.png)

1. 終了部に日付を設定します(時刻は 23:59:59 に自動設定されます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/ef0d7de7-c060-464c-d196-f8b570a7f85b.png)

1. 「検索の実行」をクリックすると、終了部の時刻が 11:59:59 で検索されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588669/b73e7721-fdda-a201-993e-1410446ce9dc.png)
 

# さいごに
本記事では、日付時刻型項目の範囲検索時に固定の時間を設定する方法について紹介しました。

Wagby EE では基本的にコードを記述する必要はありませんが、本記事のようにスクリプトを作成することで複雑な処理を行うことができます。これがローコード開発の強みと言えます。ただし、**スクリプトについては実装者が動作確認を行う必要がある**点にご留意ください。

また、「2.検索実行後に表示される検索条件の値を設定する」でも触れていますが、バージョンによって仕様が変更されることがあります。そのため、Wagby EE のバージョンのアップグレードを実施する場合は[更新履歴](https://wagby.com/changelog/index.html)で変更内容を確認し、必要に応じてスクリプトの動作確認を行ってください。