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

7 分

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

Power Apps Maker Portal にサインインします (make.powerapps.com)。
ホーム画面のナビゲーションパネルの左側で、+ 作成を選択して空のアプリを選択し、作成ポップアップウィンドウで、空のキャンバスアプリの下の作成を選択します。
アプリにコレクションの演習という名前を付けます。形式がタブレットであることを確認し、作成を選択します。
しばらくすると、新しいアプリが表示されます。「ようこそ」ダイアログはスキップしてください (表示された場合)。 ツリービュー パネルから App オブジェクトを選択し、OnStart プロパティを選択します。

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)

App オブジェクトの横の省略記号 (…) を選択して、Run OnStart を選択します。先ほど入力した OnStart の式が実行され、colCustomer コレクションへの入力が行われます。
コレクションを表示するには、挿入タブ (またはコマンドバーの + 挿入) を選択し、バーティカルギャラリーを追加して、Items プロパティを colCustomer に設定します。

画面右側のプロパティ パネルを使用して、新しい Gallery1 に以下の変更を行います。
- Layout: タイトルとサブタイトル
- 高さ: 650
- フィールド: データパネルで Title を変更して CustomerNumber に反映させます (または、ギャラリー内のタイトルラベルを選択し、Text プロパティを ThisItem.CustomerNumber に変更します)
- NextArrow アイコンを削除します (ギャラリー内から選択してください)
ギャラリーで、円で囲まれた編集鉛筆またはタイトル ラベルを選択し、挿入タブを使用してアイコンを追加します。 ゴミ箱アイコンを探して選択します。ギャラリーの右側に [ごみ箱] アイコンを移動します。

これで、ギャラリーに [ごみ箱] アイコンが表示されます。
ごみ箱アイコンを選択して OnSelect プロパティに次の式を設定します。

Remove(colCustomer,ThisItem)
Alt キーを押したまま、最初のごみ箱アイコンを選択します。

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

コンテキスト変数を使用し、削除されることをユーザーに通知するポップアップ警告を作成して、キャンセルオプションを設定します。
まず、ゴミ箱アイコンの OnSelect プロパティを以下のように設定します。

UpdateContext({varPopup:true})
ポップアップを作成するには、画面 (ギャラリーコントロールの外部) を選択し、挿入を使用して四角形を追加します (すばやく探すには挿入メニューの検索ボックスに「四角形」と入力します)。
四角形のプロパティを次のように変更します。
- Name: rectangle_backgrd
- Size: 744 (幅); 720 (高さ)
- Fill: RGBA(166, 166, 166, .50)
ギャラリーを囲むように四角形を調整します。
四角形をもう 1 つ追加し、プロパティを次のように更新します。
- Name: rectangle_foregrd
- Size: 744 (幅); 348 (高さ)
- Fill: RGBA(255, 255, 255, 1)
- BorderThickness: 1
この四角形を、もう一方の四角形の上部に合わせて配置します。
挿入 > テキストラベルを選択します。
以下の変更をテキスト ラベルのプロパティに加えます。
- Name: lbl_popup
- Font size: 15
- Font weight: Bold
- Text Alignment: Center

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

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

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

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

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

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

UpdateContext({varPopup:false})
作成した新しいコントロールを、次のように Gallery1 の上に配置します。
ここで、次のすべてのコントロールを選択し、グループ化します。 Ctrl キーを押しながら次のコントロールを選択してください。
- rectangle_backgrd
- rectangle_foregrd
- lbl_popup
- button_Delete
- button_Cancel
すべてを選択した状態で右クリックし、グループを選択します。 Group1 の Visible プロパティを次に設定します。

varPopup

画面からすべてが表示されなくなりますが、表示される場合は Alt キーを押しながら Cancel ボタンを選択します。

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

次に、Delete 関数をテストします。
Alt キーを押したまま、「invoice# INV29595 (請求書番号 INV29595)」のごみ箱アイコンを選択します。
Delete ボタンを選択すると、INV29595 がギャラリーから削除され、ポップアップが表示されなくなります。
次に、Alt キーを再度押したまま、請求書番号 INV74302 のごみ箱アイコンを選択します。
今度は、Cancel ボタンを選択します。ポップアップウィンドウが閉じ、INV74302 はギャラリーに残ります。

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

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

フィードバック