Power Apps：動的リストの実装方法

アプリ開発の調査にかかる
時間を削減したい

内製化支援サービス

アプリを自分たちで
作成できるようになりたい

DX人材育成プログラム

プロに開発を依頼したい

アプリ開発導入支援サービス

SharePoint デザイン拡張サービス

X-SP Design

モダン化から運用管理までサポート

SharePoint 構築支援サービス

こんにちは。アーティサン株式会社の小刀稱（ことね）です。

今回は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
)