WaveMaker: REST API のPOSTリクエストを送る方法


【実現したい内容】

ローコードウェブアプリケーション構築サービスWaveMakerでPOST リクエストを送り、それをユーザー画面に反映させる方法

今記事では、REST API のPOSTリクエストを送る方法を記述しますので、それに伴って使用するweb service やVariable についてもっと詳しく知りたい方は別記事に詳細が書いてありますので、そちらを御覧ください。

結論

  1. Rest Service(API) を登録する。
  2. UI画面で入力フォームを制作する。
  3. 登録したRest Service のVariable を作る。
  4. UI画面とつなげる。
  5. プレビュー画面で確認する。

 

実現方法

  1. Rest Service を登録する。

まず、Post リクエストをするにあたってのweb Service 登録ページにてAPI を登録していきたいと思います。リクエストメソッドのPOSTを選択してBody Paramsにリクエストを送るJsonを記載します。その後右にあるTestボタンを押して、レスポンスに結果が返ってくることが確認できたらweb Service の登録完了です。





入力例:

{"name": "test-wavemaker"}

2.UI画面で入力フォームを制作する。

Web Service が登録できましたら、 UI画面ににてbutton(ボタン)とText(テキスト)ウェジェットをドラッグし、Caption(見出し)の値とテキスト入力欄名(Name)の値をそれぞれ、任意の名前に変えます。

LabelのCaptionに「テストインプット」、テキスト入力欄名を「test_text」と変更してあげます。

また、buttonのCaptionの値を「登録」としておきます。

3.登録したRest Service のVariable を作る

UIに入力フォームが作成できましたら、Variableをの設定を行います。Variableを使うことによって、先ほど登録した、Web ServiceとUIのテキスト入力値をつなげることができます。登録したWeb Serviceを使い今回はcreate_projというVariableを生成します。(Variable詳しい設定の仕方はこちら)

生成後、Variable編集画面ページを開くとDataタブにRequestBodyが表示されているので、右のチェーンマークをクリックして設定ページを開きます。

  1. UI画面とつなげる。

設定ページの左枠に動的に変えたい値を選択できますので今回はnameを選択し、先程UIページで変更したtest_textの中の<>datavalueを選択しBindをクリックします。そうすることでUIとweb serviceのつなぎこみができます。

また、ButtonウェジェットのOn Click時(クリックしたとき)にcreate_projが実行されるように指定してあげます。

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

最後に実際にPOSTリクエストが実行されているかを、プレビュー画面で確認してあげて、期待値が返ってきたら完成です。

今回のPOSTリクエストの基本動作のご紹介は以上なります。

関連記事