技術情報ブログ
Power Platform
2023.09.06

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

Power Apps:縦×横スクロール可能なギャラリーの作り方
小刀稱知哉

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

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

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

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

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

 

完成イメージ

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

 

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

 

データテーブル vs ギャラリー

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

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

データテーブル
データテーブル

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

  • デザインに関する制限が大きい

    データテーブルではギャラリーと比較し、デザインに関する制限が大きいです。

    例:アイコンの追加ができない

      文字を中央揃えにできない など

  • AllItemsプロパティがない

    データテーブルには、ギャラリーに実装されている「AllItems」プロパティがありません。(2023年9月時点)

    データの件数をチェックする際にAllItemsプロパティはよく使うので、本プロパティ実装されていないのは、結構不便だなぁ、、、と私個人としては思っています。

    AllItems
    AllItems

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

 

縦×横スクロールのギャラリーの実装方法

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

 

全体構成

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

構成を以下に示します。

構成
構成

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

  • 水平コンテナ ※図の赤枠部分

  • コンテナ(タイトル) ※図の緑枠部分

  • ギャラリー(データ表示用) ※図の黄枠部分

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

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

コンテナ配下のテキスト ラベル
コンテナ配下のテキスト ラベル

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

 

水平コンテナ

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

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

水平コンテナの設定値
水平コンテナの設定値
  • 水平方向のオーバーフローを「スクロール」にする

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

  • 折り返すを「オン」にする

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

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

 

コンテナ(タイトル)

続いて、コンテナ(タイトル)です。

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

コンテナ(タイトル)の設定値
コンテナ(タイトル)の設定値

ポイントとしては、以下の設定値です。

  • 幅(伸縮可能)を「オフ」にする

    本設定を行うことで、コンテナ(タイトル)の横幅が水平コンテナより大きい場合でも、そのままの横幅で表示されます。

    ※本設定を「オン」にすると、水平コンテナの横幅に応じて、コンテナ(タイトル)の横幅が縮小されてしまいます。

 

ギャラリー(データ表示用)

最後に、ギャラリー(データ表示用)です。

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

ギャラリー(データ表示用)の設定値
ギャラリー(データ表示用)の設定値

ポイントとしては、以下の設定値です。

  • 幅(伸縮可能)を「オフ」にする

 

その他

上記までで、基本的な設定は完了です。

後は、コンテナ(タイトル)内にタイトル用のテキスト ラベルを配置したり、ギャラリー内の設定を行ってください。

今回のギャラリーの場合は、各コントローラの配置は以下のようになりました。

各コントローラーの配置
各コントローラーの配置

 

おわりに

今回は、縦×横スクロールが可能なギャラリーの実装方法について紹介しました。
本機能を用いると、データの表示項目が多い、かつデータの件数が多い場合でも見やすい形で表示することが可能です。

標準コントローラーを組み合わせて新しい機能を作成する場合、実装のアイデアが必要となります。
(実は今回の実装方法のアイデアについては、お客様から教えていただきました(笑))

このような内容は、「知っていれば一瞬」ですが「知らなければ多くの時間が必要」となります。

当社では、今回のような実装のアイデアを多く発信していく予定ですので、是非今後ともご覧ください。

最後まで読んでいただき、ありがとうございました!

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当:小刀稱知哉

小刀稱知哉

大分県出身(温泉大好き♥♥)、現在は東京都在住

1990年4月9日生まれ

30才にしてメーカーの技術営業からIT業界にジョブチェンジ!!!

趣味は読書

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当しております!

シェアする
記事カテゴリ
最新記事
2024.04.03

非エンジニア【(元)自治体職員】が半年間ローコード開発をしてみたら

2024.03.27

Power Automateのベストプラクティス・アンチパターン(5)【Apply to each×コンカレンシー×変数の設定はNG】

2024.03.20

Power Apps×Teams:Teams上からPower Appsを実行する方法

2024.03.13

Power Apps:SharePointリストと連携したカレンダーアプリを自作してみよう

2024.03.06

SharePointのあったらいいなを集めました(X-SPのご紹介)

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目シェアポイント便利機能カレンダーCalendarTeamsローコード開発非エンジニア体験談
PageTop
ページトップに戻る