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

Power Apps

この記事では、Power Appsでタブ選択を行うコンポーネントを作成する手順を詳しく解説します。

複数画面を持つアプリではほぼ必須である画面選択機能をよりモダンなデザインで、より簡単に実装することができます。

タブ選択コンポーネントは汎用性が高く、この記事で紹介する手順に沿えばすぐに作成可能です。

タブ選択コンポーネントとは?

タブ選択コンポーネントは、複数の画面を切り替えるためのコンポーネント(Power Appsで再利用可能な共通部品)です。

Teamsの左側に表示されるようなタブをイメージしていただくとわかりやすいと思います。

縦向き・横向き両方に対応しているタブ選択コンポーネントの作成方法を説明します。

タブ選択コンポーネントの作成手順

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

コンポーネントを作成

コンポーネント→新しいコンポーネントより、コンポーネントを作成します。

追加されたコンポーネントの名前をComponentTabに変更します。

カスタムプロパティを追加

カスタムプロパティは追加したコンポーネントを選択し、新しいカスタムプロパティを選択することで追加できます。

以下の表に沿ってカスタムプロパティを追加して下さい。

表示名プロパティの型データ型
TabItems入力テーブル
IsVertical入力ブール値
Color入力

コンポーネントのプロパティに値を設定する

以下の表に沿ってプロパティを変更して下さい。

プロパティ
Width80
Height800
TabItemsTable(
{
Label: “SampleText”,
Icon: Icon.Add,
Screen: App.ActiveScreen
}
)
IsVerticalSelf.Height > Self.Width
ColorRGBA(0, 0, 0, 1)

ギャラリーを追加・設定

挿入→レイアウト→空の垂直ギャラリー(Gallery1)を追加し、以下のようにプロパティを入力します。

プロパティ
OnSelectNavigate(ThisItem.Screen)
ItemsParent.TabItems
DefaultLookUp(Parent.TabItems, App.ActiveScreen.Name = Screen.Name)
TemplateSizeIf(
Parent.IsVertical,
Min(80, IfError(Gallery1.Height / CountRows(Gallery1.AllItems), 1)),
Parent.Height – 10
)
WidthParent.Width – 2
HeightParent.Height
TemplateFillIf(
ThisItem.IsSelected,
ComponentTab.Color,
RGBA(0, 0, 0, 0)
)
WrapCountIf(
ComponentTab.IsVertical,
1, CountRows(Self.AllItems)
)

ギャラリーにアイコンとラベルを追加・設定

ギャラリー内に挿入→ディスプレイ→テキストラベル(Label1)、挿入→アイコン→任意のアイコン(Icon1)を追加します。アイコンには以下のようにプロパティを入力します。

プロパティ
IconThisItem.Icon
ColorIf(
!ThisItem.IsSelected,
ComponentTab.Color,
RGBA(255, 255, 255, 1)
)
FillIf(
ThisItem.IsSelected,
ComponentTab.Color,
RGBA(255, 255, 255, 1)
)
WidthParent.TemplateWidth
HeightParent.TemplateHeight * 0.8
PaddingBottom2

ラベルには以下のようにプロパティを入力します。

プロパティ
TextThisItem.Label
ColorIf(
!ThisItem.IsSelected,
ComponentTab.Color,
RGBA(255, 255, 255, 1)
)
FillIf(
ThisItem.IsSelected,
ComponentTab.Color,
RGBA(255, 255, 255, 1)
)
YParent.TemplateHeight * 0.8
WidthParent.TemplateWidth
HeightParent.TemplateHeight * 0.2
PaddingTop2

セパレーターを追加・設定

コンポーネント内に図形→四角形(Rectangle1)を追加し、以下のようにプロパティを入力します。

プロパティ
VisibleParent.IsVertical
XGallery1.Width
HeightParent.Height
ColorParent.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プロパティを設定すれば色を変更することも可能です。

コメント

タイトルとURLをコピーしました