2025.1.6 2025.1.10

【Power Apps】一時的なデータの保存のためのCollectionの使い方をマスターしよう！

2025 1/10

Power Apps を使ったアプリ開発において、一時的にデータを保存したい場面は多くあります。

たとえば、ユーザーが入力した値を一時的に保持したり、フォームのドラフトを保存したりする場合です。

そのようなケースに便利なのが Collection（コレクション） です。

本記事では、特に、一時保存のデータと、すでにデータベースに保存してあるデータをGarallyに表示したい場合で、かつ、一時保存のデータを一括でデータベースに保存する場合を解説します。

私自身、ネットで調べても的確な記事が見つからなかったため、皆さんの参考になれば幸いです。

また、本記事では分かりやすさのため、一時的なデータとデータベースにあるデータは別々に表示してます。

＞＞ホワイトペーパー「PowerAppsが理解できる3点セット」をDLする

＞＞開発・内製化支援サービス資料をダウンロードする（無料）

ホワイトペーパー
Power Apps が理解できる3点セット

【下記の３点の資料が無料でダウンロードできます】

Powe Apps 活用事例集
【MS365で使える範囲も分かる】PowerAppsのライセンス早見表
【担当者のスキルレベルや導入の進め方から判断！】PowerPlatformで内製化をすすめるためのロードマップ

概要

今回作成するアプリケーションの概要は以下の通りです。

左上のフォームでデータをまず一時的に保存する。一時的に保存されているデータは”dispcollection”に表示され、編集、削除ができる。その後、「データベースへ」というボタンのクリックで、それらのデータはテーブル１(Dataverse)に送信される。

データ構造

まず最初に今回使用するデータ構造についてまとめておきます。

一時的な保管場所のcollectionとして、tempcollect、一時的なデータの表示用に”dispcollect”、メインのデータの保管場所として”テーブル１”を使用します。

“data”は今はなんかあるんだなという理解でOKです。

作成手順

実際に作成しながら理解していきましょう。

1. dataverseの作成

まず初めにテーブルを作成します。このアプリケーションの根幹の構造です。

今回は”名前”と”好きな食べ物”の列を作成しました。

2. 画面の作成

以下の画像のように要素を画面に追加してください。

このとき、フォームとテーブル1（画面右の垂直ギャラリー）には先ほど作成したDataverseをデータソースとして設定しておきます。

また、dispcollectionの垂直ギャラリーには編集ボタンと、削除ボタンを追加しておきます。

3. フォームの作成

フォームの内容を送るボタンを設定します。

buttonのOnSelectを以下の内容にします。

Collect(tempcollect,{名前_:DataCardValue3.Text,好きな食べ物_:DataCardValue4.Text});
Collect(dispcollect,Form1.Updates);
ResetForm(Form1);
NewForm(Form1)

これで一旦、tempcollectとdispcollectにデータを追加できるようになりました。

ここで、dipcollectionに表示するデータを設定しておきましょう。

dispcollectionのItemsを”dispcollect”としてください。

4. データベースへの送信ボタン

tempcollectの内容をdataverseへ送ります。

データベースへ送るボタンのOnSelectを以下のように設定してください。

ForAll(tempcollect,Patch(テーブル1,Defaults(テーブル1),{名前:ThisRecord.名前_,好きな食べ物:ThisRecord.好きな食べ物_}));
Clear(dispcollect);
Clear(tempcollect);

tempcollectの要素を一つずつテーブル１（dataverse）に追加します。その後、dispcollectとtempcollectの内容をクリアしています。

この時点で、データを一時保存後にdataverseに送ることができるようになったと思います。

しかし、まだ、一時保存のデータを編集、削除ができないので、それらの機能を実装していきます。

5. 一時保存データの削除

以下のコードを削除ボタンのOnSelectに設定します。

Clear(tempcollect);
Remove(dispcollect,ThisItem);
ForAll(dispcollect,Patch(tempcollect,Defaults(tempcollect),{名前_: ThisRecord.名前, 好きな食べ物_: ThisRecord.好きな食べ物}))

表示されているのはdispcollect内のデータのため、tempcollectを操作することは困難です。一方、dispcollectは上記のRemove関数を使って指定のデータを簡単に削除することが可能ですよって、ここではdispcollectから指定のデータを削除し、tempcollectは再度設定し直すことで更新します。

6. 一時保存データの編集

初めにデータを登録したフォームで編集ができるようにします。

編集ボタンのOnSelectに以下のコードを記載します。

EditForm(Form1);
Collect(data,ThisItem);
Remove(dispcollect,ThisItem);
Set(item,true);

編集対象のデータを編集後再度保存する際、今回の実装においてdispcollectにデータをそのまま残しておくと編集後に編集前のデータと編集後のデータが両方残ってしまうため、Removeするコードを入れています。しかし、編集前にRemoveしてしまうため、そのままだと編集対象のデータが消えてしまいます。よって、ここではdataという変数に編集対象のデータを仮置きします。

また、新たなデータの追加ではなく、データの編集であることを明示するために、itemという変数をTrueにします。

続いて、formの”Item”を変数itemがTrueのとき、dataの内容を表示するようにします。

If(item,First(data))

form下のボタンのOnSelectを以下のように書き換えます。

If(item,
Clear(tempcollect);
Collect(dispcollect,Form1.Updates);
ForAll(dispcollect,Patch(tempcollect,{名前_:ThisRecord.名前,好きな食べ物_:ThisRecord.好きな食べ物}));
Clear(data);
,
Collect(tempcollect,{名前_:DataCardValue3.Text,好きな食べ物_:DataCardValue4.Text});
Collect(dispcollect,Form1.Updates);
);

Set(item,false);
ResetForm(Form1);
NewForm(Form1)

初めの変数itemでデータの編集なのか、追加なのかで分岐させています。

ボタンの表示Textも修正しておきましょう。