WaveMaker: カレンダーウィジェットで、イベントの詳細を表示する方法

Bryan Kitakata
8 31, 2021

実現したいこと

ローコードSaaSプラットフォームのWaveMakerにあるカレンダーウィジェットを使ってイベントの詳細を表示する方法についてまとめていきます。

今回の記事の完成例：

前提条件：

今回の記事ではカレンダーに表示されているevent(予定)の詳細を表示することをメインに書いていきますので、既にevent(予定)が画面に表示されている前提で進めていきます。カレンダーに予定の表示の仕方について詳しく知りたい方は以下にオフィシャルドキュメントを載せておきますのでそちらを御覧ください。

結論

  1. model variable の作成
  2. カレンダーにある「On Event Click」の設定をJavaScriptに指定する
  3. イベントクリック時のModelの値をJavaScriptで設定する。
  4. Model と画面をつなげる
  5. プレビュー画面にて動作を確認する

実現方法

今回の作業の流れとして、カレンダーにあるイベントを選択したときにそのデータをmodelに一時的に渡して、その渡されたデータを他のウェジェットに表示するという工程になります。


１．Model variable の作成

ですので、まずはじめに渡されたデータを保管する場所をModel variable を使って作っていきます。画面上部にあるVariable設定画面から新しいvariableとして、Modelを選択します。

modelの設定画面にてNameとTypeを変更してあげます。今回はNameにeventDataとtypeにはEntryと選択してあげます。

最後にJsonの記入欄には表示させたいデータのプロパティの名前を以下のように指定してあげて、DoneのボタンをクリックするとModelの設定が完了です。

制作した、Modelは画面左のVariableタブに表示されているので、編集したいときはここをクリックして上げると編集出来ます。

2.カレンダーにある「On Event Click」の設定をJavaScriptに指定する

modelが作成できましたら、イベントをクリックしたときにデータがカレンダーから渡せるように設定していきます。UI編集画面に行きカレンダーの設定画面にある。「on event Click」の値をJavaScriptと選択します。

３．イベントクリック時のModelの値をJavaScriptで設定する。

「on event Click」の値をJavaScriptに設定しましたら、Scriptタブに以下のようなメソッドが表示されるとおもいます。

このfunctionの引数の$dataの中にクリックしたイベントのデータが入って来ます。登録したmodelはPage.Variables.＜modelのName＞.dataSet.＜プロパティ名＞で指定することができます。

例えば、model名eventDataのtitle の値を指定したい場合はPage.Variables.eventData.dataSet.titleで指定することが出来ます。

これを使い以下のようにイベントクリック時のデータを指定したModelに値を代入してあげます。今回はタイトルだけでなく、開始時間、終了時間、説明欄を表示させたいのでそれぞれ代入してあげます

参考例として、今回は以下のようなコードとしました。

var DialogService = App.getDependency("DialogService");
Page.calendar1Eventclick = function($event, $data, $view) {
    Page.Variables.eventData.dataSet.title = $data.title;
    Page.Variables.eventData.dataSet.start = new Date($data.start._i);
    Page.Variables.eventData.dataSet.end = new Date($data.end._i);
    Page.Variables.eventData.dataSet.description = $data.description;
    DialogService.open('dialog6', Page)
};

補足：DialogService.open('dialog6', Page)の'dialog6'には表示するダイアログの名前を入力します。そうするとイベントをクリックすると同時にダイアログが開く設定をしてあげることが出来ます。

４．Model と画面をつなげる

今回は以下の様なダイアログを用意してあげて、イベントクリック時に、タイトル、開始時間、終了時間、説明欄がダイアログに表示できるようにUIを作ってあげます。

表示させるにはmodelの値とUIをそれぞれ紐付けしてあげる必要があります。

以下の写真のようにウェジェットにあるValueの設定欄に表示させたいmodelのデータをそれぞれ選択します。

５．プレビュー画面にて動作を確認する

設定が完了しましたら、プレビュー画面にて実際に表示されるのを確認出来ましたら完成です。

関連記事