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

一覧画面で利用するアクションを作成します。

画面右側の「アクション」タブを選択し、 をクリックしアクションエディタを表示します。

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

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

$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」アクションを画面の初期表示時に呼び出す設定を行います。

画面上部の をクリックします。

一覧画面の動作確認を行います。画面上部の をクリックします。

次に、画面で実行されるアクションを作成します。

最初に、設問の行追加を行うアクションを作成します。

設問の行追加は「$variable > enqueteInfo > questionList」の配列の末尾にオブジェクトを追加して行います。

画面右側の「アクション」タブを選択し、 をクリックしアクションエディタを表示します。

アクションエディタ上部の名称を「新しいアクション #1」を「add question」に変更します。

const question = {"question": "", "leftScale":"", "rightScale":""}
$variable.enqueteInfo.questionList.push(question)

続けて、設問の行削除を行うアクションを作成します。

設問の行削除は「$variable > enqueteInfo > questionList」の配列の末尾を削除して行います。

をクリックしアクションエディタを表示します。

アクションエディタ上部の名称を「新しいアクション #1」を「remove question」に変更します。

$variable.enqueteInfo.questionList.pop()

次に、アンケートを登録するアクションを作成します。

をクリックしアクションエディタを表示します。

アクションエディタ上部の名称を「新しいアクション #1」を「create enquete」に変更します。

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

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

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

最後に、アンケート登録画面を表示するアクションを作成します。

をクリックしアクションエディタを表示します。

アクションエディタ上部の名称を「新しいアクション #1」を「open create page」に変更します。

左側の「アクション」タブから「標準」 - 「ページ〇を開く」を配置し、「ページ（create）を開く」に設定します。

これで、作成したアクションの設定が完了しました。動作確認を行いましょう。

画面上部の をクリックします。

プレビューダイアログが表示され、新規作成ボタンをクリックすると「アンケート登録画面」が表示されます。

アンケート登録画面では＋ボタンと－ボタンでアンケートの設問の行が増減し、登録ボタンでアンケートの登録が行えます。

まずは、アンケート情報の入力チェックを追加します。

画面上部の「create」タブを選択して、アンケート登録画面を表示します。

画面右側の「変数」タブを選択し、「$variable > enqueteInfo > enqueteId」の横の をクリックして変数エディタを表示します。

同様に、「$variable > enqueteInfo > enqueteTitle」の横の をクリックして変数エディタを表示し、「必須」にチェックを入れます。

「フォーマット指定」は標準の「指定なし」のままとします。

これで、必須として設定した各変数が空の場合に登録処理の呼び出しや一覧画面の表示をスキップされるようになりました。

続けて、終了日が開始日よりも前に指定された場合と、設問のいずれかの項目が未指定の場合の入力チェックを行います。

上記の入力チェックはカスタムスクリプトで判定を行います。

まずは、日付の入力チェック結果を格納する変数を作成します。

「決定」ボタンをクリックしてアクションを保存し、「変数」タブを選択、 から変数エディタを表示します。

キー名を「errorFlagDate」、値の型を「真偽値」、代入値を「いいえ」に設定して変数を登録します。

続けて、設問の入力チェック結果を格納する変数を作成します。

から変数エディタを表示し、キー名を「errorFlagQuestion」、値の型を「真偽値」、代入値を「いいえ」に設定して変数を登録します。

"errorFlagDate": false,
"errorFlagQuestion": false

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;
  }
}

変数として「$variable > errorFlagDate」を選択し、「abc▼」をクリックして入力値の種類を固定値から変数値へと変更します。

をクリックし「環境 > $env > const > true」を選択します。

"errorMessageDate" : "終了日は開始日よりも後に設定してください。",
"errorMessageQuestion" : "設問項目はすべて入力してください"

JSON入力する場合は、入力値の をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

次に、開始、終了日の入力チェックのメッセージを設定します。

画面左側のパレットの「フォーム部品（Bulma）」 - 「エレメント配置アイテム」を選択し、終了日の日付入力の下に配置します。

最後に、登録画面表示時に変数を初期化する処理を追加します。

本チュートリアルでは、変数の初期化は定数に登録用変数の初期状態の変数を用意しておき、上書く方法で行います。

まずは、登録用変数の初期状態の変数を用意します。

「変数」タブで「変数」を選択し、「$variable」を選択した状態で をクリックし、JSONエディタで以下の「enqueteInfo」のJSONをコピーします。

"enqueteInfo": {
  "enqueteId": "",
  "enqueteTitle": "",
  "enqueteOverview": "",
  "startDate": null,
  "endDate": null,
  "questionList": [
    {
      "question": "",
      "leftScale": "",
      "rightScale": ""
    }
  ]
}

「定数」を選択し、「$constant」を選択した状態で をクリックし、JSONエディタでコピーした「enqueteInfo」のJSONを貼り付けます。

その際に、わかりやすくするために定数のキー名を「enqueteInfoInit」に変更しましょう