PowerApps で自動的にアプリを生成したら、既定で表示されるブラウズ画面をカスタマイズしましょう。 使用するレイアウトと表示する列、さらにレコードの並べ替えとフィルター処理に使用する列を指定します。

前提条件

このチュートリアルは、概念全般を理解する目的でのみご覧いただいても、目的を果たすために各手順を忠実に実行していただいてもかまいません。

  1. PowerApps から SharePoint への接続を作成します。
  2. 以下の列を含んだ AppGen という名前の SharePoint リストを作成します。

    SharePoint のサンプル列

  3. 作成したリストに以下の項目を追加します。

    サンプル データ

  4. 作成したリストに基づいてアプリを自動的に生成します。

ギャラリーのカスタマイズ

  1. 左側のナビゲーション バーで一番上のサムネイルをクリックまたはタップし、BrowseScreen1 を選択します。

    BrowseScreen1 のサムネイル

    BrowseScreen1 に、SharePoint リスト内の各項目の AccountIDTitle が表示されます。

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

    次にそれぞれの項目に関して、AccountID ではなく OrderDate が表示されるように指定します。

  2. 画面上の最初の項目の AccountID をクリックまたはタップします。

    UI 要素 (コントロール) をクリックまたはタップして選択すると、コントロールの周囲に選択状態を示す境界線とサイズ変更ハンドルが表示されます。

    最初の項目を選択

  3. 右側のウィンドウで、[Title1] リストを開いてから、[OrderDate] をクリックまたはタップします。

    タイトルを表示

    BrowseScreen1 に変更が反映されます。

    日付を含んだレイアウト

ギャラリーについて詳しくは、「PowerApps の項目の一覧の表示」をご覧ください。

並べ替え列と検索列の設定

  1. 1 つ目を除く任意のレコードをクリックまたはタップしてギャラリー コントロールを選択します。

    ギャラリーを選択

  2. 左上隅のプロパティ一覧に Items が表示されていることを確認します。

    Items プロパティ

    このプロパティの値は数式バーに表示され、画面に表示されるデータのソースに加え、フィルター列と並べ替え列を左右します。

    たとえば、数式バーには次のような式が既定で表示されます。

    既定の Items プロパティ

    ユーザーはこの式に基づいて、AccountID 列が 1 つ以上の文字で始まるレコードのみを表示することができます。

    既定の検索列

    たとえばユーザーがアルファベットの「A」を検索バーに入力すると、Europa のレコードが画面に表示されます。 指定した検索条件に対してレコードのタイトルは一致しませんが、アカウント ID が一致します。 この手順の後半で、Title 列に基づいてレコードをフィルター処理するように式を変更します。

    ユーザーは、生成されたアプリの右上隅の並べ替えボタンをクリックまたはタップすることにより、アルファベットの昇順または降順でレコードを並べ替えることができます。 次の式は、AccountID 列に基づいてレコードを並べ替えるように指定しています。

    既定の並べ替え列

    後からこの手順の中で、Title 列でレコードを並べ替えるように式を変更します。

  3. 数式バーで、AccountID の両方のインスタンスを Title に置き換えます (2 つ目のインスタンスを囲んだ二重引用符を含む)。

    変更後の数式バーには、次のように式が設定されている必要があります。
    SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))

    : これまでに行った操作によっては、TextSearchBox の後に表示される数字がもっと大きい場合があります。 ただし数式の機能には問題ありません。

並べ替えと検索のテスト

  1. F5 キーを押して (または右上隅の再生ボタンをクリックまたはタップして) プレビュー モードを開始します。

    プレビュー モードを開始

  2. BrowseScreen1 の右上隅にある並べ替えボタンを少なくとも 1 回クリックまたはタップして、アルファベットに基づく表示順を昇順または降順に変更します。

    並べ替えボタンのテスト

  3. 検索ボックスに文字を入力すると、タイトルがその文字で始まるレコードのみが表示されます。

    検索バーのテスト

  4. 検索バーからテキストをすべて削除し、Esc キーを押して (または PowerApps のタイトル バーの "" にある閉じるアイコンをクリックまたはタップして) プレビュー モードを終了します。

    プレビュー モードの終了

画面のタイトルの変更

  1. 画面のタイトルをクリックまたはタップして選択します。

    画面タイトルを選択

  2. プロパティの一覧に Text を表示した状態で、数式バーに目的の名前を二重引用符で囲んで入力します。

    画面タイトルの更新

    BrowseScreen1 に変更が反映されます。

    新しい画面タイトル

次の手順

  • Ctrl + S キーを押して変更を保存する。
  • フォームに表示されるフィールドの表示と非表示を変更したり表示順を変更したりして、アプリのフォームをカスタマイズする。