次の方法で共有


チュートリアル: Power Apps でギャラリーをカスタマイズする

このチュートリアルでは、ギャラリーと呼ばれるレコードの一覧をカスタマイズし、Microsoft Power Apps で自動的に生成されたアプリでその他の変更を行います。 これらの変更を行わない場合でも、ユーザーはアプリ内のデータを管理できますが、組織のニーズに合わせてカスタマイズすると、アプリの方が使いやすくなります。

たとえば、このチュートリアルのギャラリーは、既定でこのグラフィックと一致します。 メール アドレスは他の種類のデータよりも目立つように表示され、ユーザーはそのアドレス内のテキストに基づいてギャラリーを並べ替えたりフィルター処理したりできます。

既定のギャラリー。

ただし、ユーザーはメール アドレスよりもアカウント名に関心を持つ可能性があるため、組織のキー データに基づいてギャラリーを再構成して強調表示、並べ替え、フィルター処理を行います。 さらに、既定の画面のタイトルを変更して、アプリ内の他の画面と区別します。

変更後のギャラリー。

また、タッチ スクリーンやマウス ホイールを持たないユーザーがギャラリー全体を参照できるように、スクロール バーを追加します。

  • ギャラリーのレイアウトを変更する
  • ギャラリーに表示されるデータの種類を変更する
  • ユーザーがデータを並べ替えたり検索したりできる列を変更する
  • 画面のタイトルを変更する
  • スクロール バーを表示する

このチュートリアルは、特定のデータ ソースから生成されたアプリから始まります。 ただし、Microsoft Lists、SharePoint ライブラリ、Excel テーブル、またはその他のデータ ソースを使用して作成されたリストから取得した場合でも、Power Apps で生成するアプリにも同じ概念が適用されます。

Power Apps にサインアップしていない場合は、開始する前に 無料でサインアップ してください。

[前提条件]

Microsoft Dataverse の Accounts テーブルからアプリを生成します。

生成されたアプリを開く

  1. Power Apps にサインインし、左端付近にある [アプリ] を選択します。

  2. 生成したアプリを探し、その省略記号アイコン (...) を選択し、[ 編集] を選択します。

    編集用にアプリを開きます。

  3. [ Power Apps Studio へようこそ ] ダイアログ ボックスが表示されたら、[ スキップ] を選択します。

レイアウトを変更する

  1. 左側のナビゲーション ウィンドウで、 BrowseGallery1 を選択します。

    ギャラリーを選択すると、ハンドルを含む選択ボックスが周囲に表示されます。

    ギャラリーを選択します。

  2. 右側のウィンドウの [プロパティ ] タブで、[ レイアウト] の下にあるオプションの一覧を開き、タイトルのみを表示するオプションを選択します。

    タイトルのみのレイアウトを選択します。

  3. [フィールド] の横にある [編集] を選択し、タイトル ボックスの下矢印を選択します。

    このコントロールの名前は Title1 などの数字で終わるものですが、他の操作によって数字が異なる場合があります。

  4. オプションの一覧で [ アカウント名] を選択し、[ データ ] ウィンドウを閉じます。

    ギャラリーには、各アカウントの名前が表示されます。

    最後のギャラリー。

並べ替え列と検索列を変更する

  1. 前のセクションで説明したように、ギャラリーを選択します。

    ギャラリーが強調表示されています。

  2. 左上隅の近くで、プロパティの一覧に [アイテム] が表示されていることを確認します。

    Items プロパティ。

    このプロパティの値が数式バーに表示されます。 このプロパティは、ギャラリーのデータ ソースだけでなく、ユーザーがデータを並べ替えて検索できる列も指定するように設定します。

  3. この数式をコピーし、数式バーに貼り付けます。

    SortByColumns(Search(Accounts, TextSearchBox1.Text, "name"), "name", If(SortDescending1, Descending, Ascending))

    この数式を使用すると、次のことを確認できます。

    • ユーザーが検索バーに 1 つ以上の文字を入力した場合、ギャラリーには、ユーザーが入力したテキストを含むアカウント名のみが表示されます。
    • ユーザーが並べ替えアイコンを選択した場合、ユーザーがアイコンを選択した回数に応じて、ギャラリーはアカウント名のアルファベット順に昇順または降順で並べ替えられます。

    これらの関数とその他の関数の詳細については、数式のリファレンスを参照してください。

並べ替えと検索をテストする

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

    プレビュー モードを開きます。

  2. 参照画面の右上隅付近で、並べ替えアイコンを 1 回以上選択して、昇順と降順の間でアルファベット順の並べ替え順序を変更します。

    並べ替えアイコンをテストします。

  3. 検索ボックスに「 k 」と入力すると、入力した文字を含むアカウント名のみが表示されます。

    検索バーをテストします。

  4. 検索バーからすべてのテキストを削除し、Esc キーを押して (または右上隅の近くの閉じるアイコンを選択して) プレビュー モードを閉じます。

画面のタイトルを変更する

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

    画面のタイトルを選択します。

  2. プロパティ リストに Text が表示されていることを確認し、数式バーで AccountsBrowse に置き換えます (二重引用符を保持します)。

    画面のタイトルを更新します。

    画面に変更内容が反映されます。

    新しい画面タイトル。

スクロール バーを表示する

ユーザーがタッチ スクリーンもマウス ホイールも持っていない可能性がある場合は、ユーザーがマウスでスクロール バーをポイントしたときにスクロール バーを表示するようにギャラリーを構成します。 そうすることで、画面で一度にすべてのアカウントを表示できない場合でも、ユーザーはすべてのアカウントを表示できます。

  1. 最初の手順で説明されているように、ギャラリーを選択します。

    スクロール バーのギャラリーが強調表示されています。

  2. ギャラリーの スクロール バーの表示 プロパティを true に設定 します

次のステップ

このチュートリアルでは、ギャラリーをカスタマイズし、生成されたアプリのレコードを参照するための既定の画面に他の変更を加えました。 また、詳細を表示したり、アカウントを作成または更新したりするための既定の画面をカスタマイズすることもできます。 参照画面にはギャラリーが含まれているので、アプリ内の他の 2 つの画面にはフォームが含まれます。 たとえば、フォームに表示されるデータの種類と順序を変更できます。