Power Apps
2024.05.24
2024.11.27
2

キャンバスアプリフォームタブリストで表示項目切替え

コンテンツ

はじめに

キャンバスアプリのフォームのサンプルをもとに便利なプロパティを紹介していますが、
今回はモダンコントロールのTabList（タブリスト）を使った同一フォームの表示切替えのサンプルです。
他の記事でも見かけたりするかもなのでさらっと。

サンプル動画

サンプルではValidプロパティのほか、タブリストで表示切替え、下書き・本番モード切替え、Updatesプロパティを使って確認フォームを作るサンプルとなっています。

タブリストについて

モダンコントロールのタブリストについてはお気に入りなので、別の記事でも何個か書いています。
主な概要やモダンコントロールの有効化、フライアウトメニューとしての使い方などはこれらの記事をご参考ください。

2024.01.19

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

はじめに今回はモダンコントロールで追加されたタブリスト（Tablist）を使った実装についてご紹介します。追加された当初にPower Apps 界隈では超有名人のドラーニさんが動画でフライアウトメニューとしての活用を紹介されており、すぐに飛びつきました！自分は現時点で一番好きなモダンコント...

今回はタブリストを使ったフォームの表示項目の切替えの実装についてです。

タブリストを使ってフォームの表示項目を切り替える

さっそく本題です。
今回はよくサンプルとして使っている人材スキルリストを使ったものです。

人材スキルリスト

ちょうど項目数が多めだったので、以下のカテゴリに分けて3画面で切り替えるようにしています。

基本情報
スキル・資格
その他

実装

まずタブリストを追加してレコードや配列をItemsに指定します。
Itemsに直接書いても問題ないんですが、今回はApp.Formulasに書いてそれを指定してみました。
※実際にはほかにもユーザー情報などの値もFormulasに定義して使うと思うのでそれと一緒に定義しておく感じのイメージですね。

App.FormulasでタブリストのItemsを定義（直接書いてもべつにいい）

以下をApp.Formulasに定義しています。内容はidとvalueを持った３つの項目です。

CodecTabList=[{id:1,value:”基本情報”},{id:2,value:”スキル・資格”},{id:3,value:”その他”}];

タブリストを配置、Itemsを指定

Formの上部に水平コンテナー、中にタブリストを配置。
ItemsにFormulasで定義した定義値を指定します。

NOTE日本語だと「タブ一覧」となってますが、あえてタブリストと自分は書いてます。※タブ一覧という言い方はちょっと。。
水平コンテナーはなくてもOKですが、他にも追加するコントロールがあるので入れてます。

TIPSApp.Formulasについては、App.OnStartに書くより高速化だったり不要に更新出来なかったり常に最新だったりといいことが多く推奨されています。
有識者の皆さんも記事にされてますので、そのあたりご参考ください。
Power Apps アプリで使う定義値はApp.OnStartではなくApp.Formulasで宣言する｜起動時間高速化 (ippu-biz.com)
Power Appsでアプリ起動時に定数を作成したい場合はApp.OnStartよりApp.Formulasを利用しよう！ – コルネの進捗や備忘録が記されたなにか (hatenablog.com)

カードコントロールごとにVisibleを調整

実装は非常にシンプルです。
カードのVisbleプロパティにタブリストで選択中に表示したい場合のidを指定すればOKです。
以下は基本情報に表示させたい場合です。

Code//カードのVisbleプロパティ（idが１の基本情報で表示したい場合）
TabList.Selected.id =1
→上記がTrueなら表示、それ以外ならFalseなので非表示となる

スキル・資格の場合は＝2、その他の場合は＝3にすればいいですね。

複数一括選択して指定する

上記一つ一つ指定するよりCtrlキーを押しならが複数選択して一括して指定すれば楽です。

タブリストごとに表示指定する

上記のようにした時点でタブリストを基本情報から切り替えると表示されなくなるはずです。
続いて、スキル・資格の場合、その他の場合とカードのVisibleプロパティを設定していきましょう。

上記でタブリストの項目に応じて表示が切り替わってくれるはずです。簡単ですね。
項目数が多く各セクションに分けたい場合はこういった構成だと入力もしやすくてよいですね！

TIPS以前こういった実装はギャラリーを使ってやっていました。今はモダンコントロールのタブリストがあるのでサクッと出来てさらにスマートになったという感じですね。
よりデザイン性にこだわる場合はギャラリーで作るのも良いかと思います。

スマホ対応時に特に有効

サンプルアプリではレスポンシブ対応していますが、スマホの場合は1列ずつの表示になると思います。
スクロールが多くなるので、こういったセクションごとに表示分けするデザインが特に有効だと思います。

おわりに

今回はサンプルで使っているタブリストでの表示切替えについてさくっと記事にしました。
以前から使われている手法ですが、タブリストの登場で実装する箇所がさらに減り楽になりますね。
特にモバイル対応時にギャラリー実装だと横幅を収めるのが大変だったりしますが、タブリストだと自動でフライアウトメニューにもなってくれるのでそのあたりの考慮も不要です。

タブリストについては使い勝手が良いコントロールで、他にも記事書いてますので、併せてご参考ください。
それでは！

フォームの便利なプロパティ：Valid