ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

OutSystemsを始めよう! 「QA管理システム」を作ってみた③【後編 ~「QA管理システム」作成~】

OutSystemsをじっくり触ってみる

f:id:fv_yamazaki:20180823103051j:plain

こんにちは、ソリューション技術部の藤山と山崎です。

ポルトガル発のローコードプラットフォーム、OutSystems で「QA管理システム」を作ってみます。
画面キャプチャや説明が多いため、前編、中編、後編の3つの記事に分けて紹介します。

この記事は後編です。

説明を抜かせばサクッと開発できるのでぜひ試してみてください。

この記事について

前編、中編に続き、「QA管理システム」完成を目指します。 今回はOutSystemsの細かい設定も行います。前回ほど高速での開発ではありませんが、ここまで出来れば自身で開発できる知識がある状態になります。
是非チャレンジしてみてください!

この記事は、続きの記事です。 前編、中編からの「Entity」、質問一覧画面、質問登録画面を作成していない人は以下の記事からをどうぞ

techblog.forgevision.com

techblog.forgevision.com

 
 
OutSystemsって何のこと?って方は以下の記事をどうぞ

techblog.forgevision.com


「QA管理システム」作成

以下の画面構成の「QA管理システム」作成を目指して作成して行きます。 f:id:fv_yamazaki:20180821190937p:plain

質問詳細画面(Answers)作成

質問詳細画面(Answers)にあたる画面を追加しましょう。 今回は以下の手順にて簡単に、作成済み「Answer」Entityから簡単に一覧画面を作成します。

  1. 「MainFlow」を表示させます。

    f:id:fv_yamazaki:20180815164118p:plain
    画面作成3-1

  2. ドラック&ドロップにて、質問詳細画面(Answers)の一覧画面を作成します。

    f:id:fv_yamazaki:20180815164419p:plain
    画面作成3-2

権限変更

質問詳細画面(Answers)にログイン不要でアクセスできるように「Anonymous」にチェックを入れます。

f:id:fv_yamazaki:20180815164450p:plain
画面作成3-3

回答一覧への直接遷移を削除

ドラック&ドロップにて自動作成された一覧画面は、作成時に自動的にメニューに追加されていますが、今回は質問一覧画面(Questions)から特定の質問を選択し遷移するようにしたい為、メニューからの直接遷移を削除します。

  1. 画面構成を変更する際に便利な「Widget Tree」表示に切り替えてみましょう。

    f:id:fv_yamazaki:20180821153912p:plain
    画面作成3-4

  2. 「DropDownMenu」で「Answers」側のメニューを削除します。

    f:id:fv_yamazaki:20180813165137p:plain
    画面作成3-5

  3. 「Common」に存在する「Menu」から「Answers」への画面遷移を削除します。

    f:id:fv_yamazaki:20180919125936p:plain
    画面作成3-6

  4. 「Common」は以下のようになります。

    f:id:fv_yamazaki:20180814122553p:plain
    画面作成3-7


TIPS 画面処理について

作業は一旦置いておいて、操作について簡単に説明します。 そのまま「QA管理システム」を作成したい人は読み飛ばして問題ありません。

「Interface」タブ内で作成した「Web Screen」は「Screen Action」という処理、「Preparation」という画面表示時の処理を持たせることが出来ます。
また、「Input Parameter」という画面遷移時に渡されるパラメータ、「Local Variable」という対象画面の処理で利用する事の出来る変数を持たせる事も出来ます。

f:id:fv_yamazaki:20180816112230p:plain

上記は「Answers」の画面に解りやすいように適当に「Input Parameter」「Local Variable」を追加してみました。 また、自動生成された「Answers」には、「Preparation」と「RefreshAnswerTable」という「Screen Action」が既に自動追加されていることが見て解ると思います。

自動追加されている「Answers」の「Preparation」をダブルクリック選択して見てみましょう。
f:id:fv_yamazaki:20180816113612p:plain 「GetAnswers」というデータベースからデータを取得する処理が追加されています。「Answers」画面のテーブル一覧「Table Recods」は、ここで取得した結果「GetAnswers.List」を参照し一覧画面を表示させています。

自動追加されている「Answers」の「Screen Action」の「RefreshAnwserTable」は、「Answers」画面の「Reset」ボタンに押下時に呼び出される「Screen Action」です。 RefreshAnswerTable」をダブルクリック選択して見てみましょう。
f:id:fv_yamazaki:20180816114918p:plain 「RefreshAnswerTable」は「Input Parameter」として「ResetFilters」「ResetPageination」を持っていることに気づいたでしょうか? 「Screen Action」は独自の引数「Input Parameter」、独自の内部変数「Local Variable」を持つことが出来ます。 この「RefreshAnwserTable」は、「Answers」画面の「Reset」ボタンに押下時に呼び出されるようになっています。


パラメータ追加してみよう

質問詳細画面(Answers)は、質問一覧画面(Questions)で選択された特定の質問についての回答を一覧表示させます。
その為に質問詳細画面(Answers)は、質問一覧画面(Questions)から特定の質問ID「QuestionId」を受け渡しを行う必要があります。
まずは、質問詳細画面(Answers)に入力パラメータ「QuestionId」を追加しましょう。

  1. 質問詳細画面(Answers)を選択し「Add Input Parameter」を選択する。

    f:id:fv_yamazaki:20180814123532p:plain
    画面作成3-8

  2. 「Name」を「QuestionId」とする。

    f:id:fv_yamazaki:20180814123614p:plain
    画面作成3-9

質問詳細画面(Answers)の検索条件追加

質問詳細画面(Answers)に追加した「Input Parameter」「QuestionId」を利用して、特定の質問の回答一覧を表示するよう修正を行いましょう。
特定の質問に対しての回答を一覧表示する為に、検索条件に質問ID(QuestionId)を以下の手順にて追加します。

  1. まずは、回答一覧の取得をしている「Aggregate」の「GetAnswers」を開きます。

    f:id:fv_yamazaki:20180816130309p:plain
    画面作成3-10

  2. 「Aggregate」に条件追加を行いたい為、「Filters」を選択します。

    f:id:fv_yamazaki:20180814125045p:plain
    画面作成3-11

  3. 条件追加を行う為に、「Add Filter」を選択します。

    f:id:fv_yamazaki:20180814125050p:plain
    画面作成3-12

  4. テーブル「Question」の「Id」と作成済み入力パラメータ「QuestionId」がイコールとなる条件を追加する為、フィルター条件「Question.Id = QuestionId」を追加します。

    f:id:fv_yamazaki:20180814125053p:plain
    画面作成3-13

Link作成

質問一覧画面(Questions)にて表示されている質問から、質問詳細画面(Answers)へ遷移出来るように「Link」を作成します。

  1. 質問一覧画面(Questions)の「Widget Tree」を表示する。

    f:id:fv_yamazaki:20180816132727p:plain
    画面作成3-14

  2. 「Title」をリンクにする。

    f:id:fv_yamazaki:20180814132312p:plain
    画面作成3-15

  3. 遷移先に「Answers」を選択する。

    f:id:fv_yamazaki:20180814132316p:plain
    画面作成3-16

  4. 「Answers」に追加済みの「Input Parameter」「QuestionId」に対象Rowの「QuestionTable.List.Current.Question.Id」を渡すように選択する。

    f:id:fv_yamazaki:20180814132319p:plain
    画面作成3-17

これで一通りの画面遷移が完成です!

質問一覧画面のカスタマイズ

ここからは個別の画面の表示部分をカスタマイズしながら「OutSystems」を楽しんでいきましょう。
まずは質問一覧画面(Questions)です。

質問一覧の「Message」の「Length」は最大2000文字となっており、さすがに「Message」を全て表示するとなると長すぎます。 そこで以下の仕様を実現してみましょう。

  • 「Message」が50文字以上の場合に49文字+「…」を表示する

  
1. 回答一覧(Questions)を選択し「Widget Tree」を表示させます。

f:id:fv_yamazaki:20180824132345p:plain
画面作成3-18
 
2. 「Message」を含む「Cell」に「If」を追加、「If」の「True」側に既存の「Message」をぶら下げます。
f:id:fv_yamazaki:20180814135439p:plain
画面作成3-19

 
3. 「if」をダブルクリック選択し、条件「Length(QuestionTable.List.Current.Question.Message) <=50」を追加します。

f:id:fv_yamazaki:20180814135444p:plain
画面作成3-20

ここで利用している。「Length」関数はあらかじめ定義されている「Built-in Function」という関数です。 以下の11カテゴリがあり、今回利用したのは「Text」にある「Length」関数で文字列の長さを返す関数です。

  • Math
  • Numeric
  • Text
  • Date and Time
  • Date Conversion
  • Format
  • Email
  • Environment
  • URL
  • Miscellaneous
  • Roles

 
4. 「If」の「False」側に新規「Expression」をぶら下げます。

f:id:fv_yamazaki:20180824132429p:plain
画面作成3-21

 
5. 新規「Expression」のValueに「Concat(Substr(QuestionTable.List.Current.Question.Message,0,49),"…")」を設定します。

f:id:fv_yamazaki:20180816152228p:plain
画面作成3-22

「Built-in Function」を利用し「Substr」関数で前方49文字で切り、「Concat」関数で切り出し済み文字列と文字列「…」とを結合します。

ここでは「Expression」を利用し変数を文字列表示したり、「if」を利用し表示を切り替えたりする方法を理解して頂けましたでしょうか。
また、「Built-in Function」という便利に使える関数すでに用意されており、これらを利用する事でさまざまなことが簡単に実現できるのではないでしょうか?

質問登録画面(QuestionDetail)のカスタマイズ

質問登録画面(QuestionDetail)をカスタマイズしてみましょう。 自動作成されている質問登録画面(QuestionDetail)は、テーブルの全てのフィールドが入力出来るようになっています。 そこで以下の仕様を実現してみましょう。

  • 登録時の質問ステータスは「オープン」とする。
  • 登録日時は入力せず、現在日時を自動的に登録する。

まずは、質問ステータスの仕様を実現しましょう。

1.質問登録画面(QuestionDetail)を選択し「Widget Tree」を表示させます。

f:id:fv_yamazaki:20180821160507p:plain
画面作成3-23

 
2.「Question Status」の表示を「オープン」で固定します。

f:id:fv_yamazaki:20180814191807p:plain
画面作成3-24

 
3.「Update Date Time」を非表示にします。

f:id:fv_yamazaki:20180814192443p:plain
画面作成3-25

 
4.「Save」ボタン押下時に実行される「Screen Action」「Save」をダブルクリック選択します。

f:id:fv_yamazaki:20180814194246p:plain
画面作成3-26

5.「Valid」True下に「Assign」を追加し、以下の代入処理を追加します。

  • 「QuestionForm.Record.Question.QuestionStatusId」=「Entities.QuestionStatus.Record1」
  • 「QuestionForm.Record.Question.UpdateDateTime」= 「CurrDateTime()」

 

f:id:fv_yamazaki:20180814194301p:plain
画面作成3-27

ここでは「Screen Action」で「Assign」を利用し変数の値変更することを見ることが出来たと思います。
左辺は代入先「変数」ですが、右辺は「Expression」となっており「Built-in Function」を利用することも出来ます。

質問登録画面のカスタマイズ

最後に質問詳細画面(Answers)をカスタマイズしてみましょう。 以下の仕様を実現してみましょう。

  • 自動作成された検索機能を不要とし非表示とする。
  • 一覧はMessageだけ表示に変更し、ヘッダ表示は無しにする。
  • 質問詳細画面(Answers)のタイトル下に質問の「Title」、「Message」を表示する。
  • 質問詳細画面(Answers)から回答「Answer」の登録が出来るように変更する。

まずは、検索機能を非表示を行ってみます。

 
1.質問詳細画面(Answers)を「Widget Tree」で表示します。

f:id:fv_yamazaki:20180821162144p:plain
画面作成3-28

 
2.検索機能を実現している「Filters_Wrapper」の「Display」をFalseに変更します。

f:id:fv_yamazaki:20180816165215p:plain
画面作成3-29

テーブル表示をヘッダ無し、「Message」だけの表示に変更します。

1.「Row」下の「Message」以外のCellを削除します。

f:id:fv_yamazaki:20180816165256p:plain
画面作成3-30

2.ヘッダ表示を無しに変更します。

f:id:fv_yamazaki:20180816165318p:plain
画面作成3-31

質問詳細画面(Answers)に質問の「Title」、「Message」を追加表示します。

1.質問詳細画面(Answers)の「Preparation」を表示します。

f:id:fv_yamazaki:20180821164302p:plain
画面作成3-32

2.質問を取得する為に、「GetQuestion」を追加します。

f:id:fv_yamazaki:20180821164425p:plain
画面作成3-33

「OutSystems」では定義済みEntityについては、以下の6個のロジックが自動的に作成され「Screen Action」「Server Action」から簡単に利用することが出来ます。

  • Create[Entity名]
  • CreateOrUpdate[Entity名]
  • Update[Entity名]
  • Get[Entity名]
  • Get[Entity名]ForUpdate
  • Delete[Entity名]

  3.質問詳細画面(Answers)を「Widget Tree」で表示します。

f:id:fv_yamazaki:20180821162144p:plain
画面作成3-34

4.「Expression」を利用し「Title」「Message」の表示を追加。

f:id:fv_yamazaki:20180824132458p:plain
画面作成3-35

最後に、回答「Answer」の登録が出来るように変更してみましょう。

1.質問詳細画面(Answers)に「Answer」の「Local Varriable」を登録用に追加します。

f:id:fv_yamazaki:20180821171753p:plain
画面作成3-36

2.「Local Varriable」の名称を「Answer」とする。

f:id:fv_yamazaki:20180821171816p:plain
画面作成3-37

3.質問詳細画面(Answers)を「Widget Tree」で表示します。

f:id:fv_yamazaki:20180821162144p:plain
画面作成3-38

4.登録用の「Form」を作成、データ投入先として作成済み「Local Varriable」の「Answer」を選択する。

f:id:fv_yamazaki:20180821172543p:plain
画面作成3-39

5.登録用の「Form」に「Message」入力用の「Input」を追加します。

f:id:fv_yamazaki:20180824132524p:plain
画面作成3-40

6.登録用の「Form」に登録ボタンを追加し、新規「Screen Action」をボタン押下時のアクションとして紐づけます。

f:id:fv_yamazaki:20180824132555p:plain
画面作成3-41

7.新規「Screen Action」の名称を「Save」とする。

f:id:fv_yamazaki:20180821181447p:plain
画面作成3-42

8.「Save」で「Answer」を新規登録出来るように、「CreateAnswer」を追加します。

f:id:fv_yamazaki:20180821182212p:plain
画面作成3-43

9.「Save」で「Question」を更新出来るように、「UpdateQuestion」を追加します。

f:id:fv_yamazaki:20180824132630p:plain
画面作成3-44

10.「Answer」の「QuestionId」、「Question」の「UpdateDateTime」に「CurrDateTime()」を代入します。

f:id:fv_yamazaki:20180821184008p:plain
画面作成3-45

11.「1-Click Publish」を押下する。

f:id:fv_yamazaki:20180824140107p:plain
画面作成3-46

12.「Open in Browser」を押下する。

f:id:fv_yamazaki:20180824140118p:plain
画面作成3-47

13.ブラウザが表示されたら完成!

f:id:fv_yamazaki:20180824140124p:plain
画面作成3-48

後編まとめ

これで、簡単な「QA管理システム」がOutSystemsで作れたと思います。いかがだったでしょうか。 ここで、まだ追加しなくてはいけない機能がいくつかあります。ステータス更新や、バリデーション処理についてです。 バリデーション検証についてはまた別途記事にする予定ですが、ステータス更新については皆さんへの宿題としてとっておきます。是非試してみてください。

ここまでで、画面での表示条件の追加、「Form」等を利用したデータの登録、「Screen Action」の作成がある程度出来るようになったと思います。 ちょっとしたQA管理としては使える物が出来たと思いますが、まだバリデートなどより詳細な箇所には触れてません。これもまた別の記事で詳細を記載したいと思います。

全3編のまとめ

以上で全3編でお送りした「QA管理システム」はひとまず完成しました。いかがだったでしょうか。
新しい開発手法なのでやりにくいと感じることもあったと思います。しかし、変更などについての強さ、GUIによる理解の早さを考えれば他の開発よりもより少ない学習コストで開発に参画できるんじゃないかなぁと思っています。
また、OutSystemsは入力方法は色々なやり方があります。右クリックからの入力、プルダウンからの入力、メニューからの入力など、そのユーザの使いやすい方法で作業を行うことができます。
別の資料では別の方法を使っている場合がありますが、ゴール地点は一緒なので安心してください。
いろいろ説明をしたいところですが、どんどん記事が膨らんでしまうので、また小出しにして説明します。

まだまだOutSystemsには便利な機能があります。
今後ともどんどん紹介していくので、引き続き記事を読んでいただき、試してみてください!