【OutSystems】基礎編：エンティティと画面を作成する

# 対象
- OutSystems を初めて触る方

# 目的
- [OutSystemsの認定試験](https://www.outsystems.com/ja-jp/certifications/)である「Associate Reactive Developer (OutSystems 11)」の受験にあたり、基礎的な画面作成手順を復習する
:::note info
※ なお、OutSystems は[オンライントレーニング](https://learn.outsystems.com/training)が充実しているのでオススメ。
:::

# 使用するツール類
- OutSystems Service Studio 11
- Excel for the web (Microsoft 365 無料版) ※通常のExcelでも可

# 完成後イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/a1ff87e4-66df-fe4e-4d97-33a2459f2afd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/74a5f24f-5752-4f2d-3e62-9412ae3a0a15.png)

# 手順

###  1. Service Studio で新しいアプリケーションを作成
(ボタンを押していくだけなのでスクリーンショットのみ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/7c95bb81-c10d-9409-e8d6-9c537ee24553.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/2c8eb672-7278-f8c4-99b7-fe6eb3a9c4d3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/f5a94e5f-4877-f6a0-9e53-88976c41968d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/91f50f25-f45d-12d0-d74f-fc8f7c5f14b6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/0967ca7d-806e-fd6e-4173-137872ee9050.png)

空のアプリケーションが作成された状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/61672f6d-44fa-0664-cb09-3734cbd7a214.png)

###  2. Entity とデータの作成
Excel でデータを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/7f7c1dcd-17e7-f408-389e-abad0cff08d9.png)

Dataタブ > Entities > Database を右クリックし、 Import New Entities from Excel をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/589b71cf-0223-7327-b147-ef30a0059d9f.png)

Excel のシート名(ここでは「Employee」)が Entity 名になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/43bf2263-2651-add2-2a90-b1e7bf55be9c.png)

Import ボタンを押すと Entity が作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/e7c7ba70-67d0-6906-66d5-a1441e4f6785.png)

型や桁数は OutSystems によって自動で選択される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/1ff57e3f-8866-9cd5-514e-41ba4dd4db20.png)

Publish を行うと、データが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/56ab01e1-9afa-7eb2-5332-32b844ce1a19.png)

<details><summary><b>補足 (Excel 上のデータを変更したいとき)</b></summary>

Excel を読み込んだ際、データを登録するための Timer、Server Action、Structure も同時に作成される。
Server Action を確認すると、データが存在しない場合のみ Excel から登録していることがわかる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/84736d0b-17ce-dbfd-48ea-c053d25b224b.png)

- データを変更したいとき
データをすべて消してから、 Change Resource を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/32366361-705f-2ead-a3fa-04f5485a3a7c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/b87bddc2-e848-f3f6-8677-f5deaf095272.png)

- 列を追加したいとき
Excel 上で列を追加する。(ここでは「DepartmentCode」)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/1cfcf89c-70e2-a5c2-c892-2b77c5c875d1.png)
「Add Entity Attribute」で「DepartmentCode」列を追加する。(新しいファイルで Change Resource するだけでは列が追加されないので、手動で追加する。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/afea9e53-a006-97e2-0a6f-21704b1664c3.png)
Resources にあるデータファイルを削除する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/b0f5136d-bc0c-0c93-8aab-4f845dd7f7e4.png)
Update Action to Bootstrap Data from Excel で、列を追加した新しい Excel ファイルを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/673b9ee4-f9c5-3357-5a6a-3d189942045e.png)
DepartmentCode が登録されていることが確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/8f457c92-dbd4-7292-9eca-fe85a9371514.png)
</details>

###  3. 画面の作成
Interface タブを選択し、 MainFlow を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/1ae8b20b-0602-6934-83d5-d6908ec3f749.png)

Dataタブにある Employee をドラッグ＆ドロップする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/178aeecb-d897-11ff-98ed-ab23d510f400.png)

一覧画面と詳細画面が自動で作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/63d156b9-6b04-448f-0269-4b0b7c6cf5b7.png)

今回の目的を達成するにあたりログインは不要のため、一覧画面と詳細画面の Roles > Anonymous にチェックをつける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/600614ac-a2a4-97ba-405e-6b0d59a25db7.png)

ブラウザで表示して確認する。
基本的なメンテナンス機能は自動で実装されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/bfb8af3f-8a38-4e10-422e-162aa8179efc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/91fd0544-050e-9a58-3591-74c1101e4222.png)

###  4. 日本語化
画面上のラベルを変更することでも対応できるが、ここではリソースファイルを使用した多言語Webアプリケーションを想定する。
Export > Language Resouces To Excel でリソースファイルをダウンロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/280fee81-cca9-cb16-63b9-24b34571d150.png)

ダウンロードした Excel ファイルに ja-JP 列を新しく追加し、日本語の内容を記載する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/a6cbe4d8-aeec-ee5b-9613-c548f2c7c13c.png)

Multilingual Locales を右クリックし、 Import Language Resouces でリソースファイルを読み込む。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/2ffaf84f-8092-0935-a43e-69e54a68793b.png)

ロケールの設定を日本語にするため、 Employees 画面の On Initialize アクションを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/c498caf5-4f1e-5fd1-fa0e-65d569814bad.png)

On Initialize アクションで、 SetCurrentLocale アクションを呼び出し、引数に "ja-JP" を指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/2eb0c3ef-71c9-043a-f432-c25430240d0a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/e72997c1-93f8-0933-609a-9fbab3feffa9.png)

ブラウザで画面を表示し、日本語化されたことを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/a1ff87e4-66df-fe4e-4d97-33a2459f2afd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/74a5f24f-5752-4f2d-3e62-9412ae3a0a15.png)