PowerAppsギャラリー初心者ガイド レイアウト変更やデザインカスタマイズの基本を学びExcelやSharePointとの連携やデータの受け渡し方法まで徹底解説

PowerApps
スポンサーリンク

ギャラリーとは?データを一覧表示する基本機能

PowerAppsのギャラリーは、アプリ内でデータを一覧表示するための代表的なコントロールです。単にレコードを並べるだけでなく、リスト型やカード型といった複数の形式で表示できるため、ユーザーの利用シーンに応じた柔軟なデザインが可能です。例えば、従業員一覧や商品リスト、顧客からの問い合わせ内容などを表形式で並べることで、情報の比較や検索がスムーズになります。また、ギャラリーは動的にデータソースと連動するため、新しいデータが追加された際も自動的に反映され、常に最新の状態をユーザーに提供できます。さらに、スクロールや選択といった操作も標準でサポートされており、ユーザーが直感的に情報を確認できる点が大きな利点です。こうした特徴から、業務アプリを効率的に作成する上で欠かせない重要なコントロールといえます。

スポンサーリンク

ギャラリーに接続できるデータ

スポンサーリンク

ギャラリーは、ExcelやSharePoint、Dataverseなどさまざまなデータソースと接続できます。たとえば、Excelの表形式データを一覧表示したり、SharePointリストを直接読み込んでカード表示することが可能です。さらに、SQL ServerやOneDrive上のファイル、Teamsのリストなどクラウドやオンプレミスを問わず幅広いデータと連携できるため、既存の業務資産をそのままアプリに取り込むことができます。加えて、接続先ごとに列名や型が異なる場合も、PowerAppsの式を利用することで簡単に調整が可能です。この柔軟性により、ユーザーは必要に応じて複数のデータソースを組み合わせ、一つのギャラリーに統合して表示することもできます。

アイテムの表示形式変更

スポンサーリンク

PowerAppsのギャラリーは、デフォルトで画像とテキストの組み合わせなど複数のレイアウトが用意されています。表示形式を変更することで、見やすさや用途に応じたデザインに切り替えることができます。

  • タイトルのみ表示 → シンプルなリスト型

  • 画像+タイトル+サブタイトル → カード型レイアウト

デザインカスタマイズで見栄えを向上

ギャラリーは色やサイズ、高さなどを自由に調整できます。背景色をブランドカラーに変更したり、選択時の強調色を設定することで、ユーザーにとって操作しやすいデザインに仕上げられます。また、フォントの種類や文字サイズを統一することで見栄えを整えたり、アイコンや境界線を追加して情報の区切りを明確にすることも可能です。さらに、マージンやパディングを適切に設定することで要素同士の余白が整い、全体の可読性が高まります。これらの調整を組み合わせることで、単なる一覧表示からプロフェッショナルなアプリ画面へと進化させることができます。

コード例:選択時の色を変更

TemplateFill = If(ThisItem.IsSelected, RGBA(200,230,255,1), RGBA(255,255,255,1))

この設定により、選択した行だけが水色にハイライトされます。

ギャラリー内で選択した行のデータを他画面へ渡す方法

アプリを業務で活用する際に便利なのが、ギャラリーで選択したアイテムを他画面に渡す仕組みです。これを実現するには Gallery.Selected を利用します。たとえば、社員名簿から特定の人物を選び、詳細画面でプロフィールや関連タスクを表示するケースなどで役立ちます。また、顧客リストから選択した顧客の情報を注文画面へ渡すといった使い方も可能です。

コード例:詳細画面に遷移して選択アイテムを渡す

OnSelect = Navigate(DetailScreen, ScreenTransition.Fade, {SelectedItem: Gallery1.Selected})

この式を設定すると、ボタンやアイテムをクリックした際に「DetailScreen」へ移動し、選択中のレコードを「SelectedItem」として受け渡せます。受け渡したデータは遷移先の画面で簡単に呼び出せるため、複数の画面間でスムーズに情報を共有でき、アプリの使い勝手が大幅に向上します。

まとめと次回予告

今回は、PowerAppsギャラリーの基本的な使い方と、レイアウト変更やデザインカスタマイズのポイントについて解説しました。ギャラリーはデータを見やすく表示するだけでなく、デザインを工夫することで使いやすさが大きく向上します。また、選択したデータを別画面に渡す方法を組み合わせれば、アプリの操作性はさらに高まります。

次回は「PowerAppsボタンに条件分岐を追加する方法 If関数入門」をテーマに、より実践的なロジックの活用について解説します。これを学ぶことで、さらに高度なアプリ作成に挑戦できるようになります。

関連記事:PowerAppsでボタン操作だけで画面遷移を実装する方法とNavigate関数の基本構文やパラメータ渡し応用事例まで徹底解説

PowerAppsでアプリを作る手順を初心者向けにゼロからやさしく解説する5分チュートリアル完全版【2025年対応】

 

スポンサーリンク

コメント

タイトルとURLをコピーしました