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

前提条件

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

  1. PowerApps を開き、左端近くにある [新規] をクリックまたはタップします。

  2. [空のアプリ] タイルで、[携帯電話レイアウト] をクリックまたはタップします。

  3. [PowerApps Studio へようこそ] ダイアログ ボックスで、[スキップ] をクリックまたはタップします。

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

  5. (省略可能) 既定の画面にギャラリー コントロールを追加します。このためには、[挿入] タブをクリックまたはタップするか、[ギャラリー] をクリックまたはタップして、空 (空白) の、または既定のコントロール セットを含むギャラリー コントロールをクリックまたはタップします。

    これらのオプションには、水平方向または垂直方向にスクロールするギャラリー コントロールなどがあります。 各項目のコンテンツの量に応じてそのサイズを自動的に調整するギャラリー コントロールを追加することもできます。

    ギャラリーを追加する

  6. [ホーム] タブで、[新しい画面] をクリックまたはタップします。

    空の画面、スクロールできる画面、ギャラリー コントロールを含む画面、またはフォームを含む画面を追加することができます。

  7. [リスト画面] をクリックまたはタップして、ギャラリー コントロールや、検索バーなどのコントロールを含む画面を追加します。

    : 新しい画面または既存の画面にギャラリー コントロールを追加するには、ギャラリー コントロールの下部付近をクリックまたはタップして選択し、右側のウィンドウで [FlooringEstimates] をクリックまたはタップしてから、[データ] ウィンドウで別のレイアウトをクリックまたはタップします。 このチュートリアルの場合、既定のレイアウトをそのまま使用します。

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

  8. 追加した画面でギャラリー コントロールをクリックまたはタップします。

  9. 右側のウィンドウの [プロパティ] タブで、[CustomGallerySample] をクリックまたはタップします。

  10. [データ] ウィンドウで、[CustomGallerySample] をクリックまたはタップしてから、[FlooringEstimates] をクリックまたはタップします。

    データソースの選択

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

    データの表示

    並べ替えと検索は、このトピックの後半で構成します。

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

カスタマイズを行う前に、ギャラリー コントロールのレイアウトを決定します。 ギャラリー コントロール内のコントロールの最初のセットはテンプレートで、これにより、ギャラリー コントロール内のすべてのデータがどのように表示されるかを指定します。

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

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

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

    ラベルの追加

  3. テンプレートを選択し、右側のウィンドウで [FlooringEstimates] をクリックまたはタップして、[データ] ウィンドウを開きます。

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

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

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

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

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

最終ギャラリー

ギャラリー コントロールをフィルター処理する

ギャラリー コントロールの Items プロパティで、表示する項目を指定します。 この手順では、製品名に TextSearchBox1 内のテキストを含む項目のみがギャラリー コントロールに表示されるように、このプロパティを構成します。

テキスト検索ボックス

  1. ギャラリー コントロールの下部付近をクリックまたはタップしてギャラリー コントロールを選択します。

  2. [詳細設定] タブで、ギャラリー コントロールの Items プロパティを次の数式に設定します。

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

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

  3. 検索ボックスに、製品名の一部またはすべてを入力します。

    ギャラリー コントロールに、フィルター条件を満たす項目のみが表示されます。

ギャラリー コントロールを並べ替える

ギャラリー コントロールの Items プロパティで、項目を表示する順序を指定します。 この手順では、ImageSortUpDown1 で設定された項目の順序で項目がギャラリー コントロールに表示されるように、このプロパティを構成します。

並べ替えのイメージ

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

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

  2. 並べ替えアイコンを選択して、ギャラリー コントロールの並べ替え順序を製品名順に変更します。

ギャラリー コントロールの並べ替え*および*フィルター処理を行うには、次のようにします。

  • この数式の DataSource の 2 つのインスタンスを、使用するデータ ソースの名前に置き換えます。
  • ColumnName の 2 つのインスタンスを、並べ替えおよびフィルター処理に使用する列の名前に置き換えます。

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

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

ギャラリー コントロールの TemplateFill プロパティを、次の例のような式に設定します。

If(ThisItem.IsSelected, LightCyan, White)

既定の選択を変更する

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

Last(FirstN(FlooringEstimates, 5))

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

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

次の手順