wavenakerでテーブルの行の詳細を他のウェジェットに表示させて編集を反映させる方法


実現したいこと

ローコードSaaSプラットフォームのWaveMaker上で、テーブルの行の詳細を他のウェジェットに表示させて、編集する方法

今回の記事の完成例:

前提条件

今回の記事ではテーブルの行の詳細を他のウェジェットに表示、編集方法をメインに書いていきますので、Rest APIのリクエストを送信する方法やVariableについての詳しい説明を控えさせておきます。既に、テーブルのにデータを表示、更新するAPI とそれに基づくVariableが登録されている前提で記事を書いていきます。そちらの方の詳細を知りたい方は別記事で詳しく説明しておりますので、以下に載せておきます。


結論

  • Rest APIの登録
  • modelの作成
  • テーブルクリック時のModelの値をJavaScriptで設定する
  • 更新画面の作成(UI)
  • 更新画面とmodelの値をつなげて表示させる
  • 表示された値に変更を加えるとModelに上書きされるようにJavaScriptで設定する
  • プレビュー画面で確認する

実現方法

今回の作業工程として、主に二段階に別れます。

  • テーブルに表示させたデータをクリック(選択)と一時的にModelにデータを渡し、そのデータを他のウェジェットに表示する(part 1)
  • ウェジェットに表示されたデータに変更を加えるとModelの値が上書きされ、その値を使って更新する(part2)

今回キーとなってくるのがModel Variableという機能ですが、このModelというのは一時的にデータを格納する事ができる機能です。

1.Rest APIの登録(part1)

詳しい説明は控えさせていただきますが、まず初めに、テーブルにデータを表示、更新できるAPIとそれに基づくVariable を登録して、テーブルにデータが表示されるように画面を用意します。

2.model Variableの作成

次にテーブルの行をクリックしたときにのデータを一時的に格納するModel Variableを作成します。

Modelを作成するときのTypeをEntryと選択し、Jsonの記入欄には表示、編集させたいデータのプロパティの名前を指定してあげます。DoneのボタンをクリックするとModelの設定が完了です。後からModel編集したいときははVariable設定画面でから編集することが出来ます。

3.テーブルクリック時のModelの値をJavaScriptで設定する

Modelが作成出来ましたら、テーブルの行をクリックしたときにデータがmodelに渡せるように設定していきます。テーブルの設定画面にある「On Row Select」(行が選択された時)の値をJavaScriptと設定していきます。

そうしますと、、Scriptタブに以下のようなメソッドが表示されるとおもいますのでここにJavaScriptを書いていきます。

テーブルの場合はこのrowという引数に選択した行のデータが入ってきます。Modelのプロパティの指定方法としてPage.Variables.<modelのName>.dataSet.<プロパティ名>で指定出来ます。例えば、今回はModel名をtest_Modelと命名しましたので、test_modelのsummaryのプロパティを指定した場合は、Page.Variables.test_Model.dataSet.summaryとする事がで指定できます。

4.更新画面の作成(UI)(part 2)

ここからはmodelに格納されたデータを更新画面に表示、変更する設定を行います。今回はId、要件、担当者の3つを表示させたいので、テキストウェジェットを3つ用意します。それぞれのDefault Value にはVariableタブのtest_ModelにあるdataSetの中にある値を選択してそれぞれ各ウェジェットにBindします。

そうしますと、テーブルから渡された値を表示することが出来るようになります。

5. 表示された値に変更を加えるとModelに上書きされるようにJavaScriptで設定する

クリックしたデータが編集画面に表示されるのを確認しましたら、変更を加えたときにModelが上書きされるようにJavaScriptで設定していきます。まず初めにテキストウェジェットの設定画面での「change」の値を選択してます。

そうしますと、先程テーブルのときと同じようにScriptタグに以下のようなメソッドが表示されると思います。

テキストウェジェットの場合はこのnewValに編集後の値が入っていますので、Page.Variables.test_Model.dataSet.summary=newValと書くことで、modelの値を上書きする事ができます。

この工程をそれぞれのテキストウェジェットで設定する必要があります。

詳しい説明は省きますが、このModelの値を更新APIにつなげて、クリックしたときに更新APIにリクエストを投げるように設定しましたら完成です。

Modelの値をAPIのつなげ方に関しては詳しい設定方法はこちらを御覧ください。

6.プレビュー画面で確認する

最後にプレビュー画面で実際にデータが更新されているのを確認したら完成です。