はじめに
久しぶりの投稿となります。Microsoft365のライセンス（Basicライセンス）の範囲で使えるPower Apps、Power AutomateのTipsについてご紹介していこうと思います。
業務アプリで使う一覧はギャラリーではなくエクセルの様に横に並べて多くの列を表示させたいという要望があるかと思います。シンプルなデータテーブルで事足りればそれでいいのですが、ボタンやアイコンを入れたり、条件で色変えしたりとギャラリーでなくては出来ない場合は、通常はギャラリーで実装し横スクロールがないので見える範囲までを配置することになります。
今回は上記を解消するギャラリー自体を水平コンテナーに入れて、横スクロール対応させる実装を紹介します。
実装サンプル動画
ギャラリーの横スクロールについて
そもそもギャラリーは標準で横スクロールしてくれないの？と思いますが、デフォルトで表示されよく利用される「垂直ギャラリー」では縦スクロールしかありません。反対に水平ギャラリーは横スクロールしかありません。
データテーブル・テーブルであれば対応しているが・・
データテーブルは標準で横スクロールに対応しています。ギャラリーと比較してボタン入れるや条件による色変えには対応していません。
またモダンのテーブルコントロール（現時点プレビュー）であれば自動幅調整やスクロールも対応します。本来はこれが一番近いイメージですが、現時点プレビューで、OnSelectの処理が怪しかったりするのでGAされればこちらがメインとなると思います。
実装サンプル
さっそく実装ですが、今回のサンプルの最終系は以下の感じです。
- 垂直コンテナー 全部の親。直下にラベルと水平コンテナー2つ
- 水平コンテナー１（ヘッダー部分）
- 水平コンテナー２（ギャラリー部分）
★ヘッダー部分も一緒にスクロールさせるため最上位に垂直コンテナーを使いそこにスクロールを付けています。
各コントロールのプロパティ値
左：①の最上位の垂直コンテナー 真ん中：タイトルラベル 右：②のヘッダー部の水平コンテナー
左：②の中のラベル（Width以外同じ） 真ん中：③のギャラリー部の水平コンテナー 右：③の中のギャラリー
垂直コンテナー部分の設定
まず最初に垂直コンテナーを用意して幅などを調整します。この時点で水平方向のオーバーフローをスクロールにしておきます。配置（水平方向）は先頭にします。
次にタイトルラベルを追加します。高さの自動調整はOFFで幅を1300など大きくはみ出るようにします。
この幅は以降のコンテナーやギャラリーと合わせましょう。この段階で横スクロールが出ます。
水平コンテナー（ヘッダー部分）
次にヘッダー部分です。先にギャラリーの方を作って後で追加してもOKです。
水平コンテナーを追加し上記を参考に設定します。幅がラベルと同じはみ出るサイズ、配置は先頭にします。スクロールは垂直コンテナーで出しているのでなしにします。伸縮可能もオフにして高さを50くらいにします。
※幅はLabel.Widthにしておくとラベルだけ変えれば調整できます。
その配下にヘッダー用ラベルを追加していきます。
幅の伸縮可能はオフにしておきます。Textとwidthを内容に合わせて調整します。それ以外はどれも同じ値になります。
水平コンテナー（ギャラリー部分）
最後にギャラリーを入れる水平コンテナー部分です。
水平コンテナーを追加し上記を参考に設定します。幅がラベル同様にはみ出るサイズ、配置は先頭にします。こちらもスクロールは垂直コンテナーで出しているのでなしにします。
※こちらも幅はLabel.Widthにしておくとラベルだけ変えれば調整できます。
ギャラリーの中身は割愛していますが、普通にギャラリーにラベルや画像、アイコンやボタンなど入れて位置調整をします。見えていない部分は横スクロールすれば出てくるのでプレビューで確認します。
おわりに
上記で横スクロールに対応した垂直ギャラリーが出来ました。基本的な操作のみで簡単にできますね。
垂直・水平コンテナーのプロパティ調整は他のコントロールと違ってクセが強いので、最初はなかなか思った通りの調整が出来ません。少しプロパティの値が違うだけでガラッと変わってくるので、色々触って慣れていきましょう。
公式：レスポンシブなキャンバス アプリの構築 – Power Apps | Microsoft Learn
※自身が個人ブログで投稿している内容をリライトしております（転用ではありません）
Power Platform コンサルティングサービスについて
本サービスはPower Platform（主にPower Apps、Power Automate）をご利用のお客様において、開発時や運用時のお困りごとに対し、チャットやTV会議を用いてのQA対応やアドバイス、サンプルコードのご提供などの業務サポートを行い、お客様のDX化推進業務を強くサポートするサービスとなります。
導入事例
今回ご紹介したアプリや本ブログにご興味をお持ちになられましたら、技術支援や同様のカスタマイズ開発など、各種ご支援させていただきますので、お気軽に「お問い合わせフォーム」よりお問い合わせください。
今後も自社で開発したお役立ちアプリや技術支援を行ったアプリのご紹介など、定期的に更新を行ってまいります。