Power Appsでレスポンシブなタブ選択を行うコンポーネントの作成方法

この記事では、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に入力した方がいいです。