PL-200 学習メモ (8) : モデル駆動型アプリ（ビュー、グラフ、ビジネスルール、コマンド）

# はじめに
この投稿は PL-200: Microsoft Power Platform 業務コンサルタントの学習をした内容のメモです。

投稿の一覧は以下のリンク先にあります。

https://qiita.com/atsmin77/items/f25bd707921c421cee03

# 前の投稿

https://qiita.com/atsmin77/items/d9f78c7c7a2f31ac716d

# ビュー

テーブルにビューを作成することで、アプリ側に表示する列、順序、フィルタ条件などを制御することができます。

ビューには以下の 3 種類があります。

| 名前 | 説明 |
|:-:|:-:|
| 共有ビュー (Public View)  | アプリを使用する全ユーザーが利用できます。   |
| システムビュー (System View) | アプリが依存しているビューで、管理者のみが編集できます。  |
| 個人用ビュー (Personal View)  | 各ユーザーが作成できるビューで、作成したユーザーにのみ表示されます。  |

カスタムテーブルを作成すると、既定で以下のような 2 つの共有ビューと 4 つのシステムビューが作成されます。 

## システムビュー

| 名前 | 説明 |
|:-:|:-:|
| 簡易検索 (Quick Find) ビュー  | [Quick Find](https://learn.microsoft.com/ja-jp/power-apps/user/quick-find) で使用されるビュー  |
| 高度な検索 (Adbanced Find) ビュー  | [Adbanced Find](https://learn.microsoft.com/ja-jp/power-apps/user/advanced-find) で使用されるビュー  |
| 関連 (Associated) ビュー   | 関連タブ (リレーション) で使用されるビュー  |
| 検索ダイアログ (Lookup) ビュー  | [検索ダイアログ](https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/model-driven-app-glossary#lookup)で利用されるビュー  |

    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/4699d215-9083-8c9c-8cce-924483563c2b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/07193204-4382-57cc-bcb8-93a10a1c2136.png)

## ビューの作成

[新しいビュー] から共有ビューを作成することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/29bf9e57-49e0-59d4-31d1-004001c19517.png)

## 列の追加

表示する列を左から選択して、順序を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/3ab2b8a2-840b-9243-d8cd-dae01f6734e6.png)

[関連] タブからリレーション先のテーブルの列も追加することができます。
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/4e841590-00f9-8a6e-3bd6-53840f272a67.png)

## フィルタ条件

[フィルターの編集] からフィルタ条件を設定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/f80e0052-e8a9-8617-310b-47a1f57e8e52.png)

[行を追加] から AND 条件を追加します。OR 条件は [グループの追加] からグループを追加して、[または] (OR 条件) を選択することで指定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/f7057254-c62b-6f11-b5b8-55fc8bee4f97.png)

ビューを [保存して公開] すると、アプリから利用できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/71a9f116-b6f9-f7ea-7f21-f33681a68904.png)

※ ビューはキャンバスアプリからも利用できます。ビューを利用すると複雑なフィルタ条件を数式で書く必要が無くなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/e850b31b-ecbc-86b0-cc7d-88b7b0d1d22d.png)

https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/create-edit-views

## 編集可能グリッド

以下の手順で "編集可能グリッド" を有効化することで、アプリのビュー上でレコードの編集を直接行うことができるようになります。

### 編集可能グリッドの有効化

1. [詳細設定] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/01782bd2-21c3-b803-7a4b-26bcbbc60909.png)
2. [設定] - [カスタマイズ] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/08f8b759-88a1-cf22-d5f7-400a60d321a7.png)
3. [システムのカスタマイズ] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/98cd4f6e-8db1-a997-465f-2cd3479e0448.png)
4. [コンポーネント] - [エンティティ] から対象のテーブルをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/c7aa542b-1e50-7525-fdb8-294faab409f4.png)
5. [コントロールの追加] - [編集可能グリッド] を選択し、[追加] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/1b914132-2ba4-8717-38bf-2bf27c3b074d.png)
6. [Web] [タブレット] を [編集可能グリッド] に変更し、保存して [公開] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/b9f22f20-392b-ffbd-0e6d-87acb36c38e6.png)

### 編集可能グリッドの利用

編集可能グリッドを有効化すると、アプリのビュー上でレコードの値を直接編集できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/0f41847b-c1be-3878-0716-1958c9f912ab.png)

https://learn.microsoft.com/ja-jp/power-apps/developer/model-driven-apps/use-editable-grids

## 個人用ビュー

個人用ビューはアプリの画面からユーザーが作成します。

1. ビューの画面で [列の編集] や [フィルターを編集する] からビューを任意に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/d79ef758-f1fc-c98e-fcd4-5ff4b03ce537.png)
2. [新しいビューとして保存] から個人用ビューとして保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/2781c670-d046-c3b7-0e99-0315a2988ee8.png)
3. 作成した個人用ビューはアイコンから識別でき、[ビューの管理と共有] からほかのユーザーに共有することもできる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/e5bfdf1b-bf36-5568-46aa-23a9bd67e464.png)

# インポート・エクスポート

データを Excel ファイルのテンプレートをエクスポートして、Excel 上でデータを編集しインポートすることができます。

1. Excel テンプレートをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/b2a4a0ba-41fd-4baf-bd36-d0097ccfaf25.png)
2. Excel 上で編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/c0b1bef7-33cc-aed3-935d-54fe7ed6f036.png)
3. Excel ファイルのインポート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/07d75a35-e041-208f-9f6a-23d335b4d382.png)
4. マッピングの確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/acf11710-a512-df81-e453-d21616056d4b.png)
5. 列のマッピングを確認し、インポートを完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/0d5c9757-391c-a682-a9e7-5c751922cde2.png)

※ Excel のほかには CSV / XML ファイルをインポートすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/7a95134b-4ad6-247e-a11a-5b9732067d42.png)

https://learn.microsoft.com/ja-jp/power-apps/user/import-data

https://learn.microsoft.com/ja-jp/power-apps/user/export-data-excel

# グラフ

テーブルに作成したグラフはアプリ上で表示することができます。テーブルに作成したグラフ（システム グラフ）はアプリを利用する全ユーザーが表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/43b17630-3671-2bc4-901d-eceba0ae8816.png)

グラフを追加するビューや使用する列を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/67e0dbf9-2d13-71ca-4538-474902ec2c9c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/4473326a-58b0-4e78-92b2-58e807db1bf4.png)

ユーザーが自身でアプリから個人用のグラフを作成することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/a70cc32c-3ba4-acee-7778-85069bfc638b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/e62fd405-0cbb-1fda-9f60-3fe91316ac1c.png)

https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/create-edit-system-chart

## ダッシュボード

複数のグラフを配置したダッシュボードも作成することができます。ダッシュボードもグラフと同様に全ユーザーが利用できるシステム ダッシュボードと、個人用ダッシュボードがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/8a3869ef-af69-5f89-e033-8f817ce8fa60.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/94e2f99f-bd01-58c7-0b80-610d21edb262.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/dad37e8c-a36f-1f79-339c-4ea478bf559c.png)

https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/create-edit-dashboards

https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/configure-interactive-experience-dashboards

# ビジネスルール

テーブルにビジネスルールを作成することで、列の値に応じて項目の表示を切り替えたり、レコメンデーションを表示する等のロジックを組み込むことができます。

1. [ビジネスルール] を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/5859636a-55f7-e8c3-b4ae-4ab388a46ef0.png)
2. 条件の [プロパティ] に列や条件式を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/b4e6590c-3b37-9515-6f28-90b115391a57.png)
3. [コンポーネント] タブからアクションをドラッグ＆ドロップで追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/865d87e7-c636-12ff-a032-d4ec1b9f5d58.png)
4. 追加したアクションの [プロパティ] を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/4c8f6ccd-182d-cb22-c32c-bdf037fd45e5.png)
5. ビジネスルールを保存して、アクティブ化する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/7419becd-f3f5-85bd-eaf9-dc7bb95de3f3.png)

::: note info
右上の [スコープ] からビジネスルールのスコープを選択します。スコープによってビジネスルールがどのタイミングで実行されるのかが変わります。
:::
| スコープ | 説明 |
|:-:|:-:|
| エンティティ | サーバー側でデータがテーブルに保存される際にビジネスルールが実行されます。キャンバスアプリ、モデル駆動型アプリの両方から利用できます。  |
| すべてのフォーム | クライアント側のフォームでビジネスルールが実行れます。モデル駆動型アプリでのみ利用できます。  |

* エラーメッセージの表示

[エラーメッセージの表示] アクションでは入力項目のバリデーションが行えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/fa915342-c54e-04d9-349d-a300b4baf6c1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/020474ba-74ee-6b14-b819-458a7403dec7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/abc123cc-e516-b368-823d-153b3b22610d.png)

* レコメンデーションの表示

[レコメンデーション] のアクションを利用すると、入力された項目の値に応じてメッセージを表示することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/bbe5da09-c638-9fdc-4125-240716fdcf15.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/dc57dede-084c-6c7c-72cf-47d1db4b918d.png)

https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/create-business-rules-recommendations-apply-logic-form

# コマンド

アプリの上部に表示されているコマンドバーにコマンドを追加したり、内容を変更することができます。
1. ページの編集画面で [...] - [コマンド バーの編集] - [新しいタブで編集する] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/92ccc1c4-9273-326f-c9df-b78aa2a8637c.png)
2. 編集するコマンドバーを選択し、[編集] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/fd1fdf4d-87fe-1f2d-6cad-5f5c488bdfb3.png)
3. [新規] からコマンドバーに追加するコントロールを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/468f8de4-d8d7-bcb4-3571-4a26f7efa523.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/310edbcc-b856-87bc-060d-c5b86550dc15.png)
4. コマンドの [アクション] を [計算式の実行] にすると、キャンバスアプリと同様の Power Fx を利用できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/ff6fc9db-aa4c-f1d3-a4c0-f19573130497.png)
5. [保存して公開]、[再生] から追加したコマンドを確認することができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/0d2438e7-517b-2bad-4d66-971c24b20553.png)

::: note info 
表示しているデータの情報は以下の書式で参照することができます。
```
Self.Selected.Item
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/61a64abe-0d4e-3c9d-fc7f-8b11afa3719e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/99062e5f-4474-df15-f3bf-38e64d13572c.png)
:::

* コマンドで利用できる Power Fx の例

| 名前 | 説明 |
|:-:|:-:|
| Notify  | 画面上部にメッセージを表示します、情報、警告、エラーなどを指定できます   |
| Confirm  | 確認ダイアログを表示します   |
| Navigate  | 画面を遷移させます  |
| Patch  | データを更新します  |

https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/use-command-designer

https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/commanding-use-powerfx

# 次の投稿

https://qiita.com/atsmin77/items/36cae322b7b002230734