Power AppsでLINEやTwitterのようなタブを簡単に作成する方法 #Power Platformリレー

こんにちは、あおいです。
いつになったらコロナは鎮まるのか。はやく韓国旅行に行きたい。TWICEのコンサートでテンアゲさせてくれ。


さて、LINE・Twitter・Microsoft Teams等のSNSを利用するとき、以下のようなタブをよく目にすると思います。Power Appsでアプリ開発をする時にも、これと同じようなタブを作りたい場面は何度かあるでしょう。




ここで質問です。
もし、あなたならLINEやTwitterのようなアイコンタブをPower Appsでどのように実装しますか?



おそらく、このようにアイコンのコントロールを必要な分だけ追加していくのではないでしょうか。





この方法でも問題ないのですが、ぶっちゃけこれより良い方法があります!

それはギャラリーを活用することです!


そこで、今回はPower AppsでLINEやTwitterのようなタブを作成する方法を紹介したいと思います。また、どの画面にも共通してタブは存在するのでコンポーネント機能を利用します。



まず、画面を追加して三点リーダーを押します。名前の変更を選択して、分かりやすい命名規則で画面の名前をそれぞれ変更します。




「App」のOnStartプロパティに以下の数式を入力します。
colTabコレクションのTabIcon列に入力する値は、表示したいアイコンのIconプロパティの値です。
試しに、画面に適当なアイコンを追加して、Iconプロパティを「Icon.Home」に変更してみてください。Homeアイコンが表示されるはずです。同様に「Icon.Message」に変更するとMessageアイコンが表示されます。



「App」の三点リーダーを押して「▷ OnStart を実行します」を必ず実行してください。





「コンポーネント」タブに移動して新しいコンポーネントから白紙のコンポーネントを追加します。
また、画面右側のプロパティタブの「アクセス アプリ スコープ」をオンの状態に設定します。




空の垂直ギャラリーを挿入し、ItemsプロパティにcolTabコレクションを入力します。空の垂直ギャラリーにアイコンとラベルを追加します。アイコンのIconプロパティに「ThisItem.TabIcon」ラベルのTextプロパティに「ThisItem.TabName」とそれぞれ入力します。




アイコンのOnSelectプロパティに以下の数式を入力します。
Switch関数を利用します。colTabコレクションのTabName値で画面遷移の対象を条件分岐させます。




「画面」タブに戻って、各画面にコンポーネントを配置します。
コンポーネントの追加は挿入タブの「カスタム」から追加できます。



これで完成です!

試しにタブ遷移が正常に動作するか確認してみましょう!
各画面に該当のアイコンを配置します。HomeScreenを選択した状態でAltキーを押しながら適当なアイコンを選択してみてください!該当の画面に遷移するはずです!




今回はPower AppsでLINEやTwitterのようなタブを作成する方法を紹介しました。
ギャラリーを活用することでアイコンのコントロール数を減らすことができるので、ギャラリーはめちゃくちゃ便利です!また、コンポ―ネント機能を利用しているので、後のデザインや機能の修正を簡単に対応できます!さらに、タブを縦向きではなく横向きにしたい場合は、以下のように空の水平ギャラリーを選択すればいいだけです!
非常に簡単なので是非試してみてください!