技術情報ブログ
Power Platform
2022.05.25

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

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

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

今回はPower Apps キャンバスアプリ上で動的リストを実装する方法について紹介します。
機能は以下動画をご覧ください。

使用する場面も多い機能だと思いますので、実装方法の1つとして参考にしてください。

内容としては、Power Appsでアプリを作成している方に向けた記事です。

 

準備

今回はコレクション(colProduct)を用いて実装します。

コレクションの型は以下の通りです。

No(数値):各レコードのNo
製品名(文字列):製品名
コレクション(colProduct)
コレクション(colProduct)

また、下記画像を参考にして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 Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当:小刀稱知哉

小刀稱知哉

大分県出身(温泉大好き♥♥)、現在は東京都在住

1990年4月9日生まれ

30才にしてメーカーの技術営業からIT業界にジョブチェンジ!!!

趣味は読書

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当しております!

シェアする
記事カテゴリ
最新記事
2024.02.28

【2024年2月更新】Power Apps の実践的なノウハウ まとめ

2024.02.21

【2024年2月更新】Power Automate 初心者 ~ 中級者 向けロードマップ

2024.02.14

【小ネタ】Power Automate×SharePoint:3つ以上の項目でソートするビューを作成する方法

2024.02.07

【小ネタ】Power Automate×SharePoint:ドキュメントライブラリ上のファイルをフィルターする方法

2024.01.24

Power Apps・Power Automate:開発と本番環境を用いたアプリ構築手法(3) Power Platform パイプラインでCI/CD環境を構築

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目
PageTop
ページトップに戻る