自動生成 レスポンシブアプリのカスタマイズ ⑧ タブリストでギャラリー内フライアウトメニュー

はじめに

今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
その①では新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法
その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成、レイアウトやページ構成などの概要部分
その③ではギャラリーの基本的な調整とカスタマイズのサンプル
その④では初期状態でちょっと怪しい部分を調整するサンプル
その⑤ではフォーム内の列幅をWitdhFitプロパティできれいに調整する実装について
その⑥ではタブリストを使ったソート（並び替え・対象列を切替え）の実装サンプル
その⑦ではタブリストを使って、画面上部にサクッとハンバーガーメニューを追加するサンプルをご紹介しました。

その⑧ではタブリストを使ったギャラリー内フライアウトメニューを追加するサンプルです。

自動生成アプリの作成については前回までの記事をご参考ください。作成後の修正点について以降記載していきます。
この部分だけ実装することももちろん可能ですが、記事では前回までに作成したアプリをベースに記載しています。

TIPS※日本環境 2024/1/18 時点のバージョン：3.24012.8の内容で記載しています

サンプル動画

前回の記事の画面上部ハンバーガーメニューと今回のギャラリー内フライアウトメニューの動画です

モダンコントロールの有効化

モダンコントロールがオフの場合は以下の記事を参考に機能をオンにしておきます。

タブリストの概要や実装例など

実は以下記事でタブリストのことは記載しています。
概要やフライアウトメニューとして使用する場合の手順などは基本以下に書いてますので、こちらご参考ください。
本記事では詳細は割愛し、上記の実装をベースにフライアウトメニューを追加していきます。

サンプルSharePointリストの構成

カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。
今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。

自動生成 レスポンシブアプリのカスタマイズ ② 自動生成アプリ概要 | Power Apps Tips ログ (youseibubu.com)

ギャラリー内フライアウトメニューを追加

さっそくギャラリーにフライアウトメニューを追加していきます。
基本タブリストを入れて縮めればいいんですが、背景を付けれなかったりするので、
以下サンプルでは一旦通常コンテナーを入れてその中にタブリストをいれています。

ギャラリーにコンテナー（通常）を追加する

• ギャラリーを選択して、ギャラリー内の編集アイコンをクリック
• クラシックからコンテナー（通常のもの）を追加
• コンテナーを縮めて右上のスペースへ移動する（合わせて＞も少し下へ移動）

この時点でドロップシャドウや角丸がデフォルトで入っていますのでいい感じですね

タブリスト（タブ一覧）を追加する

追加したコンテナーにタブリストを入れます。すでに縮んでいるので…表示となります。
位置を微調整して、コンテナーの方では背景色、角丸やドロップシャドウなどお好みで調整します。

• コンテナーを選択して＋アイコンからモダン＞タブ一覧を追加
• 位置を微調整（以下ではYをー5にして真ん中に来るように調整）
• 背景色を微調整（以下では白の半透明にした）※透過のままでもよさそう

コンテナーのXをレスポンシブ対応にする

上記でぱっと見よさそうですが、スマホレイアウトにした場合などに見切れてしまいます。
コンテナーのXをレスポンシブに対応させます。
以下ではギャラリーのTemplateWidthから自分のWitdhを引いて（この時点で右端固定）そこから20マイナスの位置に配置しています。

CodeコンテナーのX：
Parent.TemplateWidth – Self.Width – 20
※TemplateWidth はParent.Widthを使っても同様

ここままで見た目的には一旦調整出来ました。以下のようにフライアウトメニューが作れたと思います。
次項でItemsやOnSelectを調整していきます。

追加情報を表示するサンプル

まずシンプルな情報表示のサンプルです。この辺は別記事で書いたタブリストの記事の内容と同様です。
絵文字も使っていないパターンです。空白を入れて項目名と値の間を微調整しています。

Itemsを設定

Code//タブリストのItems
[
  “カテゴリ：” & ThisItem.カテゴリ.Value
  ,”Price　　：” & ThisItem.Price
  ,”更新日　：” & Text(ThisItem.更新日時,”yyyy/mm/dd”)
  ,”更新者　：” & ThisItem.更新者.DisplayName
]

※空白を入れて項目名と値の間を微調整

シンプルですが表示エリアが狭いギャラリーに効果的ですね！

OnSelectは使用なし

クリック時の処理は行わないのでOnSelectはFalseとします。

CodeタブリストのOnSelect: false

情報の表示と処理系を合わせて実装するサンプル

処理系のサンプルはその⑦の記事で書いたメニューの実装と同様なので割愛します。
以下では、情報の表示と処理系を合わせてみたというサンプルです。
思い付きで作ってみましたがこれも悪くない気がします。

Itemsを設定（インデントを付けて表現）

それぞれの区分けがわかりやすいように情報、操作としてインデントを付けて表現しています。

Code[
  “情報：”
  ,”　カテゴリ：” & ThisItem.カテゴリ.Value
  ,”　Price　　：” & ThisItem.Price
  ,”　更新日　：” & Text(ThisItem.更新日時,”yyyy/mm/dd”)
  ,”　更新者　：” & ThisItem.更新者.DisplayName
  ,”操作：”
  ,If(ThisItem.SoldOut,”　🎁販売中にする”,”　❌SoldOutにする”)
  ,”　🗑️削除”
]

※操作系の表示ではSoldOut（TRUE,FALSE）によって表示を切り替えている

OnSelectに処理実装

OnSelectには操作系の分のみ実装を入れています。
以下の例では値が操作系のタイトルの場合はPatch処理で更新する感じのサンプルです

NOTEこの例ではシンプルにするためにValueをそのまま使っていますが、その⑦でやったようにIDとValueという感じにレコード型で指定した方がOnSelectの処理が絡むとメンテしやすいですね。
そのあたりはその⑦の記事をご参考に調整ください。

Code//タブリストのOnSelect
If(Self.Selected.Value = “　🎁販売中にする” || Self.Selected.Value = “　❌SoldOutにする”,
　Patch(商品リスト,ThisItem,{SoldOut:!ThisItem.SoldOut})
,Self.Selected.Value = “　🗑️削除”,
　Patch(商品リスト,ThisItem,{削除フラグ:”1″})
)
※操作系の値の場合のみ実装を記載
※販売中、SoldOutは状態によって表示が変わるのでそれに合わせて調整している

上記で操作系をクリックするとOnSelectの処理が実行されて、SoldOutが切り替わります。
※削除フラグは特にギャラリーの表示調整をしていないので見た目変わらずですが、リストの値は更新されます。

NOTEサンプルリストに合わせた実装なので、実際の構成に合わせてご調整ください。

おわりに

ということで前回、今回とタブリストを使ったメニュー作成のサンプル記事でした。
タブリストについての概要やサンプルは別記事でも書いているんですが、自動生成アプリへ適用する際の具体的な調整なども含めて記事にいたしました。

次回はモダンコントロールのヘッダーを追加やギャラリーとフォーム部の割合を変更する実装などを記事にしようかと思います。それでは！

関連記事

モダンコントロール タブリストがかなりイケてる！（フライアウトメニューなど）

自動生成