インタラクティブなユーザー エクスペリエンスを実現する Power Apps ポップアップ フォーム

このチュートリアルでは、Power Apps ポップアップ フォームを作成する方法と、よりカスタマイズされたインタラクティブなユーザー エクスペリエンスを提供する方法を説明します。このチュートリアルの完全なビデオは、このブログの下部でご覧いただけます。

Form Power Appsポップアップは、ユーザーにカスタマイズされたエクスペリエンスを提供し、基になるデータベースで実行しようとしている操作をユーザーが検証できるようにするための非常に強力なツールです。

たとえば、iPhone にアクセスしてアプリケーションを削除しようとすると、本当に削除するかどうかを尋ねられます。その理由は、実行しようとしているアクションを確実に実行するための検証手順を含む、非常に優れた UI を作成するためです。

Power Apps 内でも同じことを行う予定です。Power Apps の仕組みとしては、要素が画面上に表示されるため、Power Apps でネイティブに実行するのは少し難しいです。画面を別の画面に重ねることはできません。そこで、私たちがやっているのは、それを模倣するためにグループ化手法を使用することです。次に、Power Apps について説明し、その方法を説明します。

目次

• フォーム Power Apps ポップアップを作成する方法
• 結論

フォーム Power Apps ポップアップを作成する方法

Power Apps エディターに飛び込みましょう。この例では、自分のビジネス用の経費報告アプリケーションを作成中です。画面の左側には、すべての支出のギャラリーがあります。経費をクリックすると、右側にその経費に関する詳細情報が表示されます。

経費レポートの説明、金額、カテゴリ、ステータスなどの詳細情報を確認できます。

これに加えて、[編集]をクリックすると、下部にゴミ箱アイコンが表示され、このレコードを削除することもできます。

ここで、ユーザーがレコードを削除した場合に、ユーザーが実際にレコードを削除したいかどうかを確認するメッセージ ボックスが表示されるフォーム ポップアップを作成したいと思います。

最初に、画面全体を覆う四角形を追加します。スクリーンを重ね合わせた様子を反映するため、スクリーンが少し薄くなったように見えます。

そこで、 「Insert」に移動し、次に「Icons」に移動し、一番下の「Rectangle」に移動します。長方形が画面全体を覆うようにします。

次に、この図形の色を濃い灰色に変更します。次に、この四角形のFillプロパティに移動します。赤、緑、青がありますが、不透明度または透明度を表すアルファ値もあります。透明度を0.7にしますので、少し褪せた感じになります。

次に、ポップアップ ボックスとなる別の長方形を追加します。次に、ユーザーに対する一種の警告であるラベルを追加します。色を変更したり、フォントのサイズを調整したりできます。

ここで、実際に削除しようとしているレコードをユーザーに表示したいと思います。したがって、削除しようとしている経費報告書の名前、金額、およびおそらくカテゴリなどの値が必要です。

そのためには、ラベルに戻り、名前、金額、カテゴリを追加します。表示したいレコードは、基になるギャラリーで選択されたレコードに基づいています。ここでの基礎となるギャラリーは、Gallery 1と呼ばれます。したがって、ギャラリー 1 で選択されている項目の名前は、単にGallery1.Selected.Titleになります。金額はGallery1.Selected.Amountになり、カテゴリの場合はGallery1.Selected.Status.Valueになります。

次に、2 つのボタンを追加します。1 つのボタンは基本的に[削除] ボタン で、もう 1 つのボタンは単に[戻る]ボタンです。色やサイズも調整させていただきます。

ここで、誰かがゴミ箱またはゴミ箱アイコンをクリックしたときに、レコードが削除されず、代わりにこのポップアップ ボックスが表示されることを確認する必要があります。これを実現するには、ポップアップ ボックス内のすべての項目を強調表示し、右クリックして [グループ]を選択します。

これは Power Apps の優れた点の 1 つです。これにより、要素をグループ化することができます。これにより、 Group1というグループが作成されました。

これの優れた点は、グループのプロパティ (可視性など) を変更すると、他のすべてのプロパティに影響を与えることです。このように全てが揃っているのはとても良いですね。これらの要素のすべてのプロパティを一度に制御できるため、要素をグループ化すると便利です。

たとえば、これらすべてのプロパティの可視性を制御し、現時点ではそれらを「false」にすると、それはなくなります。

ここで、ガベージ アイコンを選択してみましょう。選択するとわかるように、アイコンはこれらの機能をすべて実行し、これらの機能は基本的にレコードが削除されたことを確認します。しかし、私たちはそれを望んでいません。そこで、ここではこれをコピーして空のメモ帳に置き、どこかに保存しておきます。これはレコードを削除するために作成した実際の関数であり、単にレコードを削除するだけです。

次に、フォームが実際にポップアップするタイミングを制御する新しい変数を作成します。この変数を set 関数と呼びましょう。変数にconfirmPopUpという名前を付け、これを true に設定します。

次に、グループを選択し、可視性プロパティをその変数 (confirmPopUp) に設定します。true に設定されているため、すべてが表示されます。

次に行うことは、[戻る] をクリックすることです。これをクリックすると、アクションが関連付けられます。誰かがそれを選択したとき、Group1 の可視性を false にしたいとします。

次に、メモ帳に保存した関数を実行するには、[削除] ボタンの OnSelect アクションを変更する必要があります。

最後に行う必要があるのは、誰かが [削除] ボタンをクリックした後、ポップアップも削除することです。そこで、別のアクションを追加し、ContinuePopUp 変数を false に設定します。これが、Power Apps 内でポップアップを使用する方法です。

Microsoft Power Apps: 要素をグループ化する
Power Apps 環境: アプリ要素を適切にセットアップする
Power Apps: この革新的なツールの使用を開始する

結論

Power Apps ポップアップを使用する理由の 1 つは、ユーザー向けにカスタマイズされたエクスペリエンスを作成することです。もう 1 つは、ユーザーにとっても有益であるため、ユーザーに対しても同様に何らかの検証を作成することです。

ユーザーが基盤となるSharePoint リストやデータベースにアクセスして、特定のものの編集や削除に混乱する必要がないように、ユーザー インターフェイスを作成することがすべてです。彼らは、何も台無しにしないように、あなたが作成した UI の安全な場所からそれを行うことができます。フォーム ポップアップは、それを実現するための強力なツールです。

ご質問がございましたら、下のコメント欄にコメントを残してください。

ではごきげんよう！

ヘンリー