Mendix始めてみました（４）

[前記事](https://qiita.com/lacky-lacky/items/a254d835d64eee5521bd)

# 初めに
やはり、ページを動かすとなると、DBとの連携が欲しいですね。
今回はＤＢ接続ができることを目標に記事を書きたいと思います。

# 繋いでみる
Database connectionというのをMendix App Storeから
ダウンロードしてきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/c98c22a1-48bd-2f73-4006-9d8b3adcdf75.png)

インストールしたら、次にpostgreSQLと接続設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/60bcd128-66b9-6255-ace4-971021b183ab.png)

# データを取得してみる
- 画面の表示項目を作成
ダウンロードしたDatabase connectionに
Domain Modelがあります。そこにテーブルを作成します。
右のtoolBoxからEntityとAnnotationを持ってきましょう。
EntityはDBのエンティティ、Annotationは何のエンティティにするかのメモです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/8ecf3b62-d31b-ffae-fdfa-addd54dd711e.png)
中身はこのように作りました。
簡単なユーザ情報を持ってるとイメージしたテーブルです。

|  |  |  |
|:-:|:-:|:-:|
|userId   | ユーザID | String  |
|UserName | ユーザ名 | String  |
|UserPossitionCode   | 所蔵コード  | Integer  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/03bb6490-3694-b034-6cb6-a001fb5581e6.png)

こちら、pgAdminのuserInfoテーブルです。
先ほど、Mendixで設定したものは、こちらのテーブルに合わせて
設定をしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/e457505e-d327-7c61-dcf3-6b485bc04361.png)

- DBを通してデータを取ってくるマイクロフローを作成
前回作ったリストページ01を開くためのマイクロフローに
CreateObjectでNewUserInfoというオブジェクトを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/32f7eed6-d017-a989-5905-c3ad3a3ea9cd.png)
SELECTからUserInfoエンティティを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/2f21a226-9bae-8879-b111-b1f55c17c172.png)

次に実際にデータを取得するマイクロフローを作成します。
処理としては以下の通りです。
```
1;ログを出力（任意）
2:空オブジェクトを作成（userInfoテーブル）
3:SQLを実施。
4:実行結果を作成した空オブジェクトに入れる
※空オブジェクトの作り方は前画像の
オブジェクトを作った時と同様です。
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/9b0a67f5-a9dd-db4f-8023-ec7d596a36fc.png)

３～４のExecute queryでは、
SQL（当環境はpostgresで実施しています）に必要な環境と
SQL文を直接書いて必要なデータを取ってきます。

:::note info
これら、手入力をしていますが、関数みたいな形で
入れる方が何度も利用する的な意味では便利です。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/2eff5c2a-1305-8fac-e8fd-48fa5f963c97.png)

実際にデータを取得して表示してみたいと思います。
こちらが前回作った画面ページです。
以下のように作成したいと思います。
```
1:data Viewを使ってData sourceにuserInfoを呼び出します。
2:Edit Data Grid にUserInfoテーブルのカラムを設定します。
3:1,2を設定した画面が以下の画像の通りになります。
```

- １
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/8930ce4c-8e2c-7532-a10a-04ccad59ae4b.png)

- ２
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/0f4a9c83-fada-f08e-a78e-56ec2b0b29f0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/71e4346d-c597-7aa5-5246-57bce63d7db9.png)

# 動作確認
では、実際にここまで作ってみて動作確認をしてみます!

- 1 userInfoテーブルに以下の値をセット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/4226d7e5-fd4b-0a33-9098-5e5f4adee18e.png)

- 2 リストページ01をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/1df87cca-1e61-5ebc-55cd-778379822c32.png)

- 3 値が取れたことが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/50dd23da-04a5-6f3d-9d11-3ffc1cc6949e.png)

- 4 デバッグで確認
getUserInfo のgetUserInfoの中にSQLから取ってきた値が
格納されたことが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/0abdd21c-b062-60d2-a86f-29725f029199.png)

# まとめ
今回はpostgreSQLを使ってデータの取得をして
それを画面に表示する処理を作ってみました。
最初は時間がかかるかもしれませんが、
慣れれば意外と簡単にデータを取得することができることが分かりました。

# 使用環境
postgreSQL
Mendix Studio Pro