技術情報ブログ
Power Platform
2022.05.25

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(Power AppsやPower Automateなど)を用いてお客様の業務を自動化するご支援を数多く承っております。

業務の中で、「普段手動でやっている業務を自動化できないか」というような疑問がある場合には、お気軽にアーティサン株式会社までお問い合わせください。

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当:小刀稱知哉

小刀稱知哉

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

1990年4月9日生まれ

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

趣味は読書

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

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

Power Apps:キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針(1)

2023.02.22

今さら聞けないPower Automate:フローの種類とその違い(2)

2023.02.08

今さら聞けないPower Automate:フローの種類とその違い(1)

2023.01.25

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

2022.08.18

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

2021.06.23

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第1回】4つのシーンごとに手法を比較、その最適解とは?

2
2021.07.14

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第2回】フロー作成でエラー発生!

3
2021.09.03

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第8回】トリガーの条件の指定方法

4
2020.10.02

世界に広がる Power Apps「モデル駆動型アプリ」のココがスゴイ!【第1回】

5
2022.02.16

SharePointのビューに擬似的なアクセス制限をかける方法(1)

--------------------------------------------------->
モデル駆動型アプリ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レスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術ItDX情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layout
PageTop
ページトップに戻る