outsystemsリスト画面を作りします

今回はOutsystem ServiceStudioで簡単なリスト画面を作りします。

・「New Application」をクリックして、「Start from scratch」、「Tradition Web」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/327f0c6d-0365-4c88-518f-298352a64200.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/924ede77-10e3-2048-4e7d-25f21c81d749.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/4a51fb4e-0c5f-3e31-212c-100607f4c67c.png)
AppnameにはListSampleを入力して、Create Appをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/08f4785a-3f42-cffc-0a6d-b1acb420fd4a.png)
module typeは[Tradional Web]であるかを確認してから「CREATE　MODULE」ボタンをクリックして、MODULEを作りしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/ec59a868-3ff7-e1e0-4181-d284e22bf0f2.png)

ExcelファイルにPersonテーブルとデータを準備します。
テーブルの定義は下記です。
列1　UserName
列2　Birthday
列3　UserPassword

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/4980c278-23a5-3371-1362-48c4007ef2e6.png)

ExcelファイルをOutsystem ServiceStudioにドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/2ec09fb4-9e9c-13c3-47a7-b764978299e2.png)

「Import」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/813cee90-f89f-d7e2-ca63-b2c6076ef005.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/76f9c577-d95a-094e-3162-558529717a1f.png)

Outsystem ServiceStudioは自動でExcelファイルを導入してくれたが、導入したテーブルの名称は【Sheet1】となっています。原因はExcelファイルのシート名は【Sheet1】です。
手動で名称を【Sheet1】から【Person】に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/84cb4b0d-e50c-b2af-c86b-58f7e2352e2f.png)

Web Screenを Toolboxからキャンバスにドラッグ&ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/a1cdad9d-e680-bbd5-3636-ad9b5ff8e780.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/50a1e418-873c-5a8f-977d-5e7b2bd3509c.png)

Screen nameに画面名[ListGamen]を入力して、Create Screenをクリックして、画面を作成します。
作成した画面[ListGamen]を右クリックして、「Add Preparation」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/c2674aab-5f5e-0493-19d7-9795e9fa5af3.png)


Aggregate を Start と End の間のフローにドラッグします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/ebe239b1-a3e4-ec29-2e2a-78ae754e16e3.png)

Aggregate1 をダブルクリックして Aggregate エディタで開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/2c586440-e01f-def2-bfe6-41b6d5e7bb8e.png)
［ Data］タブに切り替え、 Person エンティティをキャンバスにドラッグ&ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/a6a12ffc-428a-a2cd-ae20-fa5d503c8377.png)

これにより、データベース（ Person エンティティ）からすべてのPersonを取得する
Aggregate が設定されます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/56de7160-f8b7-44dc-1c7c-f6b9f5617f7f.png)

「Table Records」を画面「ListGamen」のMainContentエリアにドラッグ&ドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/9cb3f17c-32cd-580d-5efc-881da8569787.png)

「Table Records」のSource RecordListを「GetPersons.List」で指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/7d5fcb6d-2bc0-338d-ff0b-05daa7e0917a.png)

「Table Records」のHeader Rowを展開します。Header Rowに表示したい明細のヘッダを追加します。ここは「UserName」と「birthday」「userPassword」を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/73680a1b-d30d-5558-24aa-4c328a4b83df.png)

「Table Records」のRowを展開します。Rowに表示したい明細に三つ「Expression」をドロッグ＆ドロップします。「Expression」のValueは「TableRecords1.List.Current.Person.UserName」
「TableRecords1.List.Current.Person.Birthday」
「TableRecords1.List.Current.Person.UserPassword」を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/bfb2e60c-04af-93dd-c13d-3b30b77ca968.png)

画面にある1アイコン(1-click Publish)をクリックして、コンパイルなどを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/5d15f12e-5587-c5fc-05fc-f4bff2fcf8d5.png)

コンパイル完了したらOpen In Browserアイコンをクリックして画面を動作します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/98f3ef5f-0838-078d-23c7-c42be646a8ea.png)
これで簡単なリスト画面を完了しました。