キャンバス アプリ ギャラリーでのデータの表示、並べ替え、およびフィルター

さまざまな製品についての画像やテキストを表示して、その情報を並べ替えたりフィルター処理したりするためのギャラリーを作成します。

Power Apps では、ちょうどカタログで商品を見るときのように、関連性のあるアイテムをギャラリーを使って表示することができます。 商品の名前や価格など、製品に関する情報を表示するうえでギャラリーは最適な手段といえます。 このトピックでは、ギャラリーを作成し、Excel と似た関数を使ってその情報を並べ替えたりフィルター処理したりします。 また、アイテムが選択されたときに、その周囲に枠線を表示します。

注意

このトピックでは、タブレット PC アプリを使用します。 スマートフォン アプリを使うこともできますが、コントロールの一部はサイズ変更が必要となります。

前提条件

  • Power Apps にサインアップ し、サインアップに使用した同じ資格情報を使用してサインイン します。
  • テンプレートデータ、または最初 からタブレット アプリを作成します。
  • コントロールを構成する 方法を確認しておきます。
  • これらの手順では、CreateFirstApp をサンプルの入力データとして使用します (.jpg 画像が含まれています)。 この zip ファイルには、Excel に変換できる XML ファイルが含まれています。 変換できなくても、.zip ファイル内のファイルは Power Apps によって自動的に読み取られ、正常にインポートされます。 このサンプル データをダウンロードして使用することも、独自のデータをインポートすることもできます。
  1. サンプル データを使用して、在庫 という名前のコレクションを作成します。 手順を次に示します。

    1. 挿入 タブで コントロール を選択し、インポート を選択します。

      コントロールを挿入します

    2. インポート コントロールの OnSelect プロパティを次の数式に設定します。
      Collect(Inventory, Import1.Data)

      OnSelect プロパティ

    3. データのインポート ボタンを選択してエクスプローラーを開きます。 CreateFirstApp.zip を選択し、開く を選択します。

    4. ファイル メニューの コレクション を選択します。 在庫コレクションにインポートしたデータの一覧が表示されます。

      ファイル - コレクション

      作成した在庫コレクションには、5 つの商品の情報 (デザイン画像、商品名、在庫数) が含まれています。

      注意

      インポート コントロールの目的は、Excel と同様のデータをインポートしてコレクションを作成することです。 インポート コントロールによってデータがインポートされるのは、アプリの作成時とアプリのプレビュー時です。 現在、アプリの発行時には、データはインポートされません。

  2. 戻る矢印を選択してデザイナーに戻ります。

  3. 挿入 タブの ギャラリー をクリックまたはタップし、水平/横向き のギャラリーをクリックまたはタップします。

    ギャラリー - 水平

  4. 右側のウィンドウで、タイトルとサブタイトルを図にオーバーレイするオプションをクリックまたはタップします。

    レイアウト​​

  5. ギャラリーの Items プロパティを 在庫 に設定します。

    ギャラリーのレイアウト

  6. ギャラリーの名前を ProductGallery に変更し、他のコントロールの邪魔にならない位置にギャラリーを移動します。 商品が 3 つ表示されるようにギャラリーのサイズを変更します。

    ギャラリーの名前を変更

  7. ギャラリーの最初のアイテムで、一番下のラベルを選択します。

    ギャラリー付きのアプリ

    注意

    ギャラリーで最初のアイテムを変更すると、ギャラリー内のその他すべてのアイテムが自動的に変更されます。

  8. ラベルの Text プロパティを次の式に設定します。
    ThisItem.UnitsInStock

    この設定によって、商品ごとの在庫数がラベルに表示されます。

各製品の在庫

注意

既定では、一番上のラベルの Text プロパティが ThisItem.ProductName に設定されます。 これは、コレクション内の他のアイテムに変更できます。 たとえば、コレクションに ProductDescription フィールドまたは 価格 フィールドがある場合は、ラベルを ThisItem.ProductDescription または ThisItem.Price に設定できます。

上記の手順を使用して、.jpg 画像を含むデータをコレクションにインポートしました。 その後、データを表示するギャラリーを追加し、商品ごとの在庫数が表示されるようにラベルを構成しました。

  1. ギャラリーで、最初のアイテム 以外 の項目を選択します。 編集アイコンが表示されます (左上隅)。 編集アイコンを選択します。
    編集​​

  2. 挿入 タブの 図形 を選択し、四角形を選択します。 各ギャラリー アイテムに、青い実線の四角形が表示されます。

  3. ホーム タブで 塗りつぶし を選択し、塗りつぶしなし を選択します。

  4. 枠線 を選択し、枠線の種類 を選択して、実線を選択します。

  5. 再度 枠線 を選択し、太さを 3 に設定します。 ギャラリー アイテムを囲むように四角形のサイズを変更します。 これでギャラリー内の各アイテムに青い枠線が設定され、次のように表示されます。
    境界線を選択

  6. 図形 タブの 表示 を選択し、数式バーに次の数式を入力します。

    If(ThisItem.IsSelected, true)

    ギャラリーで現在選択されているアイテムの周囲に青色の四角形が表示されます。 いくつかのギャラリー アイテムを選択し、選択した各アイテムの周囲に四角形が表示されることを確認します。 また、プレビュー プレビュー ボタンを開いて、作成中のアプリを表示、テストすることもできます。

ヒント

四角形を選択し、ホーム タブの 並べ替え を選択して、最背面へ移動 を選択します。 この機能を使うと、ギャラリー アイテムを選択する際に、枠線が邪魔になりません。

上記の手順を使用して、ギャラリーで現在選択されているアイテムの周囲に枠線を追加しました。

以下の手順では、ギャラリー アイテムを昇順と降順で並べ替えます。 また、選択した在庫数でギャラリー項目を「フィルター処理」するためのスライダー コントロールを追加します。

昇順または降順で並べ替える

  1. ギャラリーで、最初のアイテム 以外 の項目を選択します。

  2. この時点では、Items プロパティが在庫 (コレクションの名前) に設定されています。 これを次のように変更します。

    Sort(Inventory, ProductName)

    この操作を実行すると、ギャラリーのアイテムを商品名で昇順に並べ替えます。並べ替えられたギャラリー

    降順を試してみましょう。 ギャラリーの Items プロパティを次の数式に設定します。

    Sort(Inventory, ProductName, Descending)

  1. スライダー コントロールを追加 (挿入 タブ > コントロール) して、その名前を StockFilter に変更して、ギャラリーの下に移動します。

  2. ユーザーが在庫数の範囲外の値に設定できないようにスライダーを構成します。

    1. コンテンツ タブの 最小値 を選択し、次の式を入力します。
      Min(Inventory, UnitsInStock)
    2. コンテンツ タブの 最大値 を選択し、次の式を入力します。
      Max(Inventory, UnitsInStock)
  3. ギャラリーで、最初のアイテム 以外 の項目を選択します。 ギャラリーの Items プロパティを次の式に設定します。
    Filter(Inventory, UnitsInStock<=StockFilter.Value)

  4. プレビュー で、ギャラリーの最大数量と最小数量の間の値にスライダーを調整します。 スライダーを調整すると、選択した値より少ない商品だけがギャラリーに表示されます。
    スライダー値のあるプレビュー ギャラリー

さらにフィルターを追加してみましょう。

  1. デザイナーに戻ります。
  2. 挿入 タブの テキスト を選択し、入力テキスト を選択して、新しいコントロールの名前を NameFilter に変更します。 テキスト コントロールをスライダーの下に移動します。
  3. ギャラリーの Items プロパティを次の式に設定します。
    Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. プレビュー で、スライダーを 30 に設定し、入力テキスト コントロールにアルファベットの g を入力します。 ギャラリーには、在庫数が 30 未満で、かつ 名前にアルファベットの「g」を含む商品のみが表示されます。
    のプレビュー スライダー - 30

Tips and Tricks (のヒントやテクニック)

  • いつでもプレビュー ボタン (プレビュー ボタンの画像) を選択して、作成したものを確認してテストできます。
  • アプリの設計時に、コントロールのサイズを変更したり、クリックとドラッグでコントロールを移動したりできます。
  • プレビュー ウィンドウを閉じるには、Esc キーを押すか、X を選択します。
  • ギャラリーの使用時に、すべてのギャラリーのアイテムに変更を加えるには、ギャラリーの先頭のアイテムを選択します。 たとえば、最初のアイテムを選択して、ギャラリーのすべてのアイテムに枠線を追加します。
  • ギャラリーのプロパティを更新するには、ギャラリーの最初のアイテム 以外 のいずれかのアイテムを選択します。 たとえば、2 つ目のアイテムを選択して、ItemsShowScrollbar など、(ギャラリー内のアイテムではなく) ギャラリー自体に適用するプロパティを更新します。

学習した内容

このトピックでは次の操作を行いました。

  • コレクションを作成し、.jpg 画像を含むデータをそのコレクションにインポートして、そのデータをギャラリーに表示しました。
  • ギャラリーの各画像の下に、そのアイテムの在庫数を表示するラベルを構成しました。
  • 選択したアイテムの周囲に枠線を追加しました。
  • アイテムを商品名の昇順と降順で並べ替えました。
  • 商品を在庫数と商品名でフィルタ―処理するためにスライダー コントロールと入力テキスト コントロールを追加しました。