アプリ開発の調査にかかる
時間を削減したい
内製化支援サービス
アプリを自分たちで
作成できるようになりたい
DX人材育成プログラム
プロに開発を依頼したい
アプリ開発導入支援サービス
機能拡張サービス
X-SP Feature
デザイン拡張サービス
X-SP Design
モダン化から運用管理までサポート
構築支援サービス
💡 この記事でわかること
Power Apps キャンバスアプリで行の追加・削除ができる動的リストを実装する方法を解説します。コレクション（colProduct）を使ったレコード管理の具体的なコードと、削除後のNo（連番）の振り直し処理まで確認できます。
- コレクションにレコードを先頭・末尾に追加するCollect / UpdateIf関数の使い方
- 対象レコードを削除しつつ連番を自動で振り直すRemoveIf + UpdateIfの実装
- 動的リストを構成するテキスト入力・追加アイコン・削除アイコンのパーツ構成
小刀稱 知哉ことね ともや
得意領域
Power PlatformやSharePointを中心に設計・開発・アドバイス・教育まで幅広く担当しています。内製化をご希望の場合はお気軽にお問い合わせください！
保有資格
Power Appsの動的リストとは、ユーザーが画面上で行を追加・削除でき、リアルタイムにリストが更新されるUIコンポーネントのことです。SharePointリストへの保存と組み合わせることで、柔軟な入力フォームを実現できます。本記事ではコレクションを使った実装方法を紹介します。
Power Apps での動的リスト・コレクション操作の実装でお困りの場合は、ぜひアーティサンにご相談ください。
MSクラウドに関するご相談・お問い合わせはこちら
お問い合わせフォームへこんにちは。アーティサン株式会社の小刀稱（ことね）です。
今回はPower Apps キャンバスアプリ上で動的リストを実装する方法について紹介します。
機能は以下動画をご覧ください。
使用する場面も多い機能だと思いますので、実装方法の1つとして参考にしてください。
内容としては、Power Appsでアプリを作成している方に向けた記事です。
準備
今回はコレクション（colProduct）を用いて実装します。
コレクションの型は以下の通りです。
No（数値）：各レコードのNo
製品名（文字列）：製品名
また、下記画像を参考にしてPower Apps キャンバスアプリ上で各パーツを追加してください。
ポイントのパーツは以下です。
テキスト入力：製品名を入力します
アイコン（）：レコードを追加します
アイコン（ゴミ箱）：対象レコードを削除します
それでは、動的リストを実装していきましょう。
以下機能の実装方法について説明します。
レコードの追加機能
アイコン（）の実装方法です。
製品名を入力し、アイコン（）を押下すると、レコードがコレクションに追加されるようにします。
レコードを追加する際には、先頭もしくは末尾に追加する方法があります。
それぞれについて説明します。
レコードの先頭に追加
アイコン（）のOnSelectプロパティに以下を記載します。
※txtProductは製品名を入力している「テキスト入力」パーツです。
// コレクションの先頭にレコードを追加
UpdateIf(colProduct, true, { No: No+1 }); // 各レコードのNoを+1
Collect(colProduct,{ No: 1, 製品名: txtProduct.Text}); // No.1のレコードを追加
ポイントとしては、UpdateIf(colProduct, true, { No: No+1 })の部分です。
UpdateIf 関数を用いて、各レコードのNoを+1しています。
その後、Noを1に設定したレコードを追加しています。
UpdateIf 関数については、以下を参照してください。
Power Apps の Update および UpdateIf 関数
レコードの末尾に追加
アイコン（）のOnSelectプロパティに以下を記載します。
※txtProductは製品名を入力している「テキスト入力」パーツです。
// コレクションの末尾にレコードを追加
Collect(colProduct,{ No: Max(colProduct,No) + 1, 製品名: txtProduct.Text}); // Noの最大値+1のレコードを追加
ポイントとしてはMax(colProduct,No) + 1の部分です。
Max 関数を用いて、コレクションのNoに関する最大値を取得します。
その後、最大値 + 1のNoを設定したレコードを追加します。
Max 関数については、以下を参照してください。
Power Apps の Average、Max、Min、StdevP、Sum、および VarP 関数
レコードの削除機能
アイコン（ゴミ箱）の実装方法です。
アイコン（）を押下すると、レコードがコレクションから削除されるようにします。
アイコン（）のOnSelectプロパティに以下を記載します。
With( { thisNo : ThisItem.No }, // 対象レコードのNoを取得
RemoveIf(colProduct, No = thisNo); // 対象レコードを削除
UpdateIf(colProduct, No > thisNo, {No : No-1}); // 対象レコード以降のNoを-1
)
With 関数を用いて実装している部分がポイントです。
With 関数については、以下を参照してください。
Power Apps での With 関数
RemoveIf 関数でThisItemのレコードが削除されると、Power AppsではThisItemが示すレコードが自動的に更新されます。
よって、RemoveIf 関数の後にThisItemを用いる場合は、想定している値とは異なることがあるので、注意が必要です。
今回は、With 関数を用いることで、RemoveIf 関数実行前のThisItem.Noの値を変数に格納しています。
これにより、RemoveIf 関数の後でも、想定している値を用いることができます。
さいごに
本記事では、Power Apps キャンバスアプリにて動的リストを実装する方法についてご紹介しました。
使用する場面も多い機能だと思いますので、ぜひご一読ください！
Power Apps を使ったアプリ開発を内製化したい企業さまには、アーティサンの内製化支援プログラムもご活用いただけます。
MSクラウドに関するご相談・お問い合わせはこちら
お問い合わせフォームへ
