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

キャンバス アプリに ギャラリー コントロールを追加して、任意のデータ ソースからの項目の一覧を表示します。Show a list of items from any data source by adding a Gallery control to your canvas 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

  • PowerApps でコントロールを追加して構成する方法について確認します。Learn how to add and configure a control in PowerApps.

  • サンプル データを設定するには、次の処理を行います。Set up the sample data:

    1. この Excel ファイルをダウンロードして、チュートリアルのサンプル データを取得します。Download this Excel file, which contains sample data for this tutorial.

    2. Excel ファイルを OneDrive for Business などのクラウド ストレージ アカウントにアップロードします。Upload the Excel file to a cloud-storage account, such as OneDrive for Business.

  • 空のアプリを開きます。Open a blank app:

    1. PowerApps にサインインしますSign in to PowerApps.

    2. [自分のアプリを作成する][キャンバス アプリを一から作成] を選択します。Under Make your own app, select Canvas app from blank.

    3. アプリに名前を指定し、[電話] を選択し、[作成] を選択します。Specify a name for your app, select Phone, and then select Create.

    4. [PowerApps Studio へようこそ] ダイアログ ボックスが表示されたら、[スキップ] を選択します。If the Welcome to PowerApps Studio dialog box appears, select Skip.

    5. Excel ファイル内の FlooringEstimates テーブルへの接続を追加します。Add a connection to the FlooringEstimates table in the Excel file.

  1. 挿入 タブで ギャラリー、し、垂直します。On the Insert tab, select Gallery, and then select Vertical.

    垂直方向のギャラリーを追加します。

  2. プロパティオープンの右側のウィンドウのタブ、項目、一覧表示し、 Flooring Estimatesします。On the Properties tab of the right-hand pane, open the Items list, and then select Flooring Estimates.

    床材見積もり

  3. (省略可能)レイアウト一覧で、別のオプションを選択します。(optional) In the Layout list, select a different option.

  1. ホーム] タブで [新しい画面 > リスト画面します。On the Home tab, select New screen > List screen.

    含む画面、ギャラリーコントロールと、検索バーなどの他のコントロールが表示されます。A screen that contains a Gallery control and other controls, such as a search bar, appears.

  2. ギャラリーの Items プロパティを FlooringEstimates に設定します。Set the gallery's Items property to FlooringEstimates.

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

    データの表示

その他のカスタマイズを実行する前にいることを確認のレイアウト、ギャラリー目的に最も合致するコントロール。Before you do any other customization, ensure that the layout for your Gallery control most closely matches what you want. そこから、さらに変更できます、ギャラリー 、テンプレートを決定する方法のすべてのデータ、ギャラリーコントロールが表示されます。From there, you can further modify the Gallery 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 selecting the pencil icon in its 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. ギャラリーを選択し、編集横にフィールド上、プロパティ右側のウィンドウのタブ。Select the gallery, and then select Edit next to Fields on the Properties tab of 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. この手順でベースのフィルター条件に、どのような順序で表示するレコードも決定されるようにプロパティを構成します。In this procedure, you configure that property so that it also determines which records appear based on filter criteria and in what order.

検索ボックスと並べ替え アイコン

  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
        )
    )
    

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

  2. 検索ボックスをダブルクリックし、その中の製品名の一部またはすべてを入力します。Double-click the search box, and then type part or all of a product name in it.

    フィルター条件を満たす項目のみが表示されます。Only those items that meet the filter criterion appear.

  3. Alt キーを押しながらには、1 回以上並べ替えアイコンを選択、並べ替え順序を切り替える。While pressing the Alt key, select the sort icon one or more times to switch the sort order.

    レコードは、昇順と降順の製品名に基づいてアルファベット順の順序を切り替えます。The records toggle between ascending and descending alphabetical order based on the product name.

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

設定、ギャラリーコントロールのTemplateFillする場合は、プロパティをこの例では次のような数式には異なる色を指定できます。Set the Gallery control's TemplateFill property to a formula that's similar to this example, but you can specify different colors if you want:

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. たとえば、5 番目の項目を指定できます、 FlooringEstimatesデータ ソース。For example, you can 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

フォーム数式を使用する方法について確認しておきます。Learn how to work with forms and formulas.