PowerApps でのギャラリー レイアウトのカスタマイズCustomize a gallery layout in PowerApps

PowerApps で自動的にアプリを生成したら、既定で表示されるブラウズ画面をカスタマイズしましょう。After you generate an app automatically in PowerApps, customize the browse screen, which appears by default. 使用するレイアウトと表示する列、さらにレコードの並べ替えとフィルター処理に使用する列を指定します。Specify which layout to use, which columns to show, and which columns to use when sorting and filtering records.

前提条件Prerequisites

このチュートリアルは、概念全般を理解する目的でのみご覧いただいても、目的を果たすために各手順を忠実に実行していただいてもかまいません。You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. PowerApps から SharePoint への接続を作成します。Create a connection from PowerApps to SharePoint.
  2. 以下の列を含んだ AppGen という名前の SharePoint リストを作成します。Create a SharePoint list, named AppGen, that contains these columns.

    SharePoint のサンプル列

  3. 作成したリストに以下の項目を追加します。Add these items to the list that you just created.

    サンプル データ

  4. 作成したリストに基づいてアプリを自動的に生成します。Generate an app automatically based on the list that you just created.
  5. 左側のナビゲーション バーで、右上のアイコンをクリックまたはタップしてサムネイル表示に切り替えます。In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    表示の切り替え

  1. 左側のナビゲーション バーで一番上のサムネイルをクリックまたはタップし、BrowseScreen1 を選択します。In the left navigation bar, click or tap the top thumbnail to ensure that BrowseScreen1 is selected.

    BrowseScreen1 のサムネイル

    BrowseScreen1 に、SharePoint リスト内の各項目の AccountIDTitle が表示されます。BrowseScreen1 shows the AccountID and Title of each item in the SharePoint list.

    ブラウズ画面にタイトルとアカウント ID が表示される

    次にそれぞれの項目に関して、AccountID ではなく OrderDate が表示されるように指定します。Next, you'll specify that the OrderDate for each item will appear instead of the AccountID.

  2. 画面上の最初の項目の AccountID をクリックまたはタップします。Click or tap the AccountID for the first item on the screen.

    UI 要素 (コントロール) をクリックまたはタップして選択すると、コントロールの周囲に選択状態を示す境界線とサイズ変更ハンドルが表示されます。When you click or tap a UI element (called a control), you select it, and a selection border with resize handles appears around that control.

    最初の項目を選択

  3. 右側のウィンドウで、[Title1] リストを開いてから、[OrderDate] をクリックまたはタップします。In the right-hand pane, open the Title1 list, and then click or tap OrderDate.

    タイトルを表示

    BrowseScreen1 に変更が反映されます。BrowseScreen1 reflects your change.

    日付を含んだレイアウト

ギャラリーについて詳しくは、「PowerApps の項目の一覧の表示」をご覧ください。For more information about galleries, see Show a list of items in PowerApps.

並べ替え列と検索列の設定Set the sort and search columns

  1. 1 つ目を除く任意のレコードをクリックまたはタップしてギャラリー コントロールを選択します。Select the Gallery control by clicking or tapping any record except the first one.

    ギャラリーを選択

  2. 左上隅のプロパティ一覧に Items が表示されていることを確認します。Near the upper-left corner, ensure that the property list shows Items.

    Items プロパティ

    このプロパティの値は数式バーに表示され、画面に表示されるデータのソースに加え、フィルター列と並べ替え列を左右します。The value of this property, which appears in the formula bar, determines not only the source of data that appears on the screen but also the filter and sort columns.

    たとえば、数式バーには次のような式が既定で表示されます。For example, the formula bar might contain this formula by default.

    既定の Items プロパティ

    ユーザーはこの式に基づいて、AccountID 列が 1 つ以上の文字で始まるレコードのみを表示することができます。Based on this formula, users can show only those records that start with one or more letters in the AccountID column.

    既定の検索列

    たとえばユーザーがアルファベットの「A」を検索バーに入力すると、Europa のレコードが画面に表示されます。If a user typed, for example, the letter "A" into the search bar, the screen would show the record for Europa. 指定した検索条件に対してレコードのタイトルは一致しませんが、アカウント ID が一致します。The title of that record doesn't match the search criterion, but the account ID does. この手順の後半で、Title 列に基づいてレコードをフィルター処理するように式を変更します。Later in this procedure, you'll change the formula to filter records based on the Title column.

    ユーザーは、生成されたアプリの右上隅の並べ替えボタンをクリックまたはタップすることにより、アルファベットの昇順または降順でレコードを並べ替えることができます。In any generated app, users can sort records alphabetically in ascending or descending order by clicking or tapping the sort button near the upper-right corner. 次の式は、AccountID 列に基づいてレコードを並べ替えるように指定しています。This formula specifies that the records will be sorted based on the AccountID column.

    既定の並べ替え列

    後からこの手順の中で、Title 列でレコードを並べ替えるように式を変更します。Later in this procedure, you'll change the formula to sort the records based on the Title column instead.

  3. 数式バーで、AccountID の両方のインスタンスを Title に置き換えます (2 つ目のインスタンスを囲んだ二重引用符を含む)。In the formula bar, replace both instances of AccountID with Title (including the double quotation marks around the second instance).

    変更後の数式バーには、次のように式が設定されている必要があります。The formula bar should now contain a formula that resembles this example:
    SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))

    : これまでに行った操作によっては、TextSearchBox の後に表示される数字がもっと大きい場合があります。Note: The number that appears after TextSearchBox might be higher, depending on what actions you took previously. ただし数式の機能には問題ありません。However, the formula should still work as expected.

並べ替えと検索のテストTest sorting and searching

  1. F5 キーを押して (または右上隅の再生ボタンをクリックまたはタップして) プレビュー モードを開始します。Open Preview mode by pressing F5 (or by clicking or tapping the play button near the upper-right corner).

    プレビュー モードを開始

  2. BrowseScreen1 の右上隅にある並べ替えボタンを少なくとも 1 回クリックまたはタップして、アルファベットに基づく表示順を昇順または降順に変更します。Near the upper-right corner of BrowseScreen1, click or tap the sort button one or more times to change the alphabetical sort order between ascending and descending.

    並べ替えボタンのテスト

  3. 検索ボックスに文字を入力すると、タイトルがその文字で始まるレコードのみが表示されます。In the search box, type one more letters to show only those records of which the title starts with the letter or letters that you type.

    検索バーのテスト

  4. 検索バーからテキストをすべて削除し、Esc キーを押して (または PowerApps のタイトル バーの "" にある閉じるアイコンをクリックまたはタップして) プレビュー モードを終了します。Remove all text from the search bar, and then close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar for PowerApps).

    プレビュー モードの終了

画面のタイトルの変更Change the title of the screen

  1. 画面のタイトルをクリックまたはタップして選択します。Click or tap the title of the screen to select it.

    画面タイトルを選択

  2. プロパティの一覧に Text を表示した状態で、数式バーに目的の名前を二重引用符で囲んで入力します。Ensure that the property list shows Text, and then type the name that you want, surrounded by double quotation marks, in the formula bar.

    画面タイトルの更新

    BrowseScreen1 に変更が反映されます。BrowseScreen1 reflects your change.

    新しい画面タイトル

次の手順Next steps

  • Ctrl + S キーを押して変更を保存する。Press Ctrl-S to save your changes.
  • フォームに表示されるフィールドの表示と非表示を変更したり表示順を変更したりして、アプリのフォームをカスタマイズする。Customize the forms in the app by showing, hiding, and reordering the fields that the forms show.