Power Apps：縦×横スクロール可能なギャラリーの作り方

アプリ開発の調査にかかる
時間を削減したい

アプリを自分たちで
作成できるようになりたい

プロに開発を依頼したい

SharePoint デザイン拡張サービス

モダン化から運用管理までサポート

こんにちは。アーティサン株式会社の小刀稱（ことね）です。

Power Appsキャンバスアプリでアプリを構築する際、ギャラリーを使用することはとても多いと思います。

ギャラリーで表示する項目が多い場合、縦スクロールと一緒に横スクロールで表示したいと思ったことはありませんか？
実は通常のギャラリーの場合は、縦スクロールのみ、または横スクロールのみとなっており、
縦と横スクロールが同時に可能なギャラリーを実装することはできません。

これではデータの表示項目が多い、かつデータの件数が多い場合に困ってしまいます。
そこで今回は、縦×横スクロールが可能なギャラリーの実装方法について紹介します。

完成イメージ

はじめに今回作成するギャラリーについて紹介します。

ご覧の通り、縦と横のスクロールを用いてギャラリー全体の内容を表示しています。

本項目以降で、縦×横スクロールのギャラリーの実装方法を紹介しますが、その前にPower Appsでは「データテーブル」というコントローラーがあるのをご存知でしょうか？

実はこのコントローラーを用いると、標準で縦×横スクロールでデータを表現可能です。

ただし、データテーブルは以下のようなデメリットがあります。

簡易的に実装するのであれば、データテーブルを使う場面もあるかと思いますが、デザインの設定を行いたい場合や、データの件数チェックを行う場合はギャラリーを用いることを推奨いたします。

それでは、以下で縦×横スクロールのギャラリーについて、実装方法を紹介します

まずは全体構成について紹介します。
縦×横スクロールを実装するには、水平コンテナの中にギャラリーを配置することがポイントです。

構成を以下に示します。

今回は以下3つのコントローラーを用います。

水平コンテナの配下にコンテナとギャラリーを配置します。

また、コンテナ（タイトル）の中にはタイトルを表示するためのテキストラベルを配置します。

以下では、各コントローラーの詳細について説明していきます。

まずは、水平コンテナです。

設定値は以下のとおりです。

水平方向のオーバーフローを「スクロール」にする

本設定を行うことで、配下に配置されているコントローラー（今回の場合は、コンテナ（タイトル）とギャラリー）の横幅が水平コンテナより大きい場合は、横スクロールが表示されるようになります。
折り返すを「オン」にする

コンテナ（タイトル）とギャラリーを上下で配置するため、折り返すを「オン」にします。
※折り返すを「オフ」にすると、コンテナ（タイトル）とギャラリーが左右に配置されてしまいます。

折返しの「オン」と「オフ」