PowerApps の項目の一覧の表示Show a list of items in PowerApps

アプリにギャラリー コントロールを追加して、任意のデータ ソースからの項目の一覧を表示します。Show a list of items from any data source by adding a Gallery control to your app. このトピックでは、データ ソースとして Excel を使用します。This topic uses Excel as the data source. テキスト入力コントロールのフィルター条件に一致する項目のみを表示するようにギャラリー コントロールを構成して、一覧をフィルター処理します。Filter the list by configuring the Gallery control to show only those items that match the filter criterion in a Text input control.

前提条件Prerequisites

  1. PowerApps を開き、左端近くにある [新規] をクリックまたはタップします。Open PowerApps, and then click or tap New near the left edge.
  2. [空のアプリ] タイルで、[携帯電話レイアウト] をクリックまたはタップします。On the Blank app tile, click or tap Phone layout.
  3. [PowerApps Studio へようこそ] ダイアログ ボックスで、[スキップ] をクリックまたはタップします。In the Welcome to PowerApps Studio dialog box, click or tap Skip.
  4. Excel ファイル内の FlooringEstimates テーブルへの接続を追加します。Add a connection to the FlooringEstimates table in the Excel file.
  5. (省略可能) 既定の画面にギャラリー コントロールを追加します。このためには、[挿入] タブをクリックまたはタップするか、[ギャラリー] をクリックまたはタップして、空 (空白) の、または既定のコントロール セットを含むギャラリー コントロールをクリックまたはタップします。(optional) Add a Gallery control to the default screen by clicking or tapping the Insert tab, clicking or tapping Gallery, and then clicking or tapping a Gallery control that's empty (blank) or that contains a default set of controls.

    これらのオプションには、水平方向または垂直方向にスクロールするギャラリー コントロールなどがあります。These options include Gallery controls that scroll horizontally or vertically. 各項目のコンテンツの量に応じてそのサイズを自動的に調整するギャラリー コントロールを追加することもできます。You can also add a Gallery control that automatically bases its size on the amount of content in each item.

    ギャラリーを追加する

  6. [ホーム] タブで、[新しい画面] をクリックまたはタップします。On the Home tab, click or tap New screen.

    空の画面、スクロールできる画面、ギャラリー コントロールを含む画面、またはフォームを含む画面を追加することができます。You can add a screen that's empty, that scrolls, that contains a Gallery control, or that contains a form.

  7. [リスト画面] をクリックまたはタップして、ギャラリー コントロールや、検索バーなどのコントロールを含む画面を追加します。Click or tap List screen to add a screen that contains a Gallery control and other controls such as a search bar.

    : 新しい画面または既存の画面にギャラリー コントロールを追加するには、ギャラリー コントロールの下部付近をクリックまたはタップして選択し、右側のウィンドウで [FlooringEstimates] をクリックまたはタップしてから、[データ] ウィンドウで別のレイアウトをクリックまたはタップします。Note: Whether you add a Gallery control to a new screen or an existing one, you can click or tap near the bottom of the Gallery control to select it, click or tap Flooring Estimates in the right-hand pane, and then click or tap a different layout in the Data pane. このチュートリアルの場合、既定のレイアウトをそのまま使用します。For this tutorial, leave the default layout.

    ギャラリーのレイアウトを選択する

  8. 追加した画面でギャラリー コントロールをクリックまたはタップします。Click or tap the Gallery control in the screen that you just added.
  9. 右側のウィンドウの [プロパティ] タブで、[CustomGallerySample] をクリックまたはタップします。On the Properties tab of the right-hand pane, click or tap CustomGallerySample.
  10. [データ] ウィンドウで、[CustomGallerySample] をクリックまたはタップしてから、[FlooringEstimates] をクリックまたはタップします。In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    データソースの選択

    ギャラリー コントロールに、サンプル データが表示されます。The Gallery control shows the sample data.

    データの表示

    並べ替えと検索は、このトピックの後半で構成します。You'll configure sort and search later in this topic.

カスタマイズを行う前に、ギャラリー コントロールのレイアウトを決定します。Before you do any customization, decide on a Gallery control layout. ギャラリー コントロール内のコントロールの最初のセットはテンプレートで、これにより、ギャラリー コントロール内のすべてのデータがどのように表示されるかを指定します。The first set of controls in a Gallery control is the template, which determines how all data in the Gallery control appears.

  1. ギャラリー コントロールの下部付近をクリックまたはタップしてから、左上隅にある鉛筆アイコンをクリックまたはタップして、テンプレートを選択します。Select the template by clicking or tapping near the bottom of the Gallery control and then clicking or tapping the pencil icon in the upper-left corner.

    ギャラリー テンプレートの編集

  2. テンプレートを選択した状態で、ラベル コントロールを追加し、テンプレート内の他のコントロールと重ならないように、追加したコントロールを移動し、サイズを変更します。With the template still selected, add a Label control, and then move and resize it so that it doesn't overlap with other controls in the template.

    ラベルの追加

  3. テンプレートを選択し、右側のウィンドウで [FlooringEstimates] をクリックまたはタップして、[データ] ウィンドウを開きます。Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.
  4. この手順の最初の方で追加したラベルを選択して、[データ] ウィンドウに強調表示されたリストを表示します。Select the label that you added earlier in this procedure, and then open the highlighted list in the Data pane.

    ドロップダウン リストの表示

  5. このリストで [価格] をクリックまたはタップします。In that list, click or tap Price.

    ラベル バインディングの変更

    ギャラリー コントロールに新しい値が表示されます。The Gallery control shows the new values.

最終ギャラリー

ギャラリー コントロールの Items プロパティで、表示する項目を指定します。The Items property of a Gallery control determines which items it shows. この手順では、製品名に TextSearchBox1 内のテキストを含む項目のみがギャラリー コントロールに表示されるように、このプロパティを構成します。In this procedure, you configure that property so that the Gallery control shows only those items for which the product name contains the text in TextSearchBox1.

テキスト検索ボックス

  1. ギャラリー コントロールの下部付近をクリックまたはタップしてギャラリー コントロールを選択します。Select the Gallery control by clicking or tapping near the bottom of that control.
  2. [詳細設定] タブで、ギャラリー コントロールの Items プロパティを次の数式に設定します。On the Advanced tab, set the Items property of the Gallery control to this formula:

    If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))

    この数式内の関数について詳しくは、「数式のリファレンス」をご覧ください。For more information about the functions in this formula, see the formula reference.

  3. 検索ボックスに、製品名の一部またはすべてを入力します。Type part or all of a product name in the search box.

    ギャラリー コントロールに、フィルター条件を満たす項目のみが表示されます。The Gallery control shows only those items that meet the filter criterion.

ギャラリー コントロールの Items プロパティで、項目を表示する順序を指定します。The Items property of a Gallery control determines the order in which it shows items. この手順では、ImageSortUpDown1 で設定された項目の順序で項目がギャラリー コントロールに表示されるように、このプロパティを構成します。In this procedure, you configure that property so that the Gallery control shows the order of items as set by ImageSortUpDown1.

並べ替えのイメージ

  1. ギャラリー コントロールの Items プロパティを次の数式に設定します。Set the Items property of the Gallery control to this formula:

    Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

  2. 並べ替えアイコンを選択して、ギャラリー コントロールの並べ替え順序を製品名順に変更します。Select the sort icon to change the sorting order of the Gallery control by the names of the products.

ギャラリー コントロールの並べ替えおよびフィルター処理を行うには、次のようにします。To sort and filter your Gallery control:

  • この数式の DataSource の 2 つのインスタンスを、使用するデータ ソースの名前に置き換えます。Replace both instances of DataSource in this formula with the name of your data source.
  • ColumnName の 2 つのインスタンスを、並べ替えおよびフィルター処理に使用する列の名前に置き換えます。Replace both instances of ColumnName with the name of the column by which you want to sort and filter.

Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

選択した項目を強調表示するHighlight the selected item

ギャラリー コントロールの TemplateFill プロパティを、次の例のような式に設定します。Set the Gallery control's TemplateFill property to a formula that's similar to this example:

If(ThisItem.IsSelected, LightCyan, White)If(ThisItem.IsSelected, LightCyan, White)

既定の選択を変更するChange the default selection

ギャラリー コントロールの Default プロパティを、既定で選択するレコードに設定します。Set the Gallery control's Default property to the record that you want to select by default. たとえば、FlooringEstimates データ ソースの 5 番目の項目を指定します。For example, specify the fifth item in the FlooringEstimates data source:

Last(FirstN(FlooringEstimates, 5))Last(FirstN(FlooringEstimates, 5))

この例では、FlooringEstimates データ ソースの Hardwood カテゴリにある、最初の項目を指定します。In this example, you specify the first item in the Hardwood category of the FlooringEstimates data source:

First(Filter(FlooringEstimates, Category = "Hardwood"))First(Filter(FlooringEstimates, Category = "Hardwood"))

次の手順Next steps