Microsoft Power App（以下、Power Apps）は、専門性の高い技術や開発の経験を持たなくてもビジネス ニーズに対応するモバイル アプリや Webアプリを比較的簡単に作成できるローコード ツールです。
Microsoft Teams（以下、Teams）では、Power Appsアプリを使用して、該当するチームのメンバー全体又は権限を有するメンバーが利用できるアプリを作成することができます。
本サイトでは、TeamsのPower Appsを利用してアプリを作成する上で役に立つちょっとしたテクニックを紹介しています。
はじめに
Power Appsは、ボタンやテキストボックス、データテーブルなどのコントロールを活用し、”OnSelect”プロパティを通じてシングルクリックで画面遷移や特定の処理を実行することが可能です。ビジネスアプリケーションでは、シングルクリックだけでなく、リストから項目をダブルクリックして詳細画面に遷移するといった操作も頻繁に行われます。
しかしながら、Power Appsのコントロールはダブルクリックアクションを直接サポートしていません。そのため、この機能を実装するには一工夫が必要となります。
本稿では、Power Appsでダブルクリックによる画面遷移や処理を疑似的に実現する方法を解説します。
この方法を採用すれば、ユーザーは直感的な操作で必要な情報に素早くアクセスできるようになります。これにより、ユーザーエクスペリエンスの向上が期待できます。
なお、この記事は、Power Appsを起動してアプリを作成し、スクリーン上にコントロールを配置するなど、ある程度Power Appsの基本操作ができる方を対象にしています。Power Appsの基本操作から学びたい方は、別途関連サイトや書籍を参考にしていただくことをおすすめします。
ダブルクリックを用いたアプリの例
このアプリケーションでは、ギャラリーコントロールに表示された任意のレコードをダブルクリックすることで、そのレコードの詳細情報を表示します。この機能は、イベントのスケジュール、商品のカタログ、顧客リストなど、様々なデータを扱うアプリケーションに適用可能です。ユーザーはダブルクリックという直感的な操作で、必要な情報に迅速にアクセスすることができます。
必要なコントロールの準備
ダブルクリック機能をPower Appsに実装するには、以下のコントロールが必要です。
“OnSelect”プロパティを持つコントロール：このコントロールは、ユーザーがアイテムをクリックした際にトリガーされるアクションを定義します。このアクション内では、ユーザーによって行われたクリックがシングルクリックなのかダブルクリックなのかを認識するコードを組み込む必要があります。
タイマーコントロール：タイマーは、ユーザーが行ったクリック間の時間を測定するために使用されます。一定時間内に2回のクリックが検出された場合に、ダブルクリックとして認識し、関連するアクションを実行します。タイマーコントロールは非表示にして配置します。
詳細情報を表示するコントロール： ダブルクリックが検出された際に、詳細情報を表示するためのコントロールです。これは、通常、詳細画面やポップアップウィンドウとして設計されます。
これらのコントロールを組み合わせることで、Power Apps内でダブルクリックによる詳細情報の表示を実現することができます。
コントロールの設定とプロパティ
このセクションでは、これらのコントロールをどのように設定し、連携させるかについて詳しく説明します。
コントロールとコンテキスト変数の初期化
以下のコードをスクリーンの”OnVisible”プロパティなどに設定します。
UpdateContext({is_DoubleClick:false}); // true:ダブルクリック
UpdateContext({is_TimerStart:false}); // true:タイマースタート
UpdateContext({is_SyosaiVisible:false});// true:詳細画面表示
Reset(Timer) // タイマーコントロールリセット
ギャラリーの設定
ギャラリーコントロールは、データーテーブルの各レコードに対して、”OnSelect”プロパティを使用して、画面遷移や特定の処理を行うためのコードを設定します。
- OnSelectプロパティ：ユーザーがアイテムをクリックしたときに実行する処理を記述します。ここでは、ユーザーがアイテムをクリックするとタイマーをスタートし、ダブルクリックを示すコンテキスト変数が”True”であれば、詳細画面（コンテナ）の”Visible”に設定しているコンテキスト変数を”True”にして詳細画面を表示します。
// OnSelectプロパティ
UpdateContext({is_TimerStart:true});
If(is_DoubleClick,UpdateContext({is_SyosaiVisible:true}))
タイマーコントロールの設定
タイマーコントロールは、ユーザーが行ったクリック間の時間を測定するために使用されます。一定時間内に2回のクリックが検出された場合に、ダブルクリックとして認識し、関連するアクションを実行します。
- OnTimerStartプロパティ：タイマーが開始されたときに実行する処理を記述します。ここで、ダブルクリックを示すコンテキスト変数を”True”に設定することにより、ユーザーが設定した時間内に2回目のクリックがあった場合、ダブルクリックであることがわかります。
// OnTimerStartプロパティ
UpdateContext({is_DoubleClick:true});
- OnTimerEndプロパティ：タイマーが終了したとき（つまりユーザーが設定した時間内に2回目のクリックがなかった場合）に実行する処理を記述します。ここでは、ダブルクリックとタイマースタートを示すコンテキスト変数を”False”に設定し、タイマーをリセットします。
// OnTimerEndプロパティ
UpdateContext({is_DoubleClick:false});
UpdateContext({is_TimerStart:false});
Reset(Timer);
- Durationプロパティ：タイマーの持続時間を設定します。ここでは、1000ミリ秒（1秒）を設定します。
// Durationプロパティ 1000
- Startプロパティ：タイマーの開始または停止を設定します。
// Startプロパティ is_TimerStart
詳細画面の設定
ダブルクリックが検出された際に処理を行う
詳細画面には、選択されたレコードの情報を表示するためのコントロールを配置します。フォームコントロールを使用して、レコードの詳細を表示し、編集可能にすることもできます。
ここでは、詳細画面としてコンテナコントロールを用いています。コンテナコントロールの”Visible”プロパティの設定により画面表示を制御しています。
// Visibleプロパティ is_SyosaiVisible
コンテキスト変数を使ってコンテナの表示を制御する方法については、こちらの記事も参考にしてください。
Microsoft Power App（以下、Power Apps）は、専門性の高い技術や開発の経験を持たなくてもビジネス ニーズに対応するモバイル アプリや Webアプリを比較的簡単に作成できるローコード ツールです。 Micro[…]
まとめ
このように、Power Appsでは標準のコントロールを使ってダブルクリックのようなカスタムアクションを実装することが可能です。上記の設定を行うことで、ユーザーは直感的な操作で必要な情報に素早くアクセスできるようになり、アプリのユーザーエクスペリエンスを向上させることができます。実際のアプリケーションに応じて、これらのプロパティの設定を調整し、最適なユーザーインターフェースを提供してください。