PowerApps ギャラリーでのデータの表示、並べ替え、およびフィルターShow, sort, and filter data in a PowerApps gallery

さまざまな製品についての画像やテキストを表示して、その情報を並べ替えたりフィルター処理したりするためのギャラリーを作成します。Create a gallery to show images and text about several products, and sort and filter that information.

PowerApps では、ちょうどカタログで商品を見るときのように、関連性のある項目をギャラリーを使って表示することができます。In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. 商品の名前や価格など、製品に関する情報を表示するうえでギャラリーは最適な手段といえます。Galleries are great for showing information about products, such as names and prices. このトピックでは、ギャラリーを作成し、Excel と似た関数を使ってその情報を並べ替えたりフィルター処理したりします。In this topic, we create a gallery and sort and filter the information using Excel-like functions. また、項目が選択されたときに、その周囲に枠線を表示します。Also, when an item is selected, a border is placed around the item.

注意

このトピックでは、タブレット アプリを使用します。This topic uses a tablet app. スマートフォン アプリを使うこともできますが、コントロールの一部はサイズ変更が必要となります。You can use a phone app but you will need to resize some of the controls.

前提条件Prerequisites

  • PowerApps にサインアップして PowerApps をインストールします。Sign up for PowerApps and install PowerApps. PowerApps を開く際に、サインアップに使用した同じ資格情報でサインインします。When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • テンプレートデータ、またはゼロからタブレット アプリを作成します。Create a tablet app from a template, from data, or from scratch.
  • コントロールを構成する方法を確認しておきます。Learn how to configure a control.
  • これらの手順では、CreateFirstApp をサンプルの入力データとして使用します (.jpg 画像が含まれています)。These steps use the CreateFirstApp as sample input data, which includes .jpg images. この zip ファイルには、Excel に変換できる XML ファイルが含まれています。The zip file includes an XML file that can be converted to Excel. 変換できなくても、.zip ファイル内のファイルは PowerApps によって自動的に読み取られ、正常にインポートされます。Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. このサンプル データをダウンロードして使用することも、独自のデータをインポートすることもできます。You can download and use this sample data, or import your own.
  1. サンプル データを使用して、Inventory という名前のコレクションを作成します。Create a collection named Inventory using the sample data. 手順を次に示します。Steps include:

    1. [挿入] タブで [コントロール] を選択し、[インポート] を選択します。On the Insert tab, select Controls, and then select Import:

    2. インポート コントロールの OnSelect プロパティを次の数式に設定します。Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. [データのインポート] ボタンを選択してエクスプローラーを開きます。Select the Import Data button to open Windows Explorer. CreateFirstApp.zip を選択し、[開く] を選択します。Select CreateFirstApp.zip, and select Open.
    4. [ファイル] メニューの [コレクション] を選択します。In the File menu, select Collections. Inventory コレクションにインポートしたデータの一覧が表示されます。The Inventory collection is listed with the data you imported:

      作成した Inventory コレクションには、5 つの商品の情報 (デザイン画像、商品名、在庫数) が含まれています。You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      注意

      インポート コントロールの目的は、Excel と同様のデータをインポートしてコレクションを作成することです。The import control is used to import Excel-like data and create the collection. インポート コントロールによってデータがインポートされるのは、アプリの作成時とアプリのプレビュー時です。The import control imports data when you are creating your app, and previewing your app. 現在、アプリの発行時には、データはインポートされません。Currently, the import control does not import data when you publish your app.

  2. 戻る矢印を選択してデザイナーに戻ります。Select the back arrow to return to the designer.
  3. [挿入] タブの [ギャラリー] をクリックまたはタップし、[水平] ギャラリーをクリックまたはタップします。On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. 右側のウィンドウで、タイトルとサブタイトルを配置するオプションをクリックまたはタップします。In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. ギャラリーの Items プロパティを Inventory に設定します。Set the Items property of the gallery to Inventory:

  6. ギャラリーの名前を ProductGallery に変更し、他のコントロールの邪魔にならない位置にギャラリーを移動します。Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. 商品が 3 つ表示されるようにギャラリーのサイズを変更します。Resize the gallery so it shows three products:

  7. ギャラリーの最初の項目で、一番下のラベルを選択します。In the first item of the gallery, select the bottom label:

    注意

    ギャラリーで最初の項目を変更すると、ギャラリー内のその他すべての項目が自動的に変更されます。When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. ラベルの Text プロパティを次の式に設定します。Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    この設定によって、商品ごとの在庫数がラベルに表示されます。When you do this, the label shows the units in stock for each product:

注意

既定では、一番上のラベルの Text プロパティが ThisItem!ProductName に設定されます。By default, the Text property of the top label is set to ThisItem!ProductName. これは、コレクション内の他の項目に変更できます。You can change it to any other item in your collection. たとえば、コレクションに ProductDescription フィールドまたは Price フィールドがある場合は、ラベルを ThisItem!ProductDescription または ThisItem!Price に設定できます。For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

上記の手順を使用して、.jpg 画像を含むデータをコレクションにインポートしました。Using these steps, you imported data that includes .jpg images into a collection. その後、データを表示するギャラリーを追加し、商品ごとの在庫数が表示されるようにラベルを構成しました。You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. ギャラリーで、最初の項目 "以外" の項目を選択します。Select any item in the gallery except the first one. 編集アイコンが表示されます (左上隅)。The edit icon displays (upper left corner). 編集アイコンを選択します。Select the edit icon:
  2. [挿入] タブの [図形] を選択し、四角形を選択します。On the Insert tab, select Shapes, and then select the rectangle. 各ギャラリー項目に、青い実線の四角形が表示されます。A blue solid rectangle appears in each gallery item.
  3. [ホーム] タブの [塗りつぶし] を選択し、[塗りつぶしなし] を選択します。On the Home tab, select Fill, and then select No Fill.
  4. [枠線] を選択し、[枠線の種類] を選択して、実線を選択します。Select Border, select Border Style, and then select the solid line.
  5. 再度 [枠線] を選択し、太さを 3 に設定します。Select Border again, and set the thickness to 3. ギャラリー項目を囲むように四角形のサイズを変更します。Resize the rectangle so that it surrounds the gallery item. これでギャラリー内の各項目に青い枠線が設定され、次のように表示されます。The items in your gallery now have a blue border and should look similar to the following:
  6. [図形] タブの [表示] を選択し、数式バーに次の数式を入力します。On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    ギャラリーで現在選択されている項目の周囲に青色の四角形が表示されます。A blue rectangle surrounds the current selection in a gallery. いくつかのギャラリー項目を選択し、選択した各項目の周囲に四角形が表示されることを確認します。Select a few gallery items to confirm that the rectangle appears around each item that you select. また、[プレビュー] () を開いて、作成中のアプリを表示、テストすることもできます。Remember, you can also open Preview to see and test what you're creating.

ヒント

四角形を選択し、[ホーム] タブの [並べ替え] を選択して、[最背面へ移動] を選択します。Select the rectangle, select Reorder on the Home tab, and then select Send to Back. この機能を使うと、ギャラリー項目を選択する際に、枠線が邪魔になりません。Using this feature, you can select a gallery item without the border blocking anything.

上記の手順を使用して、ギャラリーで現在選択されている項目の周囲に枠線を追加しました。Using these steps, you added a border around the current selection in the gallery.

以下の手順では、ギャラリー項目を昇順と降順で並べ替えます。In these steps, we are going to sort the gallery items in ascending and descending order. また、選択した在庫数でギャラリー項目を "フィルター処理" するためのスライダー コントロールを追加します。Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

昇順または降順で並べ替えるSort in ascending or descending order

  1. ギャラリーで、最初の項目 "以外" の項目を選択します。Select any item in the gallery except the first one.
  2. この時点では、Items プロパティが Inventory (コレクションの名前) に設定されています。The Items property is currently set to Inventory (the name of your collection). これを次のように変更します。Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    この操作を実行すると、ギャラリーのアイテムを商品名で昇順に並べ替えます。When you do this, the items in the gallery are sorted by the product name in ascending order:

    降順を試してみましょう。Try descending order. ギャラリーの Items プロパティを次の数式に設定します。Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  1. スライダー コントロールを追加 ([挿入] タブの [コントロール]) し、その名前を StockFilter に変更して、ギャラリーの下に移動します。Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. ユーザーが在庫数の範囲外の値に設定できないようにスライダーを構成します。Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. [Content (内容)] タブの [最小値] を選択し、次の式を入力します。On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. [Content (内容)] タブの [最大値] を選択し、次の式を入力します。On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. ギャラリーで、最初の項目 "以外" の項目を選択します。Select any item in the gallery except the first one. ギャラリーの Items プロパティを次の式に設定します。Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. [プレビュー] で、ギャラリーの最大数量と最小数量の間の値にスライダーを調整します。In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. スライダーを調整すると、選択した値より少ない商品だけがギャラリーに表示されます。As you adjust the slider, the gallery shows only those products that are less than the value you choose:

さらにフィルターを追加してみましょう。Now, let's add to our filter:

  1. デザイナーに戻ります。Go back to the designer.
  2. [挿入] タブの [テキスト] を選択し、[入力テキスト] を選択して、新しいコントロールの名前を NameFilter に変更します。On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. テキスト コントロールをスライダーの下に移動します。Move the text control below the slider.
  3. ギャラリーの Items プロパティを次の式に設定します。Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. [プレビュー] で、スライダーを 30 に設定し、入力テキスト コントロールにアルファベットの「g」を入力します。In Preview, set the slider to 30, and type the letter g in the text-input control. ギャラリーには、在庫数が 30 未満で、"かつ" 名前にアルファベットの "g" を含む商品のみが表示されます。The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

ヒントとコツTips and Tricks

  • 作成した内容は、いつでもプレビュー ボタン () を選択して表示し、テストすることができます。At anytime, you can select the preview button () to see what you created and test it.
  • アプリの設計時に、コントロールのサイズを変更したり、クリック アンド ドラッグでコントロールを移動したりできます。When designing your app, you can re-size the controls and move them around using click-and-drag.
  • プレビュー ウィンドウを閉じるには、Esc キーを押すか、[X] を選択します。Press ESC or select the X to close the preview window.
  • ギャラリーの使用時に、すべてのギャラリー項目に変更を加えるには、ギャラリーの先頭の項目を選択します。When using a gallery, select the first item in the gallery to change all items in the gallery. たとえば、最初の項目を選択して、ギャラリーのすべての項目に枠線を追加します。For example, select the first item to add a border to all items in the gallery.
  • ギャラリーのプロパティを更新するには、ギャラリーの最初の項目 "以外" のいずれかの項目を選択します。To update the properties of the gallery, select any item in the gallery except the first one. たとえば、2 つ目の項目を選択して、ItemsShowScrollbar など、(ギャラリー内の項目ではなく) ギャラリー自体に適用するプロパティを更新します。For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

学習した内容What you learned

このトピックでは次の操作を行いました。In this topic, you:

  • コレクションを作成し、.jpg 画像を含むデータをそのコレクションにインポートして、そのデータをギャラリーに表示しました。Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • ギャラリーの各画像の下に、その項目の在庫数を表示するラベルを構成しました。Under each image in the gallery, configured a label that lists the units in stock for that item.
  • 選択した項目の周囲に枠線を追加しました。Added a border around the item that you select.
  • 項目を商品名の昇順と降順で並べ替えました。Sorted the items by product name in ascending and descending order.
  • 商品を在庫数と商品名でフィルタ―処理するためにスライダー コントロールと入力テキスト コントロールを追加しました。Added a slider and an input text control to filter the products by units in stock and product name.