演習 - コレクションの使用とテーブルの操作

  • 15 分

この演習では、テーブルを使用する演習を行います。 コレクションの作成、コレクションのフィルター処理、コレクションの検索、コレクションのレコードの編集、コレクションへのレコードの追加、コレクションからのレコードの削除を行います。

データのコレクションを作成する

  1. Power Apps にサインインします。

  2. ホーム画面で、左側のナビゲーション パネルからアプリを選択します。 次に、画面上部から + 新しいアプリを選択します。 ページ デザインから開始するを選択し、空白のキャンバスを選択します。

  3. 画面の左上から保存を選択し、アプリに名前を付けます。

  4. ツリー ビューで Screen1 を選択した状態で、+ 挿入 タブを選択します。ボタンを追加し、その OnSelect プロパティを次の数式に設定します。

    ClearCollect(CityPopulations, 
{City:"London", Country:"United Kingdom", Population:8615000}, 
{City:"Berlin", Country:"Germany", Population:3562000}, 
{City:"Madrid", Country:"Spain", Population:3165000}, 
{City:"Rome", Country:"Italy", Population:2874000}, 
{City:"Paris", Country:"France", Population:2273000}, 
{City:"Hamburg", Country:"Germany", Population:1760000}, 
{City:"Barcelona", Country:"Spain", Population:1602000}, 
{City:"Munich", Country:"Germany", Population:1494000}, 
{City:"Milan", Country:"Italy", Population:1344000})

  5. Alt キーを押したまま、ボタン コントロールをクリックします。 これにより、"CityPopulations" という名前のコレクションが作成され、上記のすべてのレコードがコレクションに保存されます。 ボタンの Text プロパティを "Collect" に変更します。

  6. 垂直ギャラリー コントロールを挿入し、データ ソースとして CityPopulations を選択します (または、ギャラリーの Items プロパティを "CityPopulations" に更新できます)。

  7. ギャラリーを選択した状態で、画面の右側のプロパティ パネルでレイアウトを空白からタイトル、サブタイトル、本文に変更します。 次に、フィールドを選択し、本文ドロップダウン オプションを「Population」に変更します。 下の画像を参照してください。

    [プロパティ] パネルの [データ ソース] と Fields オプションが強調表示され、Body1 での選択項目として [Population] が選択済みである、新しいギャラリーのスクリーン ショット。

  8. ギャラリーが選択されたままの状態で、OnSelect プロパティを次のように更新します。

    Set(varRecord,ThisItem)

コレクションをフィルター処理する

  1. テキスト ラベルを挿入して、Text プロパティを「Population」に変更します。 その後、ギャラリーの右側に移動します。

  2. 次に、スライダー コントロールを挿入し、先ほど作成したラベルの下に配置します。 検索フィールドに「スライダー」と入力すると、コントロールをすばやく見つけることができます。

  3. スライダー コントロールを選択して、Min プロパティを次のように変更します。

    Min(CityPopulations, Population)

  4. Max プロパティを次のように変更します。

    Max(CityPopulations, Population)

  5. ギャラリーを選択して、Items プロパティを次のように変更します。

    Filter(CityPopulations, Population>= Slider1.Value)

  6. これで、人口が選択したスライダー値以上のレコードのみギャラリーに表示されます。 アプリをプレビュー モードにし、スライダーを動かして実行されていることを確認します。 左方向にスライダーを移動すると、すべての市区町村が表示されます。 スライダーを右に動かすと一覧が狭くなり、最終的にはロンドン (人口が最も多い都市) だけがギャラリーに残ります。

    スライダーのフィルターのアニメーション。

LookUp 機能と Patch 機能を使用する

  1. テキスト ラベルを挿入し、Text プロパティを「City」に変更して、スライダーの下に配置します。

  2. 次に、ドロップダウン コントロールを挿入し、City ラベルの下に移動します。

  3. ドロップダウンの Items プロパティに次のように入力します。

    CityPopulations.City

  4. ドロップダウンの OnChange プロパティに次のように入力します。

    Set(varRecord, LookUp(CityPopulations, City=Self.SelectedText.City))

  5. テキスト ラベル コントロールをもう一つ挿入し、Text プロパティを「Country」に更新します。

  6. テキスト入力コントロールを挿入し、"Country" ラベルの下に移動します。

  7. テキスト入力の Default プロパティに varRecord.Country と入力します。

  8. このテキスト入力コントロールの名前を txtCountry に変更します。

  9. 上の 4 つのステップを繰り返して、City および Population にテキスト ラベルとテキスト入力コントロールを追加し、テキスト入力の Default プロパティをそれぞれ varRecord.City および varRecord.Population に更新します。 完成すると、画面は次の図のようになります。

    テキスト入力と新しいラベルのスクリーンショット。

  10. 画面にボタンを追加して、Population のテキスト入力の下に配置します。 Text プロパティを "送信" に変更します。

  11. ボタンの OnSelect プロパティを次にように変更します。

    Patch(CityPopulations, varRecord, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

    注

    テキスト入力は既定では文字列を返しますが、このコレクションでは数値を返すため、txtPopulation.Text を Value() でラップする必要があります。

  12. アプリをプレビュー モードにし、ギャラリーから項目を選択します。 値の 1 つを変更して、[Submit] ボタンを押し、ギャラリーで項目が変更されたことを確認します。

  13. アプリを編集モードに戻します。

レコードを追加および削除する

  1. [Submit] ボタンを選択してコピーします。 それを 3 回貼り付けます。

  2. 3 つの新しいボタンの Text プロパティを、Clear、New、Removeに変更します。

  3. 元の [Submit] ボタンに揃えられた 2 つのボタンの 2 行にボタンを配置します ([Submit] の下に [New]、[Submit] の右側に [Clear]、[Clear] の下に [Remove] を配置)。

  4. Ctrl キーを押したまま、Clear ボタンと Remove ボタンをクリックします。 DisplayMode プロパティを次のように変更します。

    If(IsBlank(varRecord), DisplayMode.Disabled, DisplayMode.Edit)

    これで、これらのボタンはレコードが選択されている場合にのみクリック可能になります。

  5. Ctrl キーを押したまま、Remove ボタンをクリックして、選択を解除します。 Clear ボタンの OnSelect プロパティを、次のように更新します。

    Set(varRecord, Blank())

    これで、このボタンを使用して、選択したレコードをクリアできます。 アプリをプレビューし、Clear ボタンを選択します。

    [Clear] ボタンと [Remove] ボタンの両方が無効になっていることに注意してください。

  6. アプリを編集モードに戻して、Remove ボタンを選択します。 OnSelect プロパティを次のように変更します。

    Remove(CityPopulations, varRecord)

  7. New ボタンを選択して、OnSelect プロパティを次のように変更します。

    Collect(CityPopulations, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

  8. アプリをプレビュー モードにし、新しいレコードを追加して、既存のレコードを削除してみてください。

    新しいレコードと [New] ボタンが強調表示された、新しく作成されたレコードのスクリーンショット。

これで、Power Apps のテーブルを使用する方法の理解が深まりました。 ボタンにある異なるプロパティに追加機能を追加してユーザー エクスペリエンスを向上することができますが、実際にこの演習を行えば何が可能なのかがわかるはずです。