アプリに ギャラリー コントロールを追加して、任意のデータ ソースからの項目の一覧を表示します。 このトピックでは、データ ソースとして Excel を使用します。 ギャラリーを構成して、テキスト入力コントロール内のフィルター条件に一致する項目のみを表示するように、一覧をフィルター処理します。
前提条件
- PowerApps でコントロールを追加して構成する方法について確認します。
サンプル データを設定する:
- この Excel ファイルをダウンロードして、チュートリアルのサンプル データを取得します。
- Excel ファイルを OneDrive for Business などのクラウド ストレージ アカウントにアップロードします。
ギャラリーを追加する
PowerApps を開き、左端近くにある [New] (新規) をクリックまたはタップします。
[空のアプリ] タイルで、[携帯電話レイアウト] をクリックまたはタップします。
Excel ファイル内の FlooringEstimates テーブルへの接続を追加します。
(省略可能) 既定の画面にギャラリーを追加します。このためには、[挿入] タブをクリックまたはタップするか、[ギャラリー] をクリックまたはタップして、し、空 (空白) であるか、既定のコントロール セットを含むギャラリーをクリックまたはタップします。
これらのオプションには、水平方向または垂直方向にスクロールするギャラリーなどがあります。 各項目のコンテンツの量に応じてそのサイズを自動的に調整するギャラリーを追加することもできます。
[ホーム] タブで、[新しい画面] をクリックまたはタップします。
空の画面、スクロールできる画面、ギャラリーを含む画面、またはフォームを含む画面を追加することができます。
[リスト画面] をクリックまたはタップして、ギャラリーや、検索バーなどのコントロールを含む画面を追加します。
注: 新しい画面または既存の画面にギャラリーを追加するには、ギャラリーの下部の近くをクリックまたはタップして選択し、右側のウィンドウで別のレイアウトを選択します。 このチュートリアルの場合、既定のレイアウトをそのまま使用します。
右側のウィンドウで、データ ソースをクリックまたはタップして、[FlooringEstimates] をクリックまたはタップします。
ギャラリーに、サンプル データが表示されます。
並べ替えと検索は、このトピックの後半で構成します。
ギャラリーにコントロールを追加する
カスタマイズを行う前に、ギャラリーのレイアウトを決定します。 ギャラリー内のコントロールの最初のセットはテンプレートで、これにより、ギャラリー内のすべてのデータがどのように表示されるかを指定します。
ギャラリーの下部の近くをクリックまたはタップしてから、ギャラリーの左上隅にある鉛筆アイコンをクリックまたはタップして、テンプレートを選択します。
ラベル コントロールをギャラリー テンプレートに追加し、テンプレート内の他のコントロールと重ならないように、新しいコントロールを移動して、サイズを変更します。
ラベル コントロールがまだ選択された状態で、右側のウィンドウに強調表示されたリストを開きます。
表示したフィールドの一覧で、[Price] をクリックまたはタップします。
ギャラリーに、新しい値が表示されます。
ギャラリーをフィルター処理する
ギャラリーの Items プロパティで、表示する項目を指定します。 この手順では、製品名に TextSearchBox1 内のテキストを含む項目のみがギャラリーに表示されるように、そのプロパティを構成します。
ギャラリーの Items プロパティを次の数式に設定します。
If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))
この数式内の関数について詳しくは、「数式のリファレンス」をご覧ください。
検索ボックスに、製品名の一部またはすべてを入力します。
ギャラリーに、フィルター条件を満たす項目のみが表示されます。
ギャラリーを並べ替える
ギャラリーの Items プロパティで、項目を表示する順序を指定します。 この手順では、ImageSortUpDown1 に設定された項目の順序でギャラリーに表示されるように、そのプロパティを構成します。
ギャラリーの Items プロパティを次の数式に設定します。
Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))
並べ替えアイコンを選択して、製品の名前で、ギャラリー内の並べ替え順序を変更します。
ギャラリーの並べ替えと*フィルター処理を行うには、この数式内の *DataSource の両方のインスタンスをデータ ソースの名前で置き換え、ColumnName の両方のインスタンスを、並べ替えとフィルター処理を行う列の名前で置き換えます。
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"))