キャンバス アプリの項目の一覧を表示する

キャンバス アプリにギャラリー コントロールを追加して、任意のデータ ソースからの項目の一覧を表示します。 このトピックでは、データ ソースとして Excel を使用します。 テキスト入力 コントロールのフィルター条件に一致する項目のみを表示するようにギャラリー コントロールを構成して、一覧をフィルター処理します。

前提条件

• Power Apps で コントロールを追加して構成する 方法について確認します。

• サンプル データの設定:

  1. この Excel ファイル をダウンロードして、チュートリアルのサンプル データを取得します。

  2. Excel ファイルを OneDrive for Business などの クラウド ストレージ アカウント にアップロードします。

• 空のアプリを開く:

  1. 空白のキャンバス アプリ を作成します。

  2. Excel ファイル内の FlooringEstimates テーブルへ 接続を追加します。

空白のスクリーンにギャラリーを追加する

1. 挿入タブで、ギャラリーを選択してから、縦を選択します。

   

2. 右側のウィンドウのプロパティ タブで、Items の一覧を開いてから、Flooring Estimates を選択します。

   

3. (オプション) レイアウトの一覧で、別のオプションを選択します。

スクリーンにギャラリーを追加する

1. ホーム タブで、新しいスクリーン>リスト スクリーン を選択します。

   ギャラリー コントロールおよび検索バーなどのコントロールを含むスクリーンが表示されます。

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

   ギャラリー コントロールに、サンプル データが表示されます。

   

ギャラリー コントロールにコントロールを追加する

他のカスタマイズを行う前に、ギャラリー コントロールのレイアウトが、必要なものに最も近いことを確認します。 そこから、ギャラリー テンプレートをさらに変更できます。これによって、ギャラリー コントロールでのすべてのデータの表示方法が決まります。

1. ギャラリー コントロールの下部付近を選択してから、左上隅にある鉛筆アイコンを選択して、テンプレートを選択します。

   

2. テンプレートを選択した状態で、ラベル コントロールを追加し、テンプレート内の他のコントロールと重ならないように、追加したコントロールを移動し、サイズを変更します。

   

3. ギャラリーを選択してから、右側のウィンドウのプロパティ タブで、フィールドの横にある編集を選択します。

4. この手順で先に追加したラベルを選択して、データ ウィンドウで強調表示されたリストを開きます。

   

5. このリストで価格をクリックまたはタップします。

   ギャラリー コントロールに新しい値が表示されます。

   

ギャラリーのフィルター処理と並べ替え

ギャラリー コントロールの Items プロパティにより、表示する項目が決まります。 この手順では、フィルター条件に基づいて表示されるレコードとその順序も決定するように、そのプロパティを構成します。

1. ギャラリー コントロールの Items プロパティを次の数式に設定します。

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

   この数式内の関数について詳しくは、数式のリファレンス をご覧ください。

2. 検索ボックスをダブルクリックし、そこに製品名の一部またはすべてを入力します。

   フィルター条件を満たすアイテムのみが表示されます。

3. Alt キーを押しながら、並べ替えアイコンを 1 回以上選択して、並べ替え順を切り替えます。

   レコードは、製品名に基づいてアルファベット順の昇順と降順を切り替えます。

選択した項目を強調表示する

ギャラリー コントロールの TemplateFill プロパティをこの例に似た数式に設定しますが、必要に応じて異なる色を指定できます。

If(ThisItem.IsSelected, LightCyan, White)

既定の選択を変更する

ギャラリー コントロールの Default プロパティを、既定で選択するレコードに設定します。 たとえば、FlooringEstimates データ ソースの 5 番目の項目を指定できます。

Index(FlooringEstimates, 5)

この例では、FlooringEstimates データ ソースの Hardwood カテゴリにある、最初の項目を指定します。

LookUp(FlooringEstimates, Category = "Hardwood")

次の手順

フォーム と数式 を使用する方法について説明します。