技術情報ブログ
Power Platform
2022.06.15

Power Apps コンポーネントで確認ダイアログを作ってみた

Power Apps コンポーネントで確認ダイアログを作ってみた

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

Power Appsを作成する際に、コンポーネントを活用していますか?

アプリを作成する上で、共通の処理を行うことは多いと思います。
その際に、コンポーネントという機能を用いて実装すると、複数アプリや画面にて再利用できるため、いわゆる「車輪の再発明」を防ぐことができます。

今回は、「Power Apps コンポーネントで確認ダイアログを作ってみた」と題し、コンポーネントの実装方法を説明いたします。

Power Appsにてアプリを作成されている方に向けた記事です。

 

コンポーネントとは

コンポーネントとは、複数アプリや画面にて再利用できる部品を作成・管理する機能となります。

(アプリを作成する際、ギャラリーやボタンなどがの部品は標準で使用することができると思います。
コンポーネントとは、ギャラリーやボタン自体を作成するというイメージです。)

詳細は以下URLを参照してください。
キャンバス アプリのコンポーネントを作成する (プレビュー)

コンポーネントを使用して部品を作成するメリットとして、複数アプリや画面にて共通の処理を行う際に、そのコンポーネントを再利用できるという点があります。

今回は、コンポーネントで確認ダイアログ機能を実装する方法をお伝えします。

 

コンポーネントを用いた確認ダイアログの実装方法

最初に、今回作成する確認ダイアログについて說明します。

使用イメージとしては、削除ボタンが押下された時や、編集中の画面から戻るボタンが押下されたときにポップアップ表示される確認画面です。

確認メッセージ・「はい」ボタン・「いいえ」ボタンから構成されています。
確認メッセージは変数にしているため、メッセージ内容は使用する場所毎に変更可能です。
また、「はい」・「いいえ」ボタン押下時の処理についても、使用する場所毎に変更可能です。

実装手順は以下のとおりです。

 

コンポーネントを作成

まずは、コンポーネントを作成します。

Power Appsを開き、アプリコンポーネント ライブラリ(プレビュー)新しいコンポーネント ライブラリ(プレビュー)をクリックしてください。

その後、任意の名前を入力作成をクリックしてください。
(今回は cmpConfirmDialog としました。)

Power Apps コンポーネントの作成-1
Power Apps コンポーネントの作成-1

 

部品を追加

以下部品を追加し、名称や各プロパティ(色や文字サイズなど)を変更してください。

部品

名前

四角形

recConfirmDialog

テキストラベル

lblConfirmMessage

ボタン

btnNo

ボタン

btnYes

また、今回はコンポーネントの名前を(comConfirmDialog)とし、背景色(塗りつぶし)の設定も変更しました。
(設定値は、RGBA(0, 0, 0, 0.2))

Power Apps コンポーネントの作成-2
Power Apps コンポーネントの作成-2

 

カスタムプロパティを追加

続いて、カスタムプロパティを追加していきます。

カスタムプロパティとは、コンポーネントに設定できるプロパティのことです。
(ボタンの「Onselect」や「Text」プロパティを作成するイメージです。)

詳細は、以下URLを参照してください。
カスタム プロパティ

カスタムプロパティを追加する前に、最初にアプリの設定を変更します。

現在(2022年6月時点)は、標準でカスタムプロパティに動作プロパティ(イメージとしては、「OnSelect」)を追加することはできません。よって、アプリの設定を変更し、動作プロパティを追加できるようにします。

変更方法は、ファイル設定近日公開の機能実験段階から拡張コンポーネントのプロパティをオンにします。

Power Apps コンポーネントの作成-3
Power Apps コンポーネントの作成-3

では、カスタムプロパティを追加しましょう。

コンポーネント右側ペインの+ 新しいカスタムプロパティをクリックし、追加してください。
今回は、以下のカスタムプロパティを追加します。

カスタムプロパティ

内容

ConfirmText

確認メッセージの文面

OnYes

「はい」ボタン押下時の動作

OnNo

「いいえ」ボタン押下時の動作

カスタムプロパティ-ConfirmText
カスタムプロパティ-ConfirmText
カスタムプロパティ-OnYes
カスタムプロパティ-OnYes
カスタムプロパティ-OnNo
カスタムプロパティ-OnNo

 

部品にカスタムプロパティを紐づけ

続いて、事前に追加していた各部品にカスタムプロパティを紐づけていきます。
以下を参考にして、カスタムプロパティを紐づけてください。

部品

プロパティ

設定値

設定値の意味

lblConfirmMessage

Text

Parent.ConfirmText

確認メッセージの内容を本体アプリから編集できるようにするため

OnYes

OnSelect

Parent.OnYes()

「はい」ボタン押下時の挙動を本体アプリから編集できるようにするため

OnNo

OnSelect

Parent.OnNo()

「いいえ」ボタン押下時の挙動を本体アプリから編集できるようにするため

ここまでで、コンポーネントの作成は完了です。
コンポーネントを公開してください。

続いて、本体のアプリにコンポーネントをインポートしていきましょう。

 

本体のアプリにコンポーネントをインポート

コンポーネントを追加したいアプリの編集画面を開き、+(挿入)コンポーネントを更に追加からインポートしたいコンポーネントを選択してください。

Power Apps コンポーネントのインポート
Power Apps コンポーネントのインポート

インポートしたコンポーネントを画面に追加した後、各プロパティを変更します。
今回は、本体アプリの削除ボタンが押下された場合、コンポーネントが動作するように設定します。

以下を参考にして、各プロパティを変更してください。

部品

プロパティ

設定値

設定値の意味

画面

OnVisible

UpdateContext({showDialog: false});

画面の初期表示時、確認ダイアログを非表示にする

「削除」ボタン

OnSelect

UpdateContext({showDialog: true});

「削除」ボタン押下時、確認ダイアログを表示させる

cmpConfirmDialog_1
(※インポートしたしたコンポーネント)

Visible

showDialog

showDialog 変数値により、表示・非表示となる

 

ConfirmText

“本当に削除しますか?”

 

 

OnYes

//削除処理をここに記載
UpdateContext({showDialog: false});

削除処理実行後、確認ダイアログを非表示にする

 

OnNo

UpdateContext({showDialog: false});

確認ダイアログを非表示にする

これで、完成です! 挙動を確認してみましょう。

 

補足:コンポーネントのその他プロパティ値の推奨設定値について

上記では、想定する挙動を実装するために最小限の設定値だけを紹介しました。

しかし、実際にコンポーネントを作成する際は、本体アプリの設定(例:画面のサイズなど)に応じて、配置場所なども動的に変化するほうが、より汎用的にコンポーネントを活用することができます。

よって、コンポーネントの下記プロパティについても、設定することを推奨いたします。

部品

プロパティ

設定値

設定の意味

cmpConfirmDialog

Height

App.Height

本体アプリの高さに合わせるため

 

Width

App.Width

本体アプリの幅に合わせるため

recConfirmDialog

X

(Parent.Width/2)-(Self.Width/2)

本体アプリの左右中央に配置するため

 

Y

(Parent.Height/3)-(Self.Height/2)

本体アプリの上下1/3の位置に配置するため

lblConfirmMessage

X

recConfirmDialog.X+(recConfirmDialog.Width/2)-(Self.Width/2)

recConfirmDialogの配置位置に合わせるため

 

Y

recConfirmDialog.Y+30

同上

btnYes

X

recConfirmDialog.X+(recConfirmDialog.Width/2)-(Self.Width/2)+150

同上

 

Y

recConfirmDialog.Y+150

同上

 

HoverFill

ColorFade(Self.Fill,-20%)

マウスオーバー時、自身の色を暗くするため

btnNo

X

recConfirmDialog.X+(recConfirmDialog.Width/2)-(Self.Width/2)-150

recConfirmDialogの配置位置に合わせるため

 

Y

recConfirmDialog.Y+150

同上

 

HoverFill

ColorFade(Self.Fill,-20%)

マウスオーバー時、自身の色を暗くするため

 

さいごに

本記事では、「Power Apps コンポーネントで確認ダイアログを作ってみた」と題し、コンポーネントの実装方法を説明しました。

コンポーネントを使用して部品を作成すると、複数アプリや画面にて共通の処理を行う際に、そのコンポーネントを再利用できるという大きなメリットがありますので、是非参考にしてください。

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

小刀稱知哉

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

1990年4月9日生まれ

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

趣味は読書

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

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

Power Automateのベストプラクティス・アンチパターン(5)【Apply to each×コンカレンシー×変数の設定はNG】

2024.03.20

Power Apps×Teams:Teams上からPower Appsを実行する方法

2024.03.13

Power Apps:SharePointリストと連携したカレンダーアプリを自作してみよう

2024.03.06

SharePointのあったらいいなを集めました(X-SPのご紹介)

2024.02.28

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

モデル駆動型アプリ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複数項目シェアポイント便利機能カレンダーCalendarTeams
PageTop
ページトップに戻る