PowerApps ギャラリーで異なる高さのアイテムを表示するShow items of different heights in a PowerApps gallery

データ セットの各アイテムの同一フィールドに含まれるデータ量が異なる場合、含まれるデータを量が少ないアイテムの後にスペースを挿入しなくても、データ量が多いアイテムの全体を表示することができます。If different items in your data set contain different amounts of data in the same field, you can completely show items that contain more data without adding empty space after items that contain less data. 高さ可変ギャラリーを追加し、次の操作を行えるように構成します。Add and configure a Flexible height gallery control so that you can:

  • コンテンツに合わせて伸縮するようにラベル コントロールを構成する。Configure Label controls to expand or shrink based on their contents.
  • 各コントロールを、上にあるコントロールのすぐ下に自動で表示されるように配置する。Position each control so that it automatically appears just under the control above it.

このチュートリアルでは、高さ可変ギャラリー コントロールにフローリング製品に関するデータを表示します。In this tutorial, you show data about flooring products in a Flexible height gallery control. 各製品画像は、概要の行数が 5 行と 2 行のどちらの場合でも概要の 5 ピクセル下に表示します。The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

完成版のアプリ

推奨記事Suggested reading

ギャラリーにコントロールを追加したことがない場合は、このトピックの先へ進む前にアイテムのリストの表示に関するページを参照してください。If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

空のアプリにデータを追加するAdd data to a blank app

  1. この Excel ファイルをダウンロードします。このファイルには、フローリング製品の名前、概要、画像へのリンクが含まれています。Download this Excel file, which contains names, overviews, and links to images of flooring products.

    フローリング製品

  2. Excel ファイルを、OneDrive、Dropbox、Google Drive などのクラウドストレージ アカウントにアップロードします。Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. PowerApps Studio の [ファイル] メニューの [新規] をクリックまたはタップします。In PowerApps Studio, click or tap New on the File menu.
  4. [空のアプリ] タイルで、[携帯電話レイアウト] をクリックまたはタップします。On the Blank app tile, click or tap Phone layout.

    [File (ファイル)] メニューの [New (新規)] オプション

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

    詳細については、接続の追加に関するページを参照してください。For more information, see Add a connection.

  1. [挿入] タブの [ギャラリー] をクリックまたはタップし、[変動する高さ] をクリックまたはタップします。On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    ギャラリーの追加

  2. 画面全体を占めるようにギャラリーのサイズを変更します。Resize the gallery to take up the entire screen.
  3. ギャラリーの Items プロパティを FlooringEstimates に設定します。Set the gallery's Items property to FlooringEstimates.

製品名を表示するShow the product names

  1. ギャラリーの左上隅にある鉛筆アイコンをクリックまたはタップして、ギャラリー テンプレートを選択します。In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    鉛筆のアイコン

  2. ギャラリー テンプレートを選択した状態で、ラベル コントロールを追加します。With the gallery template selected, add a Label control to it.
  3. ラベル コントロールの Text プロパティに次の式を設定します。Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    ラベルの追加

製品の概要を表示するShow the product overviews

  1. ギャラリー テンプレートを選択した状態で、別のラベル コントロールを追加し、1 番目のラベル コントロールの下に移動させます。With the gallery template selected, add another Label control, and move it below the first Label control.
  2. 2 番目のラベル コントロールの Text プロパティに、次の式を設定します。Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. 2 番目のラベル コントロールを選択した状態で、[コンテンツ] タブの名前タグ アイコンをクリックまたはタップし、コントロールの名前を OverviewText (概要テキスト) に変更します。With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    ラベルの名前を変更する

  4. OverviewText ボックスの AutoHeight プロパティを true に設定します。Set the AutoHeight property of the OverviewText box to true.

    この手順により、ボックスがそのコンテンツに合わせて伸縮するようになります。This step ensures that the box will grow or shrink to fit its contents.

    テキストの高さの自動設定

製品画像を表示するShow the product images

  1. テンプレートのサイズを、高さが 2 倍になるように変更します。Resize the template so that it's twice as tall as it was.

    アプリの作成時にテンプレートへコントロールを追加しやすくなりました。この変更はアプリの実行時の見た目に影響しません。You can add controls to the template more easily as you build the app, and this change won't affect how the app looks when it runs.

  2. ギャラリー テンプレートを選択した状態で、イメージ コントロールを追加し、OverviewText ボックスの下に移動させます。With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. イメージ コントロールの Image プロパティに次の式を設定します。Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. 次の式のように、OverviewText ボックスの位置とサイズを基にイメージ コントロールの Y プロパティを設定します。Set the Y property of the Image control based on the position and the size of the OverviewText box, as in this expression:
    OverviewText.Y + OverviewText.Height + 5OverviewText.Y + OverviewText.Height + 5

    完成版のアプリ

他のコントロールを追加する場合も考え方は同じです。各コントロールの Y プロパティを、その上にあるコントロールの Y プロパティと Height プロパティに基づいて設定します。Apply the same concept if you want to add more controls: set each control's Y property based on the Y and Height properties of the control above it.

次の手順Next steps

ギャラリー コントロールと数式の使用方法について確認してください。Learn more about how to work with a gallery control and formulas.