はじめに
今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
その①では新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法
その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成、レイアウトやページ構成などの概要部分
その③ではギャラリーの基本的な調整とカスタマイズのサンプル
その④では初期状態でちょっと怪しい部分を調整するサンプル
その⑤ではフォーム内の列幅をWitdhFitプロパティできれいに調整する実装について
その⑥ではソート（並び替え）の切り替えをタブリストを使って2つの要素で変更する実装サンプルをご紹介しました。
その⑦では別記事でアップしたモダンコントロールのタブリストを使って、画面上部フライアウトメニューを追加するサンプルです。
自動生成アプリの作成については前回までの記事をご参考ください。作成後の修正点について以降記載していきます。
この部分だけ実装することももちろん可能ですが、記事では前回までに作成したアプリをベースに記載しています。
TIPS※日本環境 2024/1/18 時点のバージョン：3.24012.8の内容で記載しています
サンプル動画
本記事のハンバーガーメニューの部分と次に記載する記事のギャラリー内フライアウトメニューの動画です
モダンコントロールの有効化
モダンコントロールがオフの場合は以下の記事を参考に機能をオンにしておきます。
モダンコントロール モダンテーマの機能オンについて
2023年からキャンバスアプリのモダンコントロールとモダンテーマが順次リリース、更新されています。 その中で本機能をオンにする箇所が変更となったり変更が都度入っています。 他の記事を書く際に都度オンにする方法を載せていたんですが、今後も変更の可能性があるのでこの部分のみ記事にしました。...
タブリストの概要や実装例など
実は以下記事でタブリストのことは記載しています。
概要やフライアウトメニューとして使用する場合の手順などは基本以下に書いてますので、こちらご参考ください。
本記事では詳細は割愛し、上記の実装をベースにフライアウトメニューを追加していきます。
モダンコントロール タブリストがかなりイケてる！（フライアウトメニューなど）
はじめに 今回はモダンコントロールで追加されたタブリスト（Tablist）を使った実装についてご紹介します。追加された当初にPower Apps 界隈では超有名人のドラーニさんが動画でフライアウトメニューとしての活用を紹介されており、すぐに飛びつきました！自分は現時点で一番好きなモダンコント...
サンプルSharePointリストの構成
カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。
今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。
自動生成 レスポンシブアプリのカスタマイズ ② 自動生成アプリ概要 | Power Apps Tips ログ (youseibubu.com)
ヘッダー部にメニューを追加する
まずはヘッダー部にメニュー（ハンバーガーメニューのような）ものを追加してみます。
従来はギャラリーをカスタムして作るのが基本でしたが、タブリストを使うとサクッと作れます。
見た目のディティールなどはあまりこだわれないので、機能面やデザイン面で足りない場合はギャラリーで作成するのがよいです。
ギャラリーでハンバーガーメニューを作るサンプル：
【パワスロ:Tips】ハンバーガーメニューの作り方 | Power Apps Tips ログ (youseibubu.com)
ヘッダー部に通常コンテナーを追加
そのままタブリストを追加してもいいんですが、背景は透過のみ、表示位置もあまり調整効かないので、
今回は一旦通常のコンテナーを追加してその中にタブリストを追加しています。
- ヘッダー部に通常コンテナーを追加
- 高さをParent.Heightにする
- 幅の伸縮可能をオフにして最小幅を50くらいに
- 色は白など薄目に指定、境界半径は0など調整（親コンテナに付いてるので）
タブリストをコンテナーに追加
上記のコンテナーを選択しタブリストを追加します。
- コンテナーを選択して＋アイコンからモダン＞タブ一覧を選択
- 収まる範囲で入るので幅や高さ、位置を微調整（中央寄せなど）
- デザインを調整（例ではフォントを20にしているくらい）
こんな感じになります
ヘッダーメニューのItemsや処理を実装する
タブリストのOnSelectで選択したレコードに応じて処理を切り替える実装をします。
この部分は用途に応じてですが、別画面への遷移（Navigate）だったり、ダイアログ画面でなんか表示したり、アプリを終了するなどを入れたりするイメージかと思います。
コレクションや変数で定義しておき処理を切り分けて実装
タブリストにコレクションやテーブル定義を指定して、IDやタイトル、処理の種類、リンク先URLなどの値を入れておいて、OnSelectで切り分けて実装できます。
シンプルな内容ならOnSelectでタイトルで処理を切り分ける実装でもいいと思いますが、
メンテナンス面を考慮（リンク先が変わるなど）するとコレクション化しておいた方が良いかと思います。
コレクション化して処理を実装するのは別記事でもご紹介しているドラーニさんの動画でやられてますので、こちらをご参考にされるとよいです。
Build Power Apps Navigation & Flyout Menus with Modern Tab List control 🚀 (youtube.com)
以下抜粋ですが、こんな感じでOnStartでコレクションを定義していて、タブリストのItemsに指定、
タブリストのOnSelectで処理を切り分けています。
以下のサンプルではタブリストのItemsに直接このような定義を書いたシンプル版でご紹介します。
また、処理用のURLなどもOnSelect側に書いたパターンです。
シンプル目の実装：Itemsに定義
デフォルトで定義されているような感じ([“item1″,”item2″,”item3”])でもいいんですが、そうするとタイトルを変えたらOnSelectも変更必要なのでID、タイトルという感じで定義しています。参考記事にも書いた絵文字も使ったパターンでやっています。
Code[
{ID:1,Title:”🛖 ホーム”}
,{ID:2,Title:”⚙️ 設定画面”}
,{ID:3,Title:”📨 メール送信”}
,{ID:4,Title:” 終了”}
]※文字数が異なる、絵文字なしの部分を余白で調整してます
NOTE！定義を変更すると一旦以下のように変な表示となります。これは表示するフィールドが変更されたからですね。
こういった場合はタブリストのフィールドをクリックし、フィールドの追加＞今回だとTitleを追加します。
これで元の通りタイトルが表示されるようになります。
OnSelectで処理を分岐して記載
OnSelectに以下のように処理を記載します。
１：ホームへ遷移
２：設定画面へ遷移 ※
３：メールアプリを起動（指定ユーザー宛にTOを入れて既定のアプリを起動）
４：アプリを終了
※設定画面はサンプルの画面を追加しました。設定画面の方にもこのメニューをコピーして配置しています。
TIPSIfを使った分岐でもSwitchでもOKです。Switchの方が記載はスッキリはします。
Code//Ifで書く場合
If(Self.Selected.ID=1,
Navigate(MainScreen1),
Self.Selected.ID=2,
Navigate(MenteScreen),
Self.Selected.ID=3,
Launch(“mailto:testtest@yousei.com”),
Self.Selected.ID=4,
Exit()
);
//Switchの場合
Switch(Self.Selected.ID,
1, Navigate(MainScreen1),
2, Navigate(MenteScreen),
3, Launch(“mailto:testtest@yousei.com”),
4, Exit()
);
一部例を載せると、設定画面をクリックで設定画面へ遷移します。
メール起動をクリックすると既定のメールアプリで指定したアドレスをTOに入れてメールアプリを起動します。
※固定ユーザーで管理者への連絡的な位置づけのサンプルなので「問い合わせ」の方がしっくりきますね💦
TIPSLaunchではURLの表示のみではなく他アプリを起動なども出来ます。
その辺はこちらの記事がご参考となるかと思います。
Power Apps URLスキームとLaunchを使ってできること色々｜電話やメール、LINEやEdgeの起動なんかも (ippu-biz.com)
他の画面でも共通して使用する場合は変数での管理がよい
上記ではシンプル目にタブリストのItemsへ直接定義しましたが、他の画面へコピー（この場合設定画面）しての使用が可能ですが、メンテナンスが入る場合はそれぞれを修正しないといけません。
そういった点では事前にコレクションや変数で定義しておいたものを指定しているほうが、対応箇所が少なくて修正漏れもなくなるのでやはりオススメです。
最低限、メールの宛先やリンクページのURLなど変わる可能性があるものは変数で定義しておく方がいいですね。
他にも色々な処理を実装可能
今回はよくあるナビゲートやアプリ終了などを入れてますが、その他にもよくある処理は入れれますね。
インポート用などのダイアログを開く（別途作成したもの）→表示用の変数を更新して表示
他のキャンバスアプリやサイトのページを開く →Launchで開く
何かしら処理させる系 →処理を呼び出しなど。
画面上に常に表示しているとスペースを取られるので、そういったものはメニュー化して使用できるようにしたほうがよいかと思います。
レスポンシブ対応
タブレットやスマホのプレビューで見てもいい感じに収まっています。
参考：メニューをギャラリーで作る場合
ギャラリーでハンバーガメニューを作るサンプルは以下のパワスロアプリで記事にしています。
タブリストでサクッと作成する場合でデザイン的に物足りない場合はこちらご参考にギャラリーで作成いただくと良いかと思います。
【パワスロ:Tips】ハンバーガーメニューの作り方
はじめに パチスロアプリでも使用している、ハンバーガーメニューの作り方を記事にしました。使用頻度が低めのメニューや設定関連のメニューはクリック時に表示すると画面を広く使えます。特にモバイルで効果的ですね。 よく使うのは表示されていたほうが嬉しいけど、あんまり使わないやつはメニューで表示される...
おわりに
今回はタブリストを使ったメニュー作成のサンプルをご紹介しました。
本当はギャラリー内に実装するフライアウトメニューも載せたかったのですが、想定より長くなったので次回にいたします。
タブリストの概要やその他実装については別記事で書いてますのでそちらもご参考ください。それでは。
関連記事
モダンコントロール タブリストがかなりイケてる！（フライアウトメニューなど）
モダンコントロール タブリストがかなりイケてる！（フライアウトメニューなど）
はじめに 今回はモダンコントロールで追加されたタブリスト（Tablist）を使った実装についてご紹介します。追加された当初にPower Apps 界隈では超有名人のドラーニさんが動画でフライアウトメニューとしての活用を紹介されており、すぐに飛びつきました！自分は現時点で一番好きなモダンコント...
自動生成
Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント