outsystems画面間の遷移

今回はOutsystem ServiceStudioでDetail画面を作成して、リスト画面からDetail画面に遷移できる機能を実装します。
Interfaceタブで、Add web Screenをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/11d642f2-bba5-0983-05de-cd4ce83c9b3a.png)
画面名にPersonDetailを入力して、Create Screenをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/f2fabcd7-3c37-a48f-05a0-9697b1e40663.png)
PersonDetail画面で、右クリックして、Add Input Paramaterをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/f114b3f2-1baa-53a3-7b95-c8dc499a0fdb.png)
Input paramaterをpersonIdにネーミングします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/600e1576-40cd-f19d-0728-30c865e0446a.png)
PersonDetail画面で、Add Preparationをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/0118b4db-fb86-39b2-873a-62dc23170674.png)
AggreateをPreparationに追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/421db138-bcc6-6c35-8def-bd6d15940c87.png)
Preparationをダブルクリックして、左クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/272e0363-d7f7-e3ec-51f6-618db82def69.png)
Select SourceダイアログにPersonを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/958c1f7f-ab1c-6a6d-6e10-9b3e5514ea12.png)
Filterタブをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/90c621ff-d2ea-562a-b41b-acc6a8cb4139.png)

AddFilterをクリックします。

Aggregateの条件「Person.Id = personId」を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/8c8613a3-9413-0b8d-69be-a80967846372.png)

これで、PersonDetail画面の初期処理で、input引数personIdでPersonデータを取得処理を実施完了です。
次はデータの表示です。
PersonDetail画面でDBから抽出データのPersonデータを表示します。
Label widgetを画面に追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/792c057e-a460-591f-ce36-725a68d1e3f9.png)

このlabelに、上記DB抽出のデータを表示します。
Valueの↓をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/6b266ef7-2e3e-f05b-05f7-d860b758835a.png)

Expresseditorに下記を入力します。
「GetPersonById.List.Current.Person.UserName + " " + GetPersonById.List.Current.Person.Birthday + " " + GetPersonById.List.Current.Person.UserPassword
」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/8db0ca83-961d-b7e1-13e6-4d858577e6d0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/76a73322-8ac8-6d8f-172e-419ed7d13879.png)

ListGamen画面に戻ります。
明細に新規列を追加し、その列にボタンを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/845af85d-2c97-7467-4c29-ff10e8db03a7.png)
DestinationにPersonDetail画面を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/90b2799c-306e-f847-f675-696965d2b337.png)
Input引数personIdは” TableRecords1.List.Current.Person.Id
”を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/d43946a4-9b9f-c410-b5a8-086045f7faa6.png)

最後は1-Click Publishして、テストします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/7d33cdd3-6f9e-4d84-e28f-6684a1acb565.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209998/ed951a26-f686-b1ba-4bfd-2b4ff446343a.png)