演習 - 変数とコレクションの使用方法

  • 7 分

このハンズオン ラボでは、グローバル、コンテキスト、およびコレクション関数を作成および使用する方法について説明します。

  1. Power Apps Maker Portal にサインインします (make.powerapps.com)。

  2. ホーム画面のナビゲーション パネルの左側で、+ 作成を選択して空のアプリを選択し、作成ポップアップ ウィンドウで、空のキャンバス アプリの下の作成を選択します。

  3. アプリに コレクションの演習 という名前を付けます。形式が タブレット であることを確認し、作成 を選択します。

  4. しばらくすると、新しいアプリが表示されます。 「ようこそ」ダイアログはスキップしてください (表示された場合)。 ツリー ビュー パネルから App オブジェクトを選択し、OnStart プロパティを選択します。

    OnStart および App が強調表示されたビュー画面のスクリーンショット。

  5. OnStart プロパティを次の式に設定します (コピーして Fx 数式バーに貼り付けます)。この式を使用して、顧客番号と関連する請求書番号のコレクションを作成します。

    ClearCollect(colCustomer,
{CustomerNumber: 7470, InvoiceNumber: "INV70817"},
{CustomerNumber: 4259, InvoiceNumber: "INV29595"},
{CustomerNumber: 8251, InvoiceNumber: "INV74302"},
{CustomerNumber: 2338, InvoiceNumber: "INV35115"},
{CustomerNumber: 1524, InvoiceNumber: "INV82337"},
{CustomerNumber: 1530, InvoiceNumber: "INV82338"}
);
Set(varUserDisplayName, User().FullName)

  6. App オブジェクトの横の省略記号 (…) を選択して、Run OnStart を選択します。 先ほど入力した OnStart の式が実行され、colCustomer コレクションへの入力が行われます。

  7. コレクションを表示するには、挿入タブ (またはコマンド バーの + 挿入) を選択し、バーティカル ギャラリーを追加して、Items プロパティを colCustomer に設定します。

    画面右側のプロパティ パネルを使用して、新しい Gallery1 に以下の変更を行います。

    • Layout: タイトルとサブタイトル

    • 高さ: 650

    • フィールド: データ パネルで Title を変更して CustomerNumber に反映させます (または、ギャラリー内のタイトル ラベルを選択し、Text プロパティを ThisItem.CustomerNumber に変更します)

    • NextArrow アイコンを削除します (ギャラリー内から選択してください)

  8. ギャラリーで、円で囲まれた編集鉛筆またはタイトル ラベルを選択し、挿入タブを使用してアイコンを追加します。 ゴミ箱アイコンを探して選択します。 ギャラリーの右側に [ごみ箱] アイコンを移動します。

    これで、ギャラリーに [ごみ箱] アイコンが表示されます。

    ごみ箱が表示されたギャラリーのスクリーンショット。

  9. ごみ箱アイコンを選択して OnSelect プロパティに次の式を設定します。

    Remove(colCustomer,ThisItem)

  10. Alt キーを押したまま、最初のごみ箱アイコンを選択します。

    これにより、選択した行がコレクションから削除されます。 このプロセスが機能している場合は、行が削除されるという警告メッセージを表示する必要があります。

    コンテキスト変数を使用し、削除されることをユーザーに通知するポップアップ警告を作成して、キャンセル オプションを設定します。

  11. まず、ゴミ箱アイコンの OnSelect プロパティを以下のように設定します。

    UpdateContext({varPopup:true})

  12. ポップアップを作成するには、画面 (ギャラリー コントロールの外部) を選択し、挿入を使用して四角形を追加します (すばやく探すには挿入メニューの検索ボックスに「四角形」と入力します)。

  13. 四角形のプロパティを次のように変更します。

    • 名前: rectangle_backgrd

    • Size: 744 (幅); 720 (高さ)

    • 塗りつぶし: RGBA(166, 166, 166, .50)

    ギャラリーを囲むように四角形を調整します。

  14. 四角形をもう 1 つ追加し、プロパティを次のように更新します。

    • 名前: rectangle_foregrd

    • Size: 744 (幅); 348 (高さ)

    • 塗りつぶし: RGBA(255, 255, 255, 1)

    • BorderThickness: 1

    この四角形を、もう一方の四角形の上部に合わせて配置します。

  15. 挿入 > テキスト ラベルを選択します。

  16. 以下の変更をテキスト ラベルのプロパティに加えます。

    • 名前: lbl_popup

    • フォント サイズ: 15

    • フォントの太さ: 太字

    • Text Alignment: Center

  17. lbl_popup のテキストに次の式を設定します。

    varUserDisplayName & "
Please click Delete to confirm deletion of Invoice#" & " " & Gallery1.Selected.InvoiceNumber

  18. Insert>Button を選択し、button_Delete と名前を付け、その Text プロパティを「Delete」にセットします

  19. Delete ButtonOnSelect プロパティを以下のように設定します。

    Remove(colCustomer,LookUp(colCustomer,CustomerNumber=Gallery1.Selected.CustomerNumber));
UpdateContext({varPopup:false})

  20. Insert>Buttonを選択して button_Cancel と名前を付け、その Text プロパティを「Cancel」に設定します。

  21. Cancel Button OnSelect プロパティを次のように設定します。

    UpdateContext({varPopup:false})

  22. 作成した新しいコントロールを、次のように Gallery1 の上に配置します。

    [Delete] および [Cancel] ボタンのスクリーンショット。

  23. ここで、次のすべてのコントロールを選択し、グループ化します。 Ctrl キーを押しながら次のコントロールを選択してください。

    • rectangle_backgrd

    • rectangle_foregrd

    • lbl_popup

    • 削除ボタン

    • キャンセルボタン

  24. すべての項目を選択して右クリックし、[ グループ] を選択します。 Group1 の Visible プロパティを設定します。

    varPopup

    それで画面からすべてが消えるはずですが、消えていない場合は Alt キーを押しながら Cancel ボタンを選択します。

    これで、選択した顧客をギャラリーから削除するポップアップ ボックスが作成されました。

    次に、Delete 関数をテストします。

  25. Alt キーを押したまま、「invoice# INV29595 (請求書番号 INV29595)」のごみ箱アイコンを選択します。

  26. Delete ボタンを選択すると、INV29595 がギャラリーから削除され、ポップアップが表示されなくなります。

  27. 次に、Alt キーを再度押したまま、請求書番号 INV74302 のごみ箱アイコンを選択します。

  28. 今度は、Cancel ボタンを選択します。 ポップアップ ウィンドウが閉じ、INV74302 はギャラリーに残ります。

これで動的コレクションとグローバル変数が作成され、コンテキスト変数を使用するポップアップが作成されました。