モデル駆動型アプリでヘッダ、明細行のあるアプリを作ってみた

Microsoft Power Apps Advent Calendar 2020 21日の記事です。

IT長のネタ帳(参考に記載のブログ)さま、MSLearn とにらめっこしつつレストランの予約管理をイメージしてモデル駆動アプリを作ってみましたので、その手順を記事にしたいと思います。

# こんなものを作ります

![GIF 2020-12-21 17-39-18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/6f7fa05d-2769-f39e-d2f0-e41719aae77d.gif)

# 手順
　1. メニューマスタテーブルの作成
　2. 予約管理テーブルの作成
　3. 予約明細管理テーブルの作成
　4. 予約明細管理テーブルの入力用フォームの作成
　5. 予約明細管理テーブルの明細用ビューの作成
　6. 予約管理テーブルの入力用フォームの作成
　7. モデル駆動型アプリの作成

## 1. メニューマスタテーブルの作成
まずメニューマスタを作成します。
Power Apps のホーム画面から、データ>テーブルを選択し、新しいテーブルをクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/25fcfa1e-9e00-3cea-a08b-3530c0d0946e.png)|
|:--|


それから、"単価"列を作成します。

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/b16f4480-7e72-1ea2-c0d0-5011554f5ac2.png)|
|:--|


列ができたら、Excelでデータ編集をクリックし、いくつかマスタデータを作成します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/99f900ec-21b3-66cf-6d84-348e067b3521.png)|
|:--|


これでメニューマスタテーブルの準備は終わりです。

## 2. 予約管理テーブルの作成
次に予約管理テーブルを作成します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/94df6db3-d791-77d5-0592-0dcfc3c53a49.png)|
|:--|

それから、以下の列を作成します。
- 代表者名 : テキスト型
- 代表者電話番号 : 電話番号型
- 来店人数 : 整数型
- 来店日時 : 日時型

テーブルを保存し、最初に作った"ID"列の設定を"オートナンバー"変更します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/38d336c9-a95d-3fec-e12f-d053cd87c625.png)|
|:--|


これで予約管理テーブルの準備はいったん終わりです。

## 3. 予約明細管理テーブルの作成
次に予約明細管理テーブルを作成します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/08fee9c6-1874-64b0-722b-2eb06fa0fc80.png)|
|:--|


それから、以下の列を作成します。
- 数量 : 整数型

親となる予約管理テーブルとの関連付けを行うため、参照型で、"親ID"列を作成します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/c752c4a5-9a4d-54bc-752b-1864ba07750b.png)|
|:--|

品名をメニューマスタテーブルと関連付けるため、参照型で、"品目"列を作成します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/ba77fb10-c3d7-bd58-7ac7-b86dc3dfe2bb.png)|
|:--|

最後に、メニューマスタの単価と、数量を掛け算した"価格"列を計算列で追加します。
以下のように内容を入力した後、"計算またはロールアップをクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/a974838f-6295-23a7-17f4-0397d8d67f5c.png)|
|:--|

以下のような画面が表示されるので、計算式を入力し、保存して閉じます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/9e7aaf56-954b-0ea1-92bb-15089128bf42.png)|
|:--|

テーブルを保存し、先ほどと同様に最初に作った"ID"列の設定を"オートナンバー"変更します。

これで予約明細管理テーブルの作成もいったん終わりです。

## 4. 予約明細管理テーブルの入力フォームの作成
次に予約明細管理テーブルのフォームを選択し、フォームの追加で、メインフォームをクリックします。

フォームには明細入力フォームと入力します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/86c2c8f2-44c2-00f0-7bad-7c96c567b5ae.png)|
|:--|

フォームフィールドをクリックすると、左のエリアに作成した列が表示されます。
ドラッグアンドドロップでフォームを作っていきます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/52483158-222d-e3dc-59c4-e04c97d0bfd4.png)|
|:--|

親ID、IDについて、読み取り専用にします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/1e1f19dc-63b4-c518-21b3-00571e4697f8.png)|
|:--|

所有者については非表示にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/1e8f90f0-df34-5253-d6c8-a438faa124f4.png)

これで保存します。

次にフォームの設定をクリックします。
フォームの順序を明細入力フォームが上にくるようにしておきます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/efa93d7b-a1b7-2190-0dab-851efdfce208.png)|
|:--|

保存して公開、元の画面でも公開しておきます。
これで明細入力フォームの設定は終わりです。

## 5. 予約明細管理テーブルの明細ビューの作成
次に予約明細管理テーブルのビューを選択し、ビューの追加をクリックし、明細ビューを作成します

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/328aa7cf-8b01-afff-da3f-912f83b8280b.png)|
|:--|

左のエリアに列が表示されるので、ドラッグアンドドロップで以下のように並べていきます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/69201371-8ae4-91a2-059e-89c61357a706.png)|
|:--|

これで保存、公開で、ビューの作成は終わりです。

## 6. 予約管理テーブルの入力用フォームの作成
次に予約管理テーブルの入力用フォームを作成します。
次に予約明細管理テーブルのフォームを選択し、フォームの追加で、メインフォームをクリックします。

フォームには予約入力フォームと入力します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/65e259af-8822-5e66-2e2b-6d6012cc9e40.png)|
|:--|

まずコンポーネントをクリックして、"2列のセクション"、"1列のセクション"、を作成ドラックアンドドロップで配置します。
また、デフォルトで配置されている"ID"列は読み取り専用に、"所有者"列は非表示にしておきます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/efe8d117-eeb5-0d29-4542-ba429c50fd01.png)|
|:--|

"2列のセクション"に予約管理テーブルのフィールドを配置していきます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/70e09af6-3cf5-bcdb-de12-ef66dc523f3a.png)|
|:--|

"1列のセクション"に予明細管理テーブルのビューを配置していきます。
コンポーネントからサブグリッドを選択し、先ほど作成したビューを選択します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/bbf767e6-b149-88a1-68ab-f42282a617f4.png)|
|:--|

うまくいけば、以下のような表示になっているはずです。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/63ce4e80-16ea-7783-f2c6-1c1b3375d2dc.png)|
|:--|

これを保存、公開します。

うまくできているかの確認として、予約管理テーブルのデータを選択し、レコードの追加をクリックしてみます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/17791bf6-84aa-55ce-b3da-143ea6bd0102.png)|
|:--|


以下のような画面が表示できて、レコードが保存できればうまくできています。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/9026c63f-2b04-a568-ede1-595f1cf93ae6.png)|
|:--|

これで明細入力フォームの設定は終わりです。

## 7. モデル駆動型アプリの作成
次にモデル駆動型アプリの作成に進みます。
Power Apps のホーム画面から、作成>モデル駆動型アプリを一から作成をクリックしアプリを作成します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/64e1aa69-4872-cc61-947b-38308d693762.png)|
|:--|

以下のような画面が表示されるので、まずサイトマップの鉛筆部分をクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/2bb7c403-99f8-2525-cc9d-99cb4ca7cb62.png)|
|:--|

サブエリアの鉛筆をクリックし、以下のように予約管理のテーブルを選択、保存します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/d344a9be-065c-0d42-cc06-98633c42df51.png)|
|:--|

そうすると以下のような画面になります。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/b375ad77-3cb5-6ab8-2786-a4186ee4fb2d.png)|
|:--|

エンティティビューの中のテスト予約管理のフォームをクリックして以下のように先ほど作成したフォームを選択します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/a90a720c-012c-32ab-d076-2ec636d99f97.png)|
|:--|

これで保存して、公開、再生してみます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/90b5ffa9-43ea-a80a-3f71-ca0f304557e6.png) 
|:--|

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312282/a2e2058f-3d9a-63f6-d18b-46df95742534.png)|
|:--|

動きました！これで完成です！

# まとめ
まだまだモデル駆動としての要素が全然足りない、ビジネスフローもグラフもビューも設定してできていませんが、いろんなことできそう、おもしろそうと思える部分までは入り込めた気がします。
どういう風に使ってほしいのか理解するのにそれなりの時間がかかりますが、その使い方に合わせられれば非常に優秀な気がするので、今後も勉強を続けていきたいと思います。

# 参考
以下のサイトがとても詳しく記載があり非常に助かりました。私も見習って、たくさん恩送りしていきます！

IT長のネタ帳
> https://www.d3654.be/