Power Apps でデータを一覧表示して、詳細表示、編集、削除機能を実装する


# はじめに

Power Apps のギャラリーコントロールでデータを一覧表示することが可能です。

https://qiita.com/Takashi_Masumori/items/63db56c23a83f25b19ee

:::note
ギャラリーコントロールの基本的な操作については上記記事を参考にしていただけると幸いです。
:::

そして、表示されているデータに対して、詳細を表示する、編集する、削除する操作を行いたいという相談をいただくことが沢山あります。

今回は、改めてとなりますが、こちらの方法を紹介します。

# ギャラリーコントロールとフォームコントロールの用意

まず、以下のようにギャラリーコントロールとフォームコントロールを用意します。そして、ギャラリーの`[Items]`プロパティとフォームの`[DataSource]`を同じデータソースにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/706bccbf-5073-e8e2-effe-b28c5ab2354b.png)

# ギャラリーにアイコンを配置

以下のようにギャラリーにアイコンを配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/38c4ce10-c3bd-9dde-5e03-8c5c1c4a2b89.png)

# 詳細表示処理

まずは、詳細表示を意味するアイコンの`[OnSelect]`プロパティに以下のような処理を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c4d9b57d-e418-7163-d810-12d28c156c25.png)

```
Set(gblSelectedItem,ThisItem);
Set(gblFormMode,FormMode.View)
```

フォーム側の`[DefaultMode]`プロパティを上記で設定した変数 (gblFormMode) に変更します。
また、`[Item]`プロパティも以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c3876733-0f5f-578b-d285-5279a7ca7392.png)

これにより、詳細表示アイコンを選択すると、フォームに表示されるアイテムとフォームのモードが View に変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/094400d7-edcc-41f2-9f12-a0d9e8b6935f.png)


# 編集処理

次に編集の処理を追加します。こちらも、詳細表示と同じように、アイコンの`[OnSelect]`プロパティに以下のような処理を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fdc79b67-d754-a62f-1087-0107336fc656.png)

```
Set(gblSelectedItem,ThisItem);
Set(gblFormMode,FormMode.Edit)
```

これにより、ギャラリー内で編集アイコンを選択すると、フォームに表示されるアイテムとフォームのモードが Edit に変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/58a04181-f30b-f158-b867-a8ac7df3e0eb.png)

あとは、ボタンを配置し、`[OnSelect]`プロパティに以下のような処理を書きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9efc9d5d-8ec3-ba7b-efd8-b7c6ab378a8f.png)

また、ボタンの`[Visible]`プロパティに以下のような処理を書いておきます。これにより、変なタイミングでボタンが押せないようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/87af9ef7-3317-34d6-3e26-4b0f9cceb9e8.png)

```
If(Form1.Mode=FormMode.Edit,true,false)
```

# 削除

まず、削除前に確認を挟むようにするため、以下のようなポップアップを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/66a56e59-1fc2-1d26-8f8b-85db85f257da.png)

作成の仕方について、まず、外側のコンテナーの塗りつぶしを黒にして、透明度を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/3c83127e-ad79-d5ac-4e85-e8ac171d2d75.png)

こちらの外側のコンテナーの`[Visible]`プロパティを`gblShowPopup`という変数にします。こちらの変数を利用して、表示、非表示を切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/0861dce2-31b9-2b6b-3273-21883b95890b.png)

内側のコンテナーについて、塗りつぶしを白にして、以下のようなイメージでボタンやラベルを配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6aa40379-634b-4ec8-a017-8df838669f72.png)

削除ボタンの`[OnSelect]`プロパティを以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c8c161f1-5d5d-d771-f74e-6e81bf771878.png)

```
Remove(アプリカタログ,gblSelectedItem);
Set(gblShowPopup,false)
```

また、キャンセルボタンの`[OnSelect]`プロパティを以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7d0ab480-4301-95b0-31bb-187995025d07.png)

```
Set(gblShowPopup,false)
```

最後に、ギャラリーの削除アイコンの`[OnSelect]`プロパティを以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/52ad662f-cca3-b2cc-fe23-f7b94d686e07.png)

```
Set(gblSelectedItem,ThisItem);
Set(gblShowPopup,true);
```

こちらで、ギャラリーで選択したアイテムを削除することが可能です。


:::note

編集アイコンや削除アイコンの`[Visible]`プロパティにて、以下のように自分が登録したデータの場合表示するようにする設定をしておくとよいかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/05e0ab52-e366-70a8-4234-7dcbf82280f6.png)

:::

# まとめ

今回は、Power Apps でデータを一覧表示して、詳細表示、編集、削除する方法について改めて紹介しました。詳細表示、編集、削除機能は基本的な機能だと思いますし、個人的にも実装したいという相談をいただき説明することが多いので、改めてまとめてみました。少しでも参考になれば幸いです。