ギャラリー 表示切替えサンプル（リスト表示とカード表示）

はじめに

今回はキャンバスアプリのギャラリー表示を切り替えて表示するサンプル実装をご紹介します。
基本は１つのギャラリー表示だと思いますが、画像がメインとなるようなアプリだとこういう工夫があると見栄えや使い勝手がいい感じだよね！というものです。といっても2つ作って切り替えているだけですが💦
ショッピングサイトのスマホ版などでは見かける機能かなーと思います。以下、この部分だけの簡単なサンプルをご紹介していきます。

サンプル動画

サンプルの動画です。スマホ版レイアウトで空で作ってギャラリーと切替え部分のみ実装したサンプルです。

⓪ アプリを作成（サンプルではスマホ版レイアウト 空から）

今回のサンプルではスマホ版レイアウトの空から作成して既存のリストをギャラリー表示からスタートしています。

TIPS今回のサンプルは画像データがあれば何でもよいので、サンプルをご参考にご自身のデータに置き換えてご調整ください。

SPOリスト（サンプルでは商品リスト、画像データあり）

スマホ版レイアウトで空から作成
（サンプルの場合はなので自動生成版でも問題ないです）

① １つめのギャラリー（リスト表示）を作る

まず、普通にギャラリーを作りましょう。
詳細は割愛しますが、デフォルトで作成されるリスト表示のレイアウトをベースにしています。

以下のようにギャラリーの中身を任意に調整していただければOKです。よくある一般的なリスト形式のギャラリー表示ですね。
※本サンプルでは切替え表示の部分の説明なのでボタン処理や他画面などは作ってません。

② ２つめのギャラリー（カード表示）を作る

次にカード表示形式のギャラリーを作ります。
一旦①のギャラリーをコピーして貼り付けます。

コピーしたギャラリーを選択して、レイアウトからギャラリー「タイトルとサブタイトル（重ねて配置）」を選択します。
（自分で最初から調整してもOKですが一旦これベースが楽なので）

以下のようにコピーしたギャラリーの中身は初期化されてカードタイプの配置になります。
（コピーせずギャラリーの追加でもいいですがItemsなども複製するためコピーしてます）

一旦2つのギャラリーが重なって表示されると思います。
①のギャラリーは邪魔なので一旦VisibleをFalseにして非表示にします。

②のギャラリーをこのレイアウトをベースに任意に調整します。①のパーツ（ボタンなど）をコピペで簡略化出来ます。

調整後のサンプル
こちらも任意なので詳細割愛しますが、①のパーツを移植して大きさや位置調整、ホバー時にオーバーレイがかかるように四角形をかぶせて調整などをしています。

③ 切替えコントロールを作る（サンプルではタブリスト）

次に表示切替え用のコントロールを作ります。今回のサンプルではモダンコントロールのタブリスト（TabList）を使っています。
この部分はボタンでもスイッチでもいいと思います。お好みで調整ください。

TIPS※以降の表示制御はタブリストを前提に選択した値で判定していますが、ボタンの場合は変数を更新して判定に使用、スイッチならオンオフで判定などでご調整ください

モダンコントロールから「タブ一覧」を追加。
Itemsを[“リスト表示”, “ギャラリー”] にする

配置位置や大きさ、お好みで色など調整する

④ 表示設定を調整する

タブリストが出来たら、この選択値をギャラリーの表示（Visible）に設定します。
このサンプルでは以下のように設定しています。
タブリストの選択に合わせて①のギャラリー、②のギャラリーを表示、非表示にします。

Code① リスト形式のギャラリーのVisibleプロパティ

TabList1.Selected.Value=”リスト表示”

②のギャラリーも同様の記述でもいいですが、このサンプルでは選択が2つしかないので、
①のギャラリーが表示されている場合は表示しないという書き方をしてます。

Code② カード形式のギャラリーのVisibleプロパティ
!Gallery1.Visible

※普通に以下でもよい。
TabList1.Selected.Value=”ギャラリー”

ギャラリーのItemsの調整について

この状態で基本完成です。どちらにもデータ取得や保持しているのが若干ネックではあります。
ただ監視モニターで確認したところ非表示中のギャラリーのデータは特に再取得しにいってなかったので、大量データ表示があり重くなる。ということがなければそのままでよいかと思います。

以下のように無駄を省く調整を検証しましたが、試した内容だとあまり意味がなかったり逆効果かも？な結果でした。
（良い方法があるかもしれない。知っていたらご教授ください）

以下試してみた調整です。

・非表示の時は空として表示時にデータソースとつなぐ（どちらも以下のようにする）
→こうした場合、切り替えるたびにデータソースに取得しに行く動きだったので逆効果の様でした。。

②つめのギャラリーのItemsを①のギャラリーのAllItemsにする
※この場合は添付ファイルの画像だと取れないと思います
→これも切り替えると初回は同じようにデータソースから取得していましたので特に意味がないようでした。

参考：監視モニター
・初回表示時にそれぞれ取得する動きだった。
・非表示のギャラリー分はリフレッシュしても再取得はされていなかった。
・非表示時に空とする実装にしたら切り替えるたびに再取得していて逆効果のようだった。

非表示コントロールのパフォーマンスの強化も少し関連

以下のプロパティが今は既定でオンになっていますが、この場合、最初に非表示だとそのコントロールは作成されないので、初回表示時に2つとも取得しに行くことがなく初回切り替え時に取得します。オフの場合は初回表示時に2つとも取得しにいっていました。リフレッシュに関してはどちらにしても１ギャラリー分しか再取得されてなかったので影響はなさそうでした。

おまけ：SaveDataで記憶させる

SaveData、LoadDataを使うとブラウザやスマホアプリに情報をキャッシュ出来るので、それを使って再表示時に前回表示していたギャラリーを開くとすることも出来ます。ざっくりとこの部分の実装例です。

タブリストのOnChangeに以下のようにSaveDataで選択した値を入れる
コレクション名、SaveData名は任意　
→SaveDataの第1引数のコレクションを第2引数の名前でローカル保持するイメージ

NOTESaveData、LoadDataは編集画面では効かないので動作するとそのエラーが出ますが、公開して実行では効きますのでこのエラーは無視でOKです。

NOTE※ブラウザ向けには機能でWebプレーヤでSaveData、LoadDataをオンの必要あり（現在は既定でオン）

App.OnStartにLoadDataの実装
コレクションに指定したローカルキャッシュの名前のデータを入れる
値がある場合はタブリストの初期値用変数に値を設定。無ければ既定値としてリスト一覧を指定する

タブリストのDefaultSelectedItemsに以下のように指定する
上記で指定した変数を[]で囲み配列化した書き方　※{Value:galDefault}でもよい

NOTEこの部分は本当はレコードをそのまま指定でうまくいく想定でしたが、なぜかFirst(SelectCol)などではうまくいかず。{Value:”ギャラリー”}や[“ギャラリー”]という感じで指定しないとダメでした。。
※First(SelectCol)でおんなじ型で取れているんだけどなーと思いましたがまあスルーで。

TIPSSaveData、LoadDataは以下パワスロの記事では概要や実装などもう少し詳しく書いているのでご参考ください。
【パワスロ:Tips】SaveData、LoadDataを使ってローカルキャッシュ保存する | Power Apps Tips ログ (youseibubu.com)

このようにすると前回カードタイプのギャラリーを開いていてアプリを閉じた場合、再実行時にはブラウザ（またはスマホアプリ）のキャッシュデータからそれを取得して最初からギャラリーで開くようにすることが出来ます。

おわりに

今回はギャラリーの表示切替えのお話でした。やっているのは2つ作って表示切り替えているだけなので特別なことはひとつもやっていないですね💦
こんなのは普通はなくてもいいんですが（笑）、カードタイプで見やすく表示したいけど、やっぱリストタイプも必要だよねーとお悩みの方がいましたらご参考にしてください。
特に商品一覧など画像がメインとなる場合は良い感じのデザインかなーと思います。

コスト的にはリストとカードのギャラリーをひとつにして動的に配置やサイズなどを切り替えて調整するほうが、今回のようにギャラリーを2つ用意してデータソースをそれぞれつなぐよりはコスト落とせると思いますが、実装が面倒だと思うので楽にできるサンプルという感じでご紹介しました。
データ量が多くこの対応を入れると結構重くなる。。という場合はやらない方がいいかと思います。
ケースバイケースでお試しください。それでは！