intra-mart Accel Platform ローコード開発チュートリアルガイド 第7版 2022-09-30

5.3.4. アンケート一覧、登録画面の作成

アンケートの一覧表示と登録を行う画面を作成します。
アンケート一覧と登録画面は一つのコンテンツで作成します。
アンケート一覧からは登録画面とそれぞれのアンケートの回答、集計画面へのリンクを作成します。

5.3.4.1. 画面情報の設定

作成する画面の基本情報を設定します。

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

アンケート一覧、登録画面は新しい一つのコンテンツとして作成します。
アプリケーション管理の「画面タブ」 - 「画面リソースを追加」 - 「画面を新規作成」 - 「画面コンテンツ」を選択し、画面コンテンツ作成画面を表示します。
../../../_images/enquete_screen_1.png

画面コンテンツのカテゴリの検索ボタンをクリックし「業務テンプレートから作成」を設定します。
コンテンツIDに「tutorial_enquete_list」と設定します。
コンテンツ種別欄の「Bulma」を選択します。
コンテンツ名に「【チュートリアル】アンケート一覧_登録画面」と入力し登録ボタンをクリックして登録します。
../../../_images/enquete_screen_2.png

アプリケーション管理画面に戻り、登録した画面コンテンツが画面一覧に表示されました。

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

アプリケーション管理の「画面タブ」から作成した「【チュートリアル】アンケート一覧_登録画面」を選択し、コンテンツ画面を開きます。
コンテンツ画面のデザイン編集画面をクリックし、デザイナ画面を開きます。
../../../_images/enquete_screen_3.png

5.3.4.3. 変数の設定

画面で利用する変数を作成します。
最初に、アンケート一覧取得処理画面に関連する変数を作成します。
一覧画面では、アンケート一覧取得処理からアンケート情報を取得し、それを元に一覧画面表示用に変換して利用します。
まずは、アンケート一覧取得処理からアンケート情報を取得した値を格納する変数を作成します。画面右側の「変数」タブを選択します。
「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「responseData」と入力し、値の型を「マップ」に、代入値も「マップ」に設定して「決定」ボタンをクリックします。
../../../_images/enquete_screen_variable_1.png

追加した「$variable > responseData」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「records」と入力し、値の型を「マップ」に、配列の次元数を「1次元配列」、配列の要素数を「1」に設定して「決定」ボタンをクリックします。
../../../_images/enquete_screen_variable_2.png

追加した「$variable > responseData > records > 0」配下に、「enquete_id」、「enquete_title」、「start_date」、「end_date」という変数を追加します。
値の型は全て「文字列」です。
../../../_images/enquete_screen_variable_3.png
変数はJSON入力で以下を記載しても設定できます。
"responseData": {
  "records": [
    {
      "enquete_id": "",
      "enquete_title": "",
      "start_date": "",
      "end_date": ""
    }
  ]
}
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

続けて、一覧画面表示用の変数を作成します。
「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「resultList」と入力し、値の型を「マップ」に、配列の次元数を「1次元配列」、配列の要素数を「1」に設定して「決定」ボタンをクリックします。
../../../_images/enquete_screen_variable_4.png

作成した「$variable > esultList > 0」配下に、「title」、「startDate」、「endDate」、「answerUrl」、「totalUrl」という変数を追加します。
値の型は全て「文字列」です。
../../../_images/enquete_screen_variable_5.png

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

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

作成した「$variable > enqueteInfo」の配下に、アンケート情報を格納する値を追加します。
「enqueteId」、「enqueteTitle」、「enqueteOverview」を「文字列」で、「startDate」と「endDate」を「日付・時刻」で追加します。
../../../_images/enquete_screen_variable_7.png

続けて、「$variable > enqueteInfo」の配下に、アンケート設問情報を格納する値を追加します。
「$variable > enqueteInfo」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「questionList」と入力し、値の型を「マップ」に、配列の次元数を「1次元配列」、「配列の要素数」を「1」に変更して「決定」ボタンをクリックします。
作成した「$variable > enqueteInfo > questionList > 0」配下に、「question」、「leftScale」、「rightScale」という変数を値の型を「文字列」で追加します。
../../../_images/enquete_screen_variable_8.png

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

回答画面、集計画面へアクセスするURLを定数で設定します。
回答画面、集計画面へのリンクは、定数で設定したURLに、一覧で取得したアンケートIDを繋げて作成します。
「変数」タブで「定数」を選択します。
../../../_images/enquete_screen_variable_9.png

まずは、回答画面を表示するURLを設定します。「$constant」を選択し、 bm_variable_create_new をクリックして定数エディタを表示します。
定数エディタのキー名に「answerUrl」と入力し、値の型を「文字列」に、代入値に「tutorial_enquete/answer?enqueteId=」と設定します。
同様に、集計画面を表示するURLを設定します。「$constant」を選択し、 bm_variable_create_new をクリックして定数エディタを表示します。
定数エディタのキー名に「totalUrl」と入力し、値の型を「文字列」に、代入値に「tutorial_enquete/totalize?enqueteId=」と設定します。
../../../_images/enquete_screen_variable_10.png

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

5.3.4.4. アンケート一覧画面の作成

アンケートの一覧画面から作成します。
まずは、初期表示で作成された画面の名称を変更します。
デザイン編集エディタをクリックし、画面右側の「コンテナページ」 - 「エレメント固有」 - 「name」に「list」と設定します。
../../../_images/enquete_screen_list_1.png

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

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

画面左側のパレットの「繰り返し(Bulma)」 - 「テーブルコンテナ(繰り返し)」を選択し、先ほど配置した「ボックス」の中に配置します。
../../../_images/enquete_screen_list_4.png

配置した「テーブルコンテナ(繰り返し)」配下の「テーブル(繰り返し)」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「list」を「変数値」に設定し、 bm_search を選択します。
../../../_images/enquete_screen_list_5.png

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

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

続けて、テーブルヘッダに項目名を設定します。「テーブルコンテナ(繰り返し)」は、「showHeader」にチェックが入っている場合、1行目がヘッダとして表示されます。
画面左側のパレットの「汎用」 - 「ラベル」を選択し、テーブル1行目の左端に配置します。
../../../_images/enquete_screen_list_7.png

配置した「ラベル」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」に「アンケート名」と設定します。
../../../_images/enquete_screen_list_8.png

同様に、テーブルヘッダが左から「アンケート名」、「開始日」、「終了日」、「回答画面へ」、「集計画面へ」となるように設定します。
../../../_images/enquete_screen_list_9.png

次に、一覧の表示項目を設定します。
画面左側のパレットの「汎用」 - 「ラベル」を選択し、テーブル1行目の左端に配置します。
../../../_images/enquete_screen_list_10.png

配置した「ラベル」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」を「変数値」に設定し、 bm_search を選択します。
「$variable > resultList > 0 > title」を選択し、「決定」ボタンをクリックして変数を設定します。
../../../_images/enquete_screen_list_11.png

設定した変数を「$variable.resultList[$index].title」に変更します。
../../../_images/enquete_screen_list_12.png

同様に、開始日の列に「ラベル」を配置し、変数値として「$variable.resultList[$index].startDate」を終了日の列に「ラベル」を配置し、変数値として「$variable.resultList[$index].endDate」と設定します。
../../../_images/enquete_screen_list_13.png

次に、回答画面へのリンクを作成します。
画面左側のパレットの「汎用」 - 「ハイパーリンク」を選択し、回答画面への列に配置します。
../../../_images/enquete_screen_list_14.png

配置した「ハイパーリンク」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「href」を変数値に設定し、「$variable.resultList[$index].answerUrl」を設定します。
同様に、「プロパティ」タブ - 「エレメント固有」 - 「target」に「_blank」を設定します。
../../../_images/enquete_screen_list_15.png

「ハイパーリンク」は、標準でラベルが設定されています。本チュートリアルでは、アイコンをリンクとして表示するため、「ハイパーリンク」内に設定されたラベルを選択し、 bm_delete かDeleteキーで削除します。
../../../_images/enquete_screen_list_16.png

画面左側のパレットの「パーツ(Bulma)」 - 「アイコン」を選択し、「ハイパーリンク」の中に配置します。
../../../_images/enquete_screen_list_17.png

配置した「アイコン」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「iconClass」に「fas fa-clipboard-check」を設定します。
../../../_images/enquete_screen_list_18.png

同様に、集計画面へのリンクを作成します。
画面左側のパレットの「汎用」 - 「ハイパーリンク」を選択し、集計画面への列に配置します。
配置した「ハイパーリンク」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「href」を変数値に設定し、「$variable.resultList[$index].totalUrl」を設定します。
同様に、「プロパティ」タブ - 「エレメント固有」 - 「target」に「_blank」を設定します。
../../../_images/enquete_screen_list_19.png

「ハイパーリンク」内に設定されたラベルを選択し、 bm_delete かDeleteキーで削除し、画面左側のパレットの「パーツ(Bulma)」 - 「アイコン」を選択し、「ハイパーリンク」の中に配置します。
配置した「アイコン」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「iconClass」に「fas fa-clipboard-list」を設定します。
../../../_images/enquete_screen_list_20.png

アンケート一覧のテーブルの表示幅や配置を調整します。
アンケート名の列のテーブルヘッダを選択し、「テキストスタイル」 - 「横揃え」を「center」に、「幅・高さ」 - 「横幅」に「40%」を設定します。
../../../_images/enquete_screen_list_21.png

同様に、開始日、終了日、回答画面へ、集計画面への列のテーブルヘッダの「テキストスタイル」 - 「横揃え」を「center」に「幅・高さ」 - 「横幅」を「15%」に設定します。
../../../_images/enquete_screen_list_22.png

続けて、アンケート名の列のテーブルコンテンツを選択し、「テキストスタイル」 - 「横揃え」を「center」に設定します。
../../../_images/enquete_screen_list_23.png

同様に、開始日、終了日、回答画面へ、集計画面への列の「テキストスタイル」 - 「横揃え」を「center」に設定します。
../../../_images/enquete_screen_list_24.png

最後に、新規作成画面へと遷移するボタンを配置します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「ボタン」を選択し、テーブルコンテナの上に配置します。
../../../_images/enquete_screen_list_25.png

配置した「ボタン」を選択し、「プロパティ」タブ - 「エレメント固有」 - 「textContent」に「新規作成」を、「color」を「info」に設定します。
../../../_images/enquete_screen_list_26.png

5.3.4.4.1. 一覧画面のアクションの作成

一覧画面で利用するアクションを作成します。
画面右側の「アクション」タブを選択し、 bm_action_create_new をクリックしアクションエディタを表示します。
../../../_images/enquete_screen_list_action_1.png

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

左側の「アクション」タブから「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング〇にリクエストを送信する」を配置します。
../../../_images/enquete_screen_list_action_3.png

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

業務ロジックからデータを受け取るために、レスポンスデータの bm_search から「変数 > $variable > responseData」を設定します。
../../../_images/enquete_screen_list_action_5.png

次に、取得したデータを表示用に加工する処理を追加します。
左側の「アクション」タブから「標準」 - 「カスタムスクリプトを実行する」を「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の次に配置します。
../../../_images/enquete_screen_list_action_6.png

配置した「カスタムスクリプト」の入力欄に以下のスクリプトを設定し、決定ボタンをクリックして一覧取得のアクション設定が完了です。
$variable.resultList = [];
for(const res of $variable.responseData.records){
  let list = {};
  list.title = res.enquete_title;
  list.startDate = res.start_date;
  list.endDate = res.end_date;
  list.answerUrl = $constant.answerUrl + res.enquete_id;
  list.totalUrl = $constant.totalUrl + res.enquete_id;
  $variable.resultList.push(list);
}

作成した「list」アクションを画面の初期表示時に呼び出す設定を行います。
画面上部の bm_container をクリックします。
../../../_images/enquete_screen_list_action_7.png

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

一覧画面の動作確認を行います。画面上部の bm_preview をクリックします。
../../../_images/enquete_screen_list_action_9.png

プレビューダイアログが表示され、アンケート一覧が表示されました。
../../../_images/enquete_screen_list_action_10.png

5.3.4.5. アンケート登録画面の作成

続けて、アンケートの登録画面を作成します。
画面上部の bm_add_screen をクリックし、「プロパティ」タブの「コンテナページ」 - 「エレメント固有」 - 「name」に「create」と設定します。
../../../_images/enquete_screen_create_1.png
次に、画面にサイドメニューを表示するためにサイドメニューコンテナを配置します。
画面左側のパレットの「レイアウト」 - 「サイドメニューコンテナ」を選択し、画面に配置します。
../../../_images/enquete_screen_create_2.png

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

同様に、パレットの「レイアウト(Bulma)」 - 「ボックス」を選択し、先ほど配置した「ボックス」の中に2つ配置します。
../../../_images/enquete_screen_create_4.png

上に配置したボックスにアンケート情報の入力内容を、下に配置したボックスに設問情報の入力内容を作成していきます。
まずは、アンケート情報の入力内容を設定していきます。
アンケート情報は「アンケートID」、「アンケートタイトル」、「アンケート概要」、「開始日」、「終了日」の入力を可能とします。
最初に、アンケートIDの入力欄を作成します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「水平フィールド」を選択し、上に配置したボックスの中に配置します。
../../../_images/enquete_screen_create_5.png
配置した「水平フィールド」の左側にある「水平フィールドラベル」を選択し、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「アンケートID」と設定します。
../../../_images/enquete_screen_create_6.png

続けて、アンケートIDの入力欄用のテキストボックスを配置します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「テキスト入力」を選択し、「水平フィールド」の右側に配置します。
../../../_images/enquete_screen_create_7.png

配置した「テキスト入力」の「テキスト入力要素」を選択し、「プロパティ」タブ - 「エレメント固有」 - 「value」を「変数値」にし、 bm_search を選択します。
../../../_images/enquete_screen_create_8.png

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

同様の手順で、「アンケートタイトル」、「アンケート概要」の入力欄を作成します。
テキスト入力要素の「プロパティ」タブ - 「エレメント固有」 - 「value」にはそれぞれ、「アンケートタイトル」は「$variable.enqueteInfo.enqueteTitle」、「アンケート概要」は「$variable.enqueteInfo.enqueteOverview」を設定してください。
../../../_images/enquete_screen_create_10.png

続けて、「開始日」と「終了日」の入力欄を作成します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「水平フィールド」を選択し、「アンケート概要」の入力欄の下に配置します。
配置した「水平フィールド」の左側にある「水平フィールドラベル」を選択し、画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「開始日」と設定します。
../../../_images/enquete_screen_create_11.png

続けて、アンケートIDの入力欄用のテキストボックスを配置します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「日付入力」を選択し、「水平フィールド」の右側に配置します。
../../../_images/enquete_screen_create_12.png

配置した「日付入力」の「日付入力要素」を選択し、「プロパティ」タブ - 「エレメント固有」 - 「value」の bm_search を選択します。
「$variable > enqueteInfo > startDate」を選択し「決定」ボタンをクリックして変数を設定します。
../../../_images/enquete_screen_create_13.png

同様の手順で、「終了日」の入力欄を作成します。
日付入力要素の「プロパティ」タブ - 「エレメント固有」 - 「value」には「$variable.enqueteInfo.endDate」を設定してください。
../../../_images/enquete_screen_create_14.png

次は、設問情報の入力欄を作成します。
設問情報は、設問数の増減を動的に行えるようにします。
画面左側のパレットの「フォーム部品(Bulma)」 - 「水平フィールド」を選択し、下側の設問情報入力用の「ボックス」の中に配置します。
../../../_images/enquete_screen_create_15.png

配置した「水平フィールド」の左側にある「水平フィールドラベル」を選択します。
画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」に「設問」と設定します。
../../../_images/enquete_screen_create_16.png

続けて、設問内容の入力欄を作成します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「エレメント配置アイテム」を選択し、「水平フィールド」の右側に配置します。
../../../_images/enquete_screen_create_17.png

次に、「レイアウト(Bulma)」 - 「ボックス」を選択し、先ほど配置した「エレメント配置アイテム」の中に配置します。
../../../_images/enquete_screen_create_18.png

次に、「繰り返し(Bulma)」 - 「カラム(繰り返し)」を選択し、先ほど配置した「ボックス」の中に配置します。
../../../_images/enquete_screen_create_19.png

配置した「カラム(繰り返し)」の「エレメント固有」 - 「multiLine」にチェックを入れます。
続けて、「カラム(繰り返し)」の「カラムアイテム(繰り返し)」を選択し、「エレメント固有」 - 「list」の bm_search から「$variable > enqueteInfo > questionList」を選択して設定します。
../../../_images/enquete_screen_create_20.png

同様に、「カラム(繰り返し)」の「カラムアイテム(繰り返し)」の、「エレメント固有」 - 「size」を「full」に設定します。
これで、「$variable > enqueteInfo > questionList」の配列の長さによって、カラムが追加されるようになりました。
続けて、「設問内容」、「左項目」、「右項目」の入力欄を作成します。
画面左側のパレットの「レイアウト(Bulma)」 - 「カラム」を選択し、「カラムアイテム(繰り返し)」の中に配置します。
../../../_images/enquete_screen_create_21.png

画面左側のパレットの「フォーム部品」 - 「テキスト入力」を選択し、先ほど配置した「カラム」の左側に配置します。
../../../_images/enquete_screen_create_22.png

配置した「テキスト入力」を選択し、「プロパティ」タブの「エレメント固有」 - 「placeholder」に「設問内容」、「エレメント固有」 - 「value」を「変数値」にし「$variable.enqueteInfo.questionList[$index].question」を設定します。
../../../_images/enquete_screen_create_24.png

このままでは入力欄のサイズが少し小さいため、横幅の調整を行います。
配置した「テキスト入力」の「幅・高さ」 - 「横幅」に「100%」を指定します。
../../../_images/enquete_screen_create_25.png

同様の手順で「左項目」、「右項目」の入力欄を作成します。
「テキスト入力」の「エレメント固有」 - 「value」にはそれぞれ、「左項目」には「$variable.enqueteInfo.questionList[$index].leftScale」を「右項目」には「$variable.enqueteInfo.questionList[$index].rightScale」を設定してください。
次に、設問の行の増減を行うボタンを用意します。まずは行追加ボタンを作成します。
画面左側のパレットの「レイアウト(Bulma)」 - 「カラム」を選択し、設問内容の入力欄を配置したボックスの上に配置します。
../../../_images/enquete_screen_create_26.png

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

配置した「ボタン」の「ボタン要素」を選択し、「プロパティ」タブ の「エレメント固有」 - 「textContent」を空にします。
同じく、「エレメント固有」 - 「color」を「success light」に、「leftIconClass」に「fas fa-plus-circle」をそれぞれ設定します。
../../../_images/enquete_screen_create_28.png

同様に行削除ボタンを作成します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「ボタン」を選択し、右端のカラムに配置します。
配置した「ボタン」の「ボタン要素」を選択し、「プロパティ」タブ の「エレメント固有」 - 「textContent」を空にします。
同じく、「エレメント固有」 - 「color」を「danger light」に、「leftIconClass」に「fas fa-minus-circle」をそれぞれ設定します。
../../../_images/enquete_screen_create_29.png

表示位置を調整するため、左端のカラムを選択し、「幅・高さ」 - 「横幅(最小)」に「80%」を指定します。
../../../_images/enquete_screen_create_30.png

最後に、アンケートの登録ボタンを配置します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「ボタン」を選択し、設問内容の入力欄を配置していた「ボックス」の一番下に配置します。
../../../_images/enquete_screen_create_31.png

配置した「ボタン」を選択し、「プロパティ」タブの「テキストスタイル」 - 「横揃え」を「center」に設定します。
../../../_images/enquete_screen_create_32.png

配置した「ボタン」の「ボタン要素」を選択し、「プロパティ」タブの「エレメント固有」 - 「textContent」に「登録」と設定します。
../../../_images/enquete_screen_create_33.png

これで、入力項目の配置は完了です。
アンケート登録画面に関するアクションを作成します。

5.3.4.5.1. アンケート登録画面のアクションの作成

次に、画面で実行されるアクションを作成します。
最初に、設問の行追加を行うアクションを作成します。
設問の行追加は「$variable > enqueteInfo > questionList」の配列の末尾にオブジェクトを追加して行います。
画面右側の「アクション」タブを選択し、 bm_action_create_new をクリックしアクションエディタを表示します。
アクションエディタ上部の名称を「新しいアクション #1」を「add question」に変更します。
../../../_images/enquete_screen_create_action_1.png

左側の「アクション」タブから「標準」 - 「カスタムスクリプトを実行する」を配置します。
配置した「カスタムスクリプト」の入力欄に以下のスクリプトを設定し、決定ボタンをクリックします。
const question = {"question": "", "leftScale":"", "rightScale":""}
$variable.enqueteInfo.questionList.push(question)
../../../_images/enquete_screen_create_action_2.png

続けて、設問の行削除を行うアクションを作成します。
設問の行削除は「$variable > enqueteInfo > questionList」の配列の末尾を削除して行います。
bm_action_create_new をクリックしアクションエディタを表示します。
アクションエディタ上部の名称を「新しいアクション #1」を「remove question」に変更します。
../../../_images/enquete_screen_create_action_3.png

左側の「アクション」タブから「標準」 - 「カスタムスクリプトを実行する」を配置します。
配置した「カスタムスクリプト」の入力欄に以下のスクリプトを設定し、決定ボタンをクリックします。
$variable.enqueteInfo.questionList.pop()
../../../_images/enquete_screen_create_action_4.png

次に、アンケートを登録するアクションを作成します。
bm_action_create_new をクリックしアクションエディタを表示します。
アクションエディタ上部の名称を「新しいアクション #1」を「create enquete」に変更します。
左側の「アクション」タブから「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング〇にリクエストを送信する」を配置します。
../../../_images/enquete_screen_create_action_5.png

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

業務ロジックへデータを送信するために、リクエストパラメータの bm_search から「変数 > $variable > enqueteInfo」を設定します。
../../../_images/enquete_screen_create_action_7.png

アンケート登録後、一覧画面を表示する処理を追加します。
「標準」 - 「ページ〇を開く」を先ほど配置した「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の次に配置し、「ページ(list)を開く」に設定します。
../../../_images/enquete_screen_create_action_8.png

登録後に一覧表示する際に、一覧を再表示するための処理を追加します。
「標準」 - 「アクション〇を実行する」を「ページ〇を開く」の次に配置し、「アクション(list)を実行する」に設定し、決定ボタンをクリックしてアクションを保存します。
../../../_images/enquete_screen_create_action_9.png

最後に、アンケート登録画面を表示するアクションを作成します。
bm_action_create_new をクリックしアクションエディタを表示します。
アクションエディタ上部の名称を「新しいアクション #1」を「open create page」に変更します。
左側の「アクション」タブから「標準」 - 「ページ〇を開く」を配置し、「ページ(create)を開く」に設定します。
../../../_images/enquete_screen_create_action_10.png

作成したアクションを各ボタンに設定します。
設問の入力欄の+アイコンを配置したボタンを選択し、「イベント」 - 「クリック時」に「add question」を設定します。
../../../_images/enquete_screen_create_action_11.png

同様に、設問の入力欄の-アイコンを配置したボタンを選択し、「イベント」 - 「クリック時」に「remove question」を設定します。
../../../_images/enquete_screen_create_action_12.png

アンケート登録ボタンの「ボタン要素」を選択し、「イベント」 - 「クリック時」に「create enquete」を設定します。
../../../_images/enquete_screen_create_action_13.png

最後に、画面上部の「list」タブを選択して一覧画面を表示し、新規作成ボタンの「ボタン要素」 - 「イベント」 - 「クリック時」に「open create page」を設定します。
../../../_images/enquete_screen_create_action_14.png

これで、作成したアクションの設定が完了しました。動作確認を行いましょう。
画面上部の bm_preview をクリックします。
プレビューダイアログが表示され、新規作成ボタンをクリックすると「アンケート登録画面」が表示されます。
アンケート登録画面では+ボタンと-ボタンでアンケートの設問の行が増減し、登録ボタンでアンケートの登録が行えます。
../../../_images/enquete_screen_create_action_15.png

ここまででアンケートの一覧と登録が行える画面が作成できました。
しかし、このままでは設問項目を全て埋めなくても登録できたり、登録後再度アンケート登録画面を表示した際に前回登録した内容がそのままになっていたりします。
登録画面での入力チェックや、アンケート登録画面表示時の変数の初期化処理などを追加していきましょう。

5.3.4.5.2. 入力チェックなどの追加

まずは、アンケート情報の入力チェックを追加します。
画面上部の「create」タブを選択して、アンケート登録画面を表示します。
画面右側の「変数」タブを選択し、「$variable > enqueteInfo > enqueteId」の横の bm_variable_edit をクリックして変数エディタを表示します。
../../../_images/enquete_screen_create_validate_1.png

変数エディタの「入力規則」 - 「必須」にチェックを入れ、「フォーマット指定」を「ID形式」と設定します。
../../../_images/enquete_screen_create_validate_2.png

同様に、「$variable > enqueteInfo > enqueteTitle」の横の bm_variable_edit をクリックして変数エディタを表示し、「必須」にチェックを入れます。
「フォーマット指定」は標準の「指定なし」のままとします。
../../../_images/enquete_screen_create_validate_3.png

同様の手順で、「$variable > enqueteInfo > enqueteOverview」、「$variable > enqueteInfo > startDate」、「$variable > enqueteInfo > endDate」を「必須」に設定します。
変数が入力規則にマッチしない場合に、アンケート登録処理を終了するようにアクションを設定します。
「アクション」タブを選択し、「create enquete」を選択してアクションエディタを表示します。
左側の「アクション」タブから「標準」 - 「ラベル〇」を一番最後のアクションとして配置し、「ラベル(END)」と設定します。
../../../_images/enquete_screen_create_validate_4.png

「標準」 - 「ラベル〇へジャンプする」を一番最初のアクションとして配置し、「ラベル(END)へジャンプする」と設定します。
../../../_images/enquete_screen_create_validate_5.png

「実行条件」タブの「標準」- 「変数〇が入力規則に即していないとき」を選択して実行条件欄に配置し、実行条件を「いずれかの条件に一致」とします。
../../../_images/enquete_screen_create_validate_6.png

「変数〇が入力規則に即していないとき」の変数欄を選択し、「$variable > enqueteInfo > enqueteId」を選択します。
../../../_images/enquete_screen_create_validate_7.png

同様の手順で、「変数〇が入力規則に即していないとき」を配置し、「$variable > enqueteInfo > enqueteTitle」、「$variable > enqueteInfo > enqueteOverview」、「$variable > enqueteInfo > startDate」、「$variable > enqueteInfo > endDate」を設定します。
../../../_images/enquete_screen_create_validate_8.png

これで、必須として設定した各変数が空の場合に登録処理の呼び出しや一覧画面の表示をスキップされるようになりました。
続けて、終了日が開始日よりも前に指定された場合と、設問のいずれかの項目が未指定の場合の入力チェックを行います。
上記の入力チェックはカスタムスクリプトで判定を行います。
まずは、日付の入力チェック結果を格納する変数を作成します。
「決定」ボタンをクリックしてアクションを保存し、「変数」タブを選択、 bm_variable_create_new から変数エディタを表示します。
キー名を「errorFlagDate」、値の型を「真偽値」、代入値を「いいえ」に設定して変数を登録します。
../../../_images/enquete_screen_create_validate_9.png

続けて、設問の入力チェック結果を格納する変数を作成します。
bm_variable_create_new から変数エディタを表示し、キー名を「errorFlagQuestion」、値の型を「真偽値」、代入値を「いいえ」に設定して変数を登録します。
../../../_images/enquete_screen_create_validate_10.png

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

作成した変数を利用して入力チェックを行います。
「アクション」タブを選択し、「create enquete」を選択してアクションエディタを表示します。
左側の「アクション」タブから「標準」 - 「カスタムスクリプト」を一番最初のアクションとして配置します。
配置した「カスタムスクリプト」の入力欄に以下のスクリプトを設定します。
if($variable.enqueteInfo.startDate > $variable.enqueteInfo.endDate){
  $variable.errorFlagDate = true;
}else{
  $variable.errorFlagDate = false;
}
for(let question of $variable.enqueteInfo.questionList){
  if(!question.question|| !question.rightScale || !question.leftScale ){
    $variable.errorFlagQuestion = true;
  }else{
    $variable.errorFlagQuestion = false;
  }
}

../../../_images/enquete_screen_create_validate_11.png

「ラベル(END)へジャンプする」の実行条件欄を表示し、「実行条件」タブの「変数〇が〇のとき」を配置します。
../../../_images/enquete_screen_create_validate_12.png

変数として「$variable > errorFlagDate」を選択し、「abc固定値」から「${}変数値」に変更し、 bm_search をクリックし「環境 > $env > const > true」を選択します。
../../../_images/enquete_screen_create_validate_13.png

同様の手順で、「変数($variable.errorFlagQuestion)が($env.const.true)のとき」を設定し、決定ボタンをクリックしてアクションを設定します。
../../../_images/enquete_screen_create_validate_14.png

これで、登録時に入力漏れや開始、終了日に誤りがあった際には登録処理が実行されないようになりました。
エラー発生時に事象をわかりやすくするため、開始日と終了日のチェックと設問の入力チェックで失敗した場合にエラーメッセージを画面上に表示するようにしましょう。
まずは、エラーメッセージ用の定数を作成します。
「変数」タブで「定数」を選択し、 「errorMessageDate」と「終了日は開始日よりも後に設定してください」、「errorMessageQuestion」「設問項目はすべて入力してください」を設定します。
../../../_images/enquete_screen_create_validate_15.png

定数もJSON入力で以下を記載して設定できます。
"errorMessageDate" : "終了日は開始日よりも後に設定してください。",
"errorMessageQuestion" : "設問項目はすべて入力してください"
JSON入力する場合は、入力値の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

次に、開始、終了日の入力チェックのメッセージを設定します。
画面左側のパレットの「フォーム部品(Bulma)」 - 「エレメント配置アイテム」を選択し、終了日の日付入力の下に配置します。
../../../_images/enquete_screen_create_validate_16.png

「汎用」 - 「強調ラベル」を選択し、先ほど配置した「エレメント配置アイテム」の中に配置します。
../../../_images/enquete_screen_create_validate_17.png

配置した「強調ラベル」を選択し、「プロパティ」タブ の「エレメント固有」 - 「textContent」に「$constant.errorMessageDate」、 「共通」 - 「表示/非表示」に「= $variable.errorFlagDate == true」と「文字色・背景色」 - 「文字色」に「red」設定します。
../../../_images/enquete_screen_create_validate_18.png

続けて、設問の入力チェックのエラーメッセージを配置します。
「汎用」 - 「強調ラベル」を選択し、設問内容などを配置しているエレメント配置アイテムの一番下に配置します。
../../../_images/enquete_screen_create_validate_19.png

配置した「強調ラベル」を選択し、「プロパティ」タブ の「エレメント固有」 - 「textContent」に「$constant.errorMessageQuestion」、 「共通」 - 「表示/非表示」に「= $variable.errorFlagQuestion == true」と「文字色・背景色」 - 「文字色」に「red」設定します。
../../../_images/enquete_screen_create_validate_20.png

最後に、登録画面表示時に変数を初期化する処理を追加します。
本チュートリアルでは、変数の初期化は定数に登録用変数の初期状態の変数を用意しておき、上書く方法で行います。
まずは、登録用変数の初期状態の変数を用意します。
「変数」タブで「変数」を選択し、「$variable」を選択した状態で bm_variable_json をクリックし、JSONエディタで以下の「enqueteInfo」のJSONをコピーします。
"enqueteInfo": {
  "enqueteId": "",
  "enqueteTitle": "",
  "enqueteOverview": "",
  "startDate": null,
  "endDate": null,
  "questionList": [
    {
      "question": "",
      "leftScale": "",
      "rightScale": ""
    }
  ]
}

../../../_images/enquete_screen_create_validate_21.png

「定数」を選択し、「$const」を選択した状態で bm_variable_json をクリックし、JSONエディタでコピーした「enqueteInfo」のJSONを貼り付けます。
その際に、わかりやすくするために定数のキー名を「enqueteInfoInit」に変更しましょう
../../../_images/enquete_screen_create_validate_22.png

JSON入力の場合、初期値を「null」にした場合、値の型が「マップ」となるため、で「$const > enqueteInfoInit > startDate」、「$const > enqueteInfoInit > endDate」の値の型を「日付・時刻」に変更します。
../../../_images/enquete_screen_create_validate_23.png

初期状態の定数を作成したため、アンケート登録画面を表示するアクションに変数の初期化処理を追加します。
「アクション」タブの「open create page」を選択し、アクションエディタを表示します。
左側の「アクション」タブから「標準」 - 「変数〇に〇を代入する」を一番最初のアクションとして配置し、「変数($variable.enqueteInfo)に($constant.enqueteInfoInit)を代入する」に設定します。
../../../_images/enquete_screen_create_validate_24.png

これで画面の作成が完了しました。