この記事では、Power Appsでタブ選択を行うコンポーネントを作成する手順を詳しく解説します。
複数画面を持つアプリではほぼ必須である画面選択機能をよりモダンなデザインで、より簡単に実装することができます。
タブ選択コンポーネントは汎用性が高く、この記事で紹介する手順に沿えばすぐに作成可能です。
タブ選択コンポーネントとは?
タブ選択コンポーネントは、複数の画面を切り替えるためのコンポーネント(Power Appsで再利用可能な共通部品)です。
Teamsの左側に表示されるようなタブをイメージしていただくとわかりやすいと思います。
縦向き・横向き両方に対応しているタブ選択コンポーネントの作成方法を説明します。

タブ選択コンポーネントの作成手順
Power Appsでタブ選択コンポーネントを作成する手順は以下の通りです。
コンポーネントを作成

コンポーネント→新しいコンポーネントより、コンポーネントを作成します。
追加されたコンポーネントの名前をComponentTabに変更します。
カスタムプロパティを追加
カスタムプロパティは追加したコンポーネントを選択し、新しいカスタムプロパティを選択することで追加できます。

以下の表に沿ってカスタムプロパティを追加して下さい。
表示名 | プロパティの型 | データ型 |
---|---|---|
TabItems | 入力 | テーブル |
IsVertical | 入力 | ブール値 |
Color | 入力 | 色 |
コンポーネントのプロパティに値を設定する
以下の表に沿ってプロパティを変更して下さい。
プロパティ | 値 |
---|---|
Width | 80 |
Height | 800 |
TabItems | Table( { Label: “SampleText”, Icon: Icon.Add, Screen: App.ActiveScreen } ) |
IsVertical | Self.Height > Self.Width |
Color | RGBA(0, 0, 0, 1) |
ギャラリーを追加・設定
挿入→レイアウト→空の垂直ギャラリー(Gallery1)を追加し、以下のようにプロパティを入力します。
プロパティ | 値 |
---|---|
OnSelect | Navigate(ThisItem.Screen) |
Items | Parent.TabItems |
Default | LookUp(Parent.TabItems, App.ActiveScreen.Name = Screen.Name) |
TemplateSize | If( Parent.IsVertical, Min(80, IfError(Gallery1.Height / CountRows(Gallery1.AllItems), 1)), Parent.Height – 10 ) |
Width | Parent.Width – 2 |
Height | Parent.Height |
TemplateFill | If( ThisItem.IsSelected, ComponentTab.Color, RGBA(0, 0, 0, 0) ) |
WrapCount | If( ComponentTab.IsVertical, 1, CountRows(Self.AllItems) ) |
ギャラリーにアイコンとラベルを追加・設定
ギャラリー内に挿入→ディスプレイ→テキストラベル(Label1)、挿入→アイコン→任意のアイコン(Icon1)を追加します。アイコンには以下のようにプロパティを入力します。
プロパティ | 値 |
---|---|
Icon | ThisItem.Icon |
Color | If( !ThisItem.IsSelected, ComponentTab.Color, RGBA(255, 255, 255, 1) ) |
Fill | If( ThisItem.IsSelected, ComponentTab.Color, RGBA(255, 255, 255, 1) ) |
Width | Parent.TemplateWidth |
Height | Parent.TemplateHeight * 0.8 |
PaddingBottom | 2 |
ラベルには以下のようにプロパティを入力します。
プロパティ | 値 |
---|---|
Text | ThisItem.Label |
Color | If( !ThisItem.IsSelected, ComponentTab.Color, RGBA(255, 255, 255, 1) ) |
Fill | If( ThisItem.IsSelected, ComponentTab.Color, RGBA(255, 255, 255, 1) ) |
Y | Parent.TemplateHeight * 0.8 |
Width | Parent.TemplateWidth |
Height | Parent.TemplateHeight * 0.2 |
PaddingTop | 2 |
セパレーターを追加・設定
コンポーネント内に図形→四角形(Rectangle1)を追加し、以下のようにプロパティを入力します。
プロパティ | 値 |
---|---|
Visible | Parent.IsVertical |
X | Gallery1.Width |
Height | Parent.Height |
Color | Parent.Color |
使い方
挿入→カスタムよりComponentTabを追加し、縦向きまたは横向きで画面の端に設置します。

TabItemsプロパティを以下のフォーマットで記入します。
Table(
{
Label: "SampleText",
Icon: Icon.Add,
Screen: App.ActiveScreen
}
)
例として以下のように設定すると、画像のような表示になります。
Table(
{
Label: "新規",
Icon: Icon.Add,
Screen: Screen1
},
{
Label: "編集",
Icon: Icon.Edit,
Screen: Screen2
}
)
手間を削減するために、この数式をApp.OnStartでコレクションに格納したものをTabItemsに入力した方がいいです。

画面が増えた場合も同様に設定すればタブを設定可能です。

また、Colorプロパティを設定すれば色を変更することも可能です。
コメント