intra-mart Accel Platform ローコード開発チュートリアルガイド 第9版 2022-12-21

4.4.5. 回答画面の作成

アンケートの回答を行う画面を作成します。
アンケート回答画面はアンケートIDを受け取りアンケート情報と設問情報を取得して画面に表示します。
アンケートIDが指定されていない、アンケートIDが誤っていてアンケートが取得できない場合などはエラー画面を表示します。
アプリケーションの全体図だと、以下の色が塗られた箇所が対象です。
../../../_images/enquete_overall_screen_answer.png

このページの手順については、以下で動画による解説も行っています。併せてご利用ください。

4.4.5.1. 画面情報の設定

作成するアプリケーションに紐づいたアンケート回答画面を作成します。

4.4.5.1.1. 画面コンテンツの基本情報の設定

アプリケーション管理の「画面タブ」 - 「画面リソースを追加」 - 「画面を新規作成」 - 「画面コンテンツ」を選択し、画面コンテンツ作成画面を表示します。
../../../_images/screen_init.png
画面コンテンツのカテゴリの検索ボタンをクリックし「業務テンプレートから作成」を設定します。
コンテンツIDに「tutorial_enquete_answer」と設定します。
コンテンツ種別欄の「Bulma」を選択します。
コンテンツ名に「【チュートリアル】アンケート回答画面」と入力し登録ボタンをクリックして登録します。
../../../_images/screen_answer_info.png
アプリケーション管理画面に戻り、登録した画面コンテンツが画面一覧に表示されました。

4.4.5.2. 画面コンテンツの作成

アプリケーション管理の「画面タブ」から「【チュートリアル】アンケート回答画面」を選択し、コンテンツ画面を開きます。
../../../_images/screen_answer_select.png
コンテンツ画面のデザイン編集画面をクリックし、デザイナ画面を開きます。
../../../_images/screen_answer_contents.png

4.4.5.2.1. 変数の設定

まずは、画面で利用する変数を作成します。
最初に、画面に表示する設問情報を格納する変数を作成します。アンケート情報取得処理の返却値を格納し、画面に表示するために利用します。
画面右側の「変数」タブを選択します。
../../../_images/screen_variable_init.png

変数一覧の「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
../../../_images/screen_variable_button.png

変数エディタのキー名に「responseData」と入力し、値の型を「マップ」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variable_add_response_data.png

作成した「$variable > responseData」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
../../../_images/screen_variable_button2.png

変数エディタのキー名に「records」と入力し、値の型を「マップ」に、配列の次元数を「1次元配列」、「配列の要素数」を「1」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variable_add_response_data2.png

作成した「$variable > responseData > records > 0」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「question」と入力し、値の型を「文字列」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variable_add_response_data3.png

同様に「$variable > responseData > records > 0」の配下に「right_scale」と「left_scale」を追加します。どちらの変数も値の型を「文字列」としてください。
../../../_images/screen_variables.png

次に、アンケートの基本情報を格納する変数を作成します。
作成した「$variable > responseData」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「enqueteTitle」と入力し、値の型を「文字列」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variables2.png

同様に「$variable > responseData」の配下に「enqueteOverview」を追加します。変数も値の型は「文字列」としてください。
../../../_images/screen_variables3.png

変数はJSON入力で以下を記載しても設定できます。
"responseData": {
  "records": [
    {
      "question": "",
      "right_scale": "",
      "left_scale": ""
    }
  ],
  "enqueteTitle": "",
  "enqueteOverview": ""
}
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型に誤りが無いか注意してください。

次に、アンケート情報取得処理に対して送信する値を格納する変数を作成します。
「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「entity」と入力し、値の型を「マップ」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variables4.png

作成した「$variable > entity」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「enqueteId」と入力し、値の型を「文字列」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variables5.png

変数はJSON入力で以下を記載しても設定できます。
"entity": {
  "enqueteId": ""
}
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型に誤りが無いか注意してください。

次に、アンケート回答登録処理に対して送信するアンケートの回答内容を格納する変数を作成します。
「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「answersData」と入力し、値の型を「マップ」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variables6.png

作成した「$variable > answersData」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「enqueteId」と入力し、値の型を「文字列」に変更して「決定」ボタンをクリックします。
「$variable > answersData」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「answers」と入力し、値の型を「文字列」にして「決定」ボタンをクリックします。
../../../_images/screen_variables7.png

変数はJSON入力で以下を記載しても設定できます。
"answersData": {
  "enqueteId": "",
  "answers": []
}
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型に誤りが無いか注意してください。

エラー画面に表示するメッセージを格納する変数を作成します。
「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「errorMessage」と入力し、値の型を「文字列」に変更して「決定」ボタンをクリックします。
../../../_images/screen_variables8.png

変数はJSON入力で以下を記載しても設定できます。
"errorMessage": ""
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型に誤りが無いか注意してください。

初期表示時に設定される入力も設定します。
「変数」タブの「変数」を「入力」に変更します。
../../../_images/screen_select_input.png

「$input」を選択し、 bm_variable_create_new をクリックして入力エディタを表示します。
入力エディタのキー名に「enqueteId」と入力し、値の型を「文字列」に変更して「決定」ボタンをクリックします。
入力値はJSON入力で以下を記載しても設定できます。
"enqueteId": ""
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型に誤りが無いか注意してください。

変数設定の最後に、エラー発生時に表示するメッセージを「定数」で設定します。
「変数」タブの「変数」を「定数」に変更します。
../../../_images/screen_select_constants.png

まずは、アンケートIDが設定されなかった場合に表示するエラーメッセージを設定します。
「$constant」を選択し、 bm_variable_create_new をクリックして定数エディタを表示します。
定数エディタのキー名に「error_no_id」と入力し、値の型を「文字列」、代入値は固定文字列で「アンケートIDが設定されていません。」に設定して「決定」ボタンをクリックします。
続けて、存在しないアンケートIDが指定された場合に表示するエラーメッセージを設定します。
「$constant」を選択し、 bm_variable_create_new をクリックして定数エディタを表示します。
定数エディタのキー名に「error_enquete_missing」と入力し、値の型を「文字列」、代入値は固定文字列で「アンケートが存在しません。」に設定して「決定」ボタンをクリックします。
../../../_images/screen_set_constants.png

定数値もJSON入力で以下を記載して設定できます。
{
  "error_no_id": "アンケートIDが設定されていません。",
  "error_enquete_missing": "アンケートが存在しません。"
}
JSON入力する場合は、定数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型に誤りが無いか注意してください。

4.4.5.2.2. アンケート回答画面の作成

続けて、画面にアイテムを設置していきます。
まずは、回答画面の名称を変更します。
デザイン編集エディタをクリックし、画面右側の「コンテナページ」 - 「エレメント固有」 - 「name」に「question」と設定します。
../../../_images/screen_name_set.png

これで、タブの名称も「question」と変更されました。次に、画面にサイドメニューを表示するためにサイドメニューコンテナを配置します。
画面左側のパレットの「レイアウト」 - 「サイドメニューコンテナ」を選択し、画面に配置します。
../../../_images/screen_set_sidemenu.png

次に、アンケートのタイトルと詳細の表示領域を作成します。
画面左側のパレットの「レイアウト(Bulma)」 - 「ボックス」を選択し、先ほど配置した「サイドメニューコンテナ」の中に配置します。
../../../_images/screen_set_box.png

画面左側のパレットの「レイアウト(Bulma)」 - 「見出しレベル1」を選択し、先ほど配置した「ボックス」の中に配置します。
../../../_images/screen_set_title1.png

配置した「見出しレベル1」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」の「変数値」を設定し、 bm_search を選択します。
../../../_images/screen_set_title_value.png

「$variable > responseData > enqueteTitle」を選択し、「決定」ボタンをクリックして変数を設定します。
../../../_images/screen_variable_title_select.png

変数の設定は変数設定欄に直接以下のように入力してもかまいません。
「$variable.responseData.enqueteTitle」

続けて、アンケート概要の表示欄を作成します。画面左側のパレットの「レイアウト(Bulma)」 - 「見出しレベル5」を選択し、先ほど配置した「ボックス」の中に配置します。
../../../_images/screen_set_title5.png

配置した「見出しレベル5」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」を「変数値」に設定し、 bm_search から「$variable > responseData > enqueteOverview」を設定します。
../../../_images/screen_variable_subtitle_select.png

変数の設定は直接以下のように入力してもかまいません。
「$variable.responseData.enqueteOverview」

概要はサブタイトルとして表示するため、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「type」 を「subtitle」に設定します。
../../../_images/screen_set_subtitle.png

次に、設問の表示領域を作成します。
設問の表示領域はアンケートIDで取得した設問の配列くりかえすことによって表示します。
画面左側のパレットの「レイアウト(Bulma)」 - 「ボックス」を選択し、「サイドメニューコンテナ」の中に配置します。
画面左側のパレットの「繰り返し(Bulma)」 - 「カラム(繰り返し)」を選択し、先ほど配置した「ボックス」の中に配置します。
../../../_images/screen_set_repeat.png

配置した「カラム(繰り返し)」を選択します。
../../../_images/screen_select_repeat.png

「カラム(繰り返し)」 - 「エレメント固有」 - 「multiLine」を選択します。
../../../_images/screen_select_multiline.png

続いて、「カラムアイテム(繰り返し)」を選択します。
「カラムアイテム(繰り返し)」 - 「エレメント固有」 - 「list」 の bm_search から「$variable > responseData > records」を設定します。
../../../_images/screen_variable_repeat_select.png
「カラムアイテム(繰り返し)」 - 「エレメント固有」 - 「size」 に「full」を設定します。
「カラムアイテム(繰り返し)」 - 「エレメント固有」 - 「narrow」 に「narrow」を設定します。
../../../_images/screen_set_repeat_param.png

続けて、実際に回答内容を表示する領域を作成します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「水平フィールド」を選択し、先ほど配置した「カラム(繰り返し)」内の「カラムアイテム(繰り返し)」の中に配置します。
../../../_images/screen_select_field.png

画面左側のパレットの「フォーム部品(Bulma)」 - 「エレメント配置アイテム」を選択し、先ほど配置した「水平フィールド」内の「フィールドコンテンツ」の中に配置します。
../../../_images/screen_select_element.png

画面左側のパレットの「レイアウト(Bulma)」 - 「カラム」を選択し、先ほど配置した「エレメント配置アイテム」の中に配置します。
../../../_images/screen_select_column.png

次に、設問の選択肢を配置します。
画面左側のパレットの「フォーム部品」 - 「ラジオボタン」を選択し、先ほど配置した「カラム」の中心のカラムに配置します。
../../../_images/screen_select_radio.png

配置したラジオボタンの設定を行います。
配置した「ラジオボタン」をクリックし、画面右側の「プロパティ」タブの「ラジオボタン」 - 「エレメント固有」 - 「textContent」の値を削除します。
「プロパティ」タブの「ラジオボタン」 - 「エレメント固有」 - 「value」に「1」と設定します。
「プロパティ」タブの「ラジオボタン」 - 「余白」 - 「外余白(左)」に「2rem」と設定します。
「プロパティ」タブの「ラジオボタン」 - 「エレメント固有」 - 「selected」を「変数値」と設定し、 bm_search から「$variable > answersData > answers」を設定します。
設定した変数の最後に[$index]と入力し、「$variable.answersData.answers[$index]」とします。
../../../_images/screen_set_radio_param.png

「ラジオボタン」 - 「エレメント固有」 - 「selected」の変数の設定は直接以下のように入力してもかまいません。
「$variable.answersData.answers[$index]」

コラム

「繰り返し」のエレメントを利用する際は、配列の変数を利用し、配列の数だけエレメントが表示されます。
「繰り返し」のエレメントに配置した要素に対して変数を設定する場合、配列の添え字として「$index」を指定することによって、繰り返しに合わせて変数値が変更されます。
詳細については、以下のCookBookを参照してください。

設問は5スケールでの回答を想定しているため。作成したラジオボタンをコピーします。
作成したラジオボタンをクリックし、画面上部の bm_copy かキーボードのCtrl+Cでコピーします。
../../../_images/screen_element_copy.png

ラジオボタンを配置しているカラムアイテムをクリックし、画面上部の bm_paste かキーボードのCtrl+Vでラジオボタンが5つ並ぶまで貼り付けます。
../../../_images/screen_element_paste.png

5つ並んだラジオボタンを選択し、それぞれの「ラジオボタン」 - 「エレメント固有」 - 「value」が左から順番に「1」、「2」、「3」、「4」、「5」となるように修正します。
以下の画像は、2番目のラジオボタンを選択した場合の例です。
../../../_images/screen_radio_value.png

これで、設問ごとにどの選択肢を選んだかが$variable.answersData.answersに順番に入るようになりました。
次に設問内容を表示するラベルを配置します。
設問表示領域として配置した「水平フィールド」の左側にある「水平フィールドラベル」を選択します。
../../../_images/screen_select_field_label.png

画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」を変数値と設定し、 bm_search から「$variable > responseData > records[0] > question」を設定します。
../../../_images/screen_field_label_value.png

変数のrecords[0]をrecords[$index]に変更します。
../../../_images/screen_field_label_value_index.png

変数の設定は直接以下のように入力してもかまいません。
「$variable.responseData.records[$index].question」

これで、設問内容が表示されるようになりました。
次に、各設問項目の両端を設定します。
まずは、左側の項目を設定します。
画面左側のパレットの「汎用」 - 「ラベル」を選択し、「カラム」の左カラムに配置します。
../../../_images/screen_select_label.png

配置した「ラベル」をクリックし、画面右側の「プロパティ」タブ - 「ラベル」 - 「エレメント固有」 - 「textContent」を変数値と設定し、 bm_search から「$variable > responseData > records[0] > left_scale」を設定します。
../../../_images/screen_label_value.png

変数のrecords[0]をrecords[$index]に変更します。
../../../_images/screen_label_value_index.png

変数の設定は直接以下のように入力してもかまいません。
「$variable.responseData.records[$index].left_scale」

同じように、右側の項目を設定します。
画面右側のパレットの「汎用」 - 「ラベル」を選択し、「カラム」の右カラムに配置します。
../../../_images/screen_select_label_right.png
配置した「ラベル」をクリックし、画面右側の「プロパティ」タブ - 「ラベル」 - 「エレメント固有」 - 「textContent」を変数値と設定し、 bm_search から「$variable > responseData > records[0] > right_scale」を設定します。
変数のrecords[0]をrecords[$index]に変更します。
../../../_images/screen_field_label_value_index_right.png

変数の設定は直接以下のように入力してもかまいません。
「$variable.responseData.records[$index].right_scale」

これで、繰り返しで設問項目を表示する領域ができました。
最後に、回答を登録するボタンを配置します。
画面左側のパレットの「レイアウト(Bulma)」 - 「ボックス」を選択し、「サイドメニューコンテナ」の中の一番下に配置します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「ボタン」を選択し、先ほど配置した「ボックス」の中に配置します。
../../../_images/screen_select_button.png

配置した「ボタン」をクリックし、画面右側の「プロパティ」タブ - 「ボタン要素」 - 「エレメント固有」 - 「textContent」に「回答」と設定します。
../../../_images/screen_button_value.png

コラム

配置するアイテムが見つからない場合は、パレット上部にある「検索」を利用してください。
入力した項目に合わせたアイテムが絞り込まれて表示されます。

4.4.5.2.3. 見た目の調整

続けて、見た目の調整を行います。
左端のカラムアイテムを選択します。
「プロパティ」タブの「カラムアイテム」 - 「幅・高さ」 - 「横幅」に「20%」と設定します。
「横幅(最大)」、「横幅(最小)」にも「20%」と設定します。
同様の設定を右端のカラムアイテムにも行います。
次に、中心のカラムアイテムを選択します。
「プロパティ」タブの「カラムアイテム」 - 「幅・高さ」 - 「横幅」に「60%」と設定します。
設定が完了すると、以下のように表示領域が変更されます。
../../../_images/screen_column_size.png

続いて、登録ボタンの配置を変更します。
登録ボタンを配置している「ボックス」を選択します。
「プロパティ」タブの「ボックス」 - 「テキストスタイル」 - 「横揃え」に「center」と設定します。
../../../_images/screen_button_center.png

4.4.5.2.4. エラー画面の作成

アンケートIDが指定されなかった場合や、誤ったIDでアンケート情報が取得できなかった場合に表示するエラー画面を作成します。
画面上部の bm_add_screen をクリックし、「プロパティ」タブの「コンテナページ」 - 「エレメント固有」 - 「name」に「error」と設定します。
../../../_images/screen_add_screen.png

画面左側のパレットの「レイアウト」 - 「サイドメニューコンテナ」を選択し、画面に配置します。
アンケートのエラーメッセージの表示領域を作成します。
画面左側のパレットの「レイアウト(Bulma)」 - 「ヒーロー」を選択し、先ほど配置した「サイドメニューコンテナ」の中に配置します。
../../../_images/screen_set_hero.png

画面左側のパレットの「レイアウト(Bulma)」 - 「見出しレベル1」を選択し、先ほど配置した「ヒーロー」の中に配置します。
配置した「見出しレベル1」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」の「変数値」を設定し、 bm_search から「$variable > errorMessage」を設定します。
../../../_images/screen_error_value.png

変数の設定は直接以下のように入力してもかまいません。
「$variable.errorMessage」

4.4.5.2.5. 回答成功画面の作成

アンケートを回答した後に表示する画面を作成します。
画面上部の bm_add_screen をクリックし、「プロパティ」タブの「コンテナページ」 - 「エレメント固有」 - 「name」に「success」と設定します。
画面左側のパレットの「レイアウト」 - 「サイドメニューコンテナ」を選択し、画面に配置します。
次に、アンケートのタイトルと詳細の表示領域を作成します。
画面左側のパレットの「レイアウト(Bulma)」 - 「ヒーロー」を選択し、先ほど配置した「サイドメニューコンテナ」の中に配置します。
画面左側のパレットの「レイアウト(Bulma)」 - 「見出しレベル1」を選択し、先ほど配置した「ヒーロー」の中に配置します。
配置した「見出しレベル1」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」の「固定値」を設定し、「ご協力ありがとうございました。」と入力します。
../../../_images/screen_success.png

4.4.5.2.6. 初期表示アクションの設定

次に、画面で実行されるアクションを設定します。
アクションは初期表示時に実行されるアクションと、回答の登録時に実行されるアクションの2種類作成します。
まずは、初期表示のアクションから作成していきます。
画面右側の「アクション」タブを選択し、 bm_action_create_new をクリックしアクションエディタを表示します。
../../../_images/screen_add_action.png

アクションエディタ上部の名称を「新しいアクション #1」を「init」に変更します。
../../../_images/screen_action_editor.png

次に、設問を取得するアクションを作成します。
アクションエディタ左側の「アクション」タブから「標準」 - 「変数〇に〇を代入する」を選択し、「アクションが呼ばれたとき」に配置します。
../../../_images/screen_action_add_variable.png

配置したアクションの変数の bm_search から「変数 > $variable > entity > enqueteId」を選択します。
../../../_images/screen_action_select_value.png

代入値の「abc」を「${}」に変更し、 bm_search から「入力 > $input > enqueteId」を選択します。
../../../_images/screen_action_select_input.png

左側の「アクション」タブから「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング〇にリクエストを送信する」を選択し、先ほど配置した「変数〇に〇を代入する」の次に配置します。
../../../_images/screen_action_select_flow_task.png

配置した「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の bm_search をクリックし、フロールーティング定義検索ダイアログから「tutorial_enquete/question」を選択します。
../../../_images/screen_action_select_flow.png

設定した業務ロジックにアンケートIDを渡すために、リクエストパラメータの bm_search から「変数 > $variable > entity」を設定します。
業務ロジックからデータを受け取るために、レスポンスデータの bm_search から「変数 > $variable > responseData」を設定します。
../../../_images/screen_action_flow_param.png

ここまでで、アンケート情報を取得し画面に表示できるようになりました。一度、動作確認を行いましょう。
アクションエディタ下部の決定ボタンをクリックし、ここまで作成したアクション処理を登録します。
作成した「init」アクションを画面の初期表示時に呼び出す設定を行います。
画面上部の bm_container をクリックします。
../../../_images/screen_test_select_container.png

画面右側の「プロパティ」タブ - 「コンテナ」 - 「イベント」の「ページ読み込み時」に「init」アクションを設定します。
../../../_images/screen_test_select_init.png

次に、試験用のデータを設定するため、画面右側の「変数」タブを選択し「入力」を選択します。
「$input > enqueteId」の bm_variable_edit をクリックし、代入値の固定文字列に「tutorial_es_enquete」と設定します。
※概要で設定したサンプルデータです。サンプルデータが存在しない場合は、tutorial_enquete_question_appテーブルにデータを登録してください。
../../../_images/screen_test_input_value.png

入力値を登録したら、画面上部の bm_preview をクリックします。
../../../_images/screen_test_preview.png

プレビューダイアログが表示され、設問内容が表示されました。
../../../_images/screen_test.png

動作確認できたため、アクション設定に戻ります。
画面右側の「アクション」タブを選択し、「init」アクションを選択し、アクションエディタを表示します。
回答を入れる為の変数の配列を作成します。また、初期値として中心の3を選択されるようにします。
アクションエディタ左側の「アクション」タブから「標準」 - 「カスタムスクリプトを実行する」を選択し、「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の次に配置します。
../../../_images/screen_action_custom.png

配置した「カスタムスクリプトを実行する」の入力欄に以下のスクリプトを設定し、決定ボタンをクリックして初期表示時のアクション設定が完了です。
for(let i = 0; i < $variable.responseData.records.length; i++){
  $variable.answersData.answers.push(3);
}

4.4.5.2.7. 回答登録アクションの設定

次に、回答を登録する際のアクション処理を作成します。
画面右側の「アクション」タブを選択し、 bm_action_create_new をクリックしアクションエディタを表示します。
アクションエディタ上部の名称を「新しいアクション #1」を「answer」に変更します。
アクションエディタ左側の「アクション」タブから「標準」 - 「変数〇に〇を代入する」を選択し、「アクションが呼ばれたとき」に配置します。
../../../_images/screen_action_answer_variable.png
配置したアクションの変数を以下のように設定します。
変数($variable.answerData.enqueteId)に($variable.entity.enqueteId)を代入する
../../../_images/screen_action_answer_variable_set.png

左側の「アクション」タブから「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング〇にリクエストを送信する」を選択し、先ほど配置した「変数〇に〇を代入する」の次に配置します。
配置した「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の bm_search をクリックし、フロールーティング定義検索ダイアログから「tutorial_enquete/answer」を選択します。
../../../_images/screen_action_answer_select_flow.png

設定した業務ロジックにアンケートIDを渡すために、リクエストパラメータに「$variable > answerData」を設定します。
../../../_images/screen_action_answer_param.png

登録処理の最後に、登録後に登録完了画面が表示されるようにします。
アクションエディタ左側の「アクション」タブから「標準」 - 「ページ〇を開く」を選択し、先ほど設定したアクションの次に配置します。
配置したアクションを以下のように設定します。
ページ(success)を開く
../../../_images/screen_action_answer_success.png

回答ボタンに作成した回答登録処理を設定します。
回答ボタンを選択し、「プロパティ」タブの「ボタン要素」 - 「イベント」 - 「クリック時」 に作成した「answer」アクションを設定します。
../../../_images/screen_add_answer.png

4.4.5.2.8. エラー処理の設定

次に、作成したアクション処理にエラー処理を追加します。
画面上でのエラー処理は、画面を表示する際にアンケートIDが指定されなかった場合と、誤ったアンケートIDで、アンケート情報が取得できなかった場合の2種類作成します。
どちらのエラー処理も初期表示に利用するinitアクションに対して設定するため、「アクション」タブで「init」アクションを選択しアクションエディタを表示してください。
../../../_images/screen_error_init.png

まずは、アンケートIDが指定されなかった場合のエラーを設定します。
エラー画面のメッセージを設定するため、アクションエディタ左側の「アクション」タブから「標準」 - 「変数〇に〇を代入する」を選択し、「アクションが呼ばれたとき」の一番上に配置します。
配置したアクションの変数を以下のように設定します。
変数($variable.errorMessage)に($constant.error_no_id)を代入する
../../../_images/screen_error_message.png

アクションエディタ左側の実行条件タブから「標準」 - 「変数〇が〇のとき」を配置したアクションの条件入力欄に配置します。
../../../_images/screen_error_variable.png

配置した条件を以下のように設定します。
変数($input.enqueteId)が()のとき
「〇のとき」を空にすることによって、入力値のenqueteIdが指定されていなかった場合の条件が指定できます。
../../../_images/screen_error_variable_input.png

次に、エラー画面の表示を行います。
アクションエディタ左側の「アクション」タブから「標準」 - 「ページ〇を開く」を選択し、先ほど設定したアクションの次に配置します。
配置したアクションを以下のように設定します。
ページ(error)を開く
アクションエディタ左側の実行条件タブから「標準」 - 「変数〇が〇のとき」を配置したアクションの条件入力欄に配置します。
配置した条件を以下のように設定します。
変数($input.enqueteId)が()のとき
../../../_images/screen_error_send_page.png

エラーが発生した際に、後続の処理を行わない設定をします。
アクションエディタ左側の「アクション」タブから「標準」 - 「ラベル」を選択し、一番最後のアクションとして配置します。
「ラベル(END)」と設定します。
../../../_images/screen_error_end_label.png

アクションエディタ左側の「アクション」タブから「標準」 - 「ラベルへジャンプする」を選択し、「ページ(error)を開く」の次のアクションとして配置します。
「ラベル(END)へジャンプする」 と設定します。
アクションエディタ左側の実行条件タブから「標準」 - 「変数〇が〇のとき」を配置したアクションの条件入力欄に配置します。
配置した条件を以下のように設定します。
変数($input.enqueteId)が()のとき
../../../_images/screen_error_send_label.png

これで、画面表示時にenqueteIdが指定されなかった場合にエラー画面が表示されるようになりました。
次に、アンケート情報取得で、アンケートIDに誤りがあるなどでエラーとして返却された場合のエラー処理を設定します。
「init」アクションのアクションエディタの「エラーが発生したとき」タブを選択します。
../../../_images/screen_error_api.png

エラー画面のメッセージを設定するため、アクションエディタ左側の「アクション」タブから「標準」 - 「変数〇に〇を代入する」を選択し、「エラーが発生したとき」の一番上に配置します。
配置したアクションの変数を以下のように設定します。
変数($variable.errorMessage)に($constant.error_enquete_missing)を代入する
../../../_images/screen_error_api_message.png

次に、エラー画面の表示を行います。
アクションエディタ左側の「アクション」タブから「標準」 - 「ページ〇を開く」を選択し、先ほど設定したアクションの次に配置します。
配置したアクションを以下のように設定し、決定ボタンをクリックしてアクションを設定します。
ページ(error)を開く
../../../_images/screen_error_api_send_page.png

これで回答画面の作成は完了です。
次のページでは、作成した回答画面をベースに集計画面を作成します。