この記事では、
- コンポーネントのメリット・デメリット
- Teamsのようなタブ選択(サイドバー)コンポーネントを作成する手順
- アプリへの導入方法
を解説します。
複数画面を持つアプリではほぼ必須である画面切り替え機能をよりモダンなデザインで、より簡単に実装することができます。
コンポーネントのメリット・デメリット
コンポーネントには以下のメリットがあります。
- 頻繁に利用する数式やコントロールをまとめられるため、パフォーマンスや保守性が向上する
- 汎用的な部品として作成すれば開発速度が向上する
- zipファイルやコンポーネントライブラリとして共有可能
一方、以下のデメリットがあります。
- コンポーネントの開発には中級以上のPower Apps開発スキルが求められる
- 初心者が開発時にコンポーネントを利用する際には詳細な手順書を作成する必要がある
- 汎用的な部品として開発するためには相応の開発工数がかかる
これらのメリット・デメリットを総合的に評価してコンポーネントを使用しましょう。
コンポーネントについては以下のMVPの方々の動画が非常に勉強になります。
またコンポーネントの作成にはプロパティの種類などを理解している必要があります。
タブ選択コンポーネントの完成イメージ
タブ選択コンポーネントは、複数の画面を切り替えるためのコンポーネント(Power Appsで再利用可能な共通部品)です。
縦向き・横向き両方に対応しているタブ選択コンポーネントの作成方法を説明します。
タブ選択コンポーネントの作成手順
Power Appsでタブ選択コンポーネントを作成する手順は以下の通りです。
コンポーネントを作成
![](https://powerplatformnikki.com/wp-content/uploads/2023/07/184054681fe00c74023b3e361205cbc8.png)
コンポーネント→新しいコンポーネントより、コンポーネントを作成します。
追加されたコンポーネントの名前をComponentTabに変更します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/ec9e6c1ecd11f0e43205df4f55c255bb.png)
カスタムプロパティを追加
カスタムプロパティは追加したコンポーネントを選択し、新しいカスタムプロパティを選択することで追加できます。
![](https://powerplatformnikki.com/wp-content/uploads/2023/07/c5b61314d09e6fad1382030c10c4837d.png)
以下の表に沿ってカスタムプロパティを追加して下さい。
表示名 | プロパティの型 | データ型 |
---|---|---|
TabItems | 入力 | テーブル |
IsVertical | 入力 | ブール値 |
Color | 入力 | 色 |
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/94b1a8f0e7f9f6e3a9b72a81d2c4d469.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/37f2dd9fb57063ac6d1b33f8a3198ae6.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/764a250eb7e7b5d921508f83d39a93ba.png)
コンポーネントのプロパティに値を設定する
以下の表に沿ってプロパティを変更して下さい。
プロパティ | 値 |
---|---|
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) |
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/ccb7615eea4b6566379f3302a0dfd6c2.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/69ed4b9086e487014149aa1168b2503f.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/906e1b9486bbdec91c8af16faad48cbb.png)
ギャラリーを追加・設定
挿入→レイアウト→空の垂直ギャラリー(GalleryTab)を追加し、以下の表に沿ってプロパティを入力します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/b5057b498eec17ccecdc4597765a4d3d.png)
プロパティ | 値 |
---|---|
OnSelect | Navigate(ThisItem.Screen) |
Items | Parent.TabItems |
Default | LookUp(Parent.TabItems, App.ActiveScreen.Name = Screen.Name) |
TemplateSize | If( Parent.IsVertical, Min(80, IfError(Self.Height / CountRows(Self.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) ) |
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/8253943996012f36321325c148ad29e5.png)
ギャラリーにアイコンとラベルを追加・設定
ギャラリー内に挿入→アイコン→任意のアイコン(IconTab)を追加します。アイコンのプロパティを以下の表に沿って入力します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/bf5783b2225b4f4589dd37999431e194.png)
プロパティ | 値 |
---|---|
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 |
X, Y | 0 |
PaddingTop, Left, Right | 5 |
PaddingBottom | 2 |
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/83590f1c90cdaf0cb624eb39bfc7bcef-1024x246.png)
同様に挿入→ディスプレイ→テキストラベル(LabelTab)を追加し、プロパティを以下の表に沿って入力します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/2b4b4e20303984e651f894e2a86193ff.png)
プロパティ | 値 |
---|---|
Text | ThisItem.Label |
Align | Align.Center |
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 |
セパレーターを追加・設定
コンポーネント内に図形→四角形(RectangleTab)を追加し、以下の表に沿って入力します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/555ae0008607e046c931537bf4879f60.png)
プロパティ | 値 |
---|---|
Visible | Parent.IsVertical |
Width | 2 |
X | GalleryTab.Width |
Y | 0 |
Height | Parent.Height |
Color | Parent.Color |
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/e38cb233e78ec3814a50bc9f09689b28.png)
使い方
コンポーネントのエクスポート・インポート方法
アプリ内のコンポーネントからコンポーネントを作成した場合、ここで紹介する手順でエクスポート・インポートが可能ですが、現在は廃止済みとなっており利用可能ですが非推奨です。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/c4b3bdbfe4c572abb8886ac72ca255b1.png)
単一のアプリでのみ使用するコンポーネントはアプリ内から、複数のアプリで使用するコンポーネントはコンポーネントライブラリから作成するようにしましょう。
作成したコンポーネントは以下の操作でエクスポートが可能です。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/1a777d5dcc9c921a401d14f4d0c58e6b.png)
ダウンロードしたzipファイルを共有します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/d01f601a394e7938f164318e0f662326.png)
インポートする際にはコンポーネントをインポートしますをクリックします。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/edf4e3ab92079518b7883aff05ee7596.png)
ファイルのアップロードを選択してzipファイルを選択します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/fa54d9e45eb3f2ca95dfea169135faf2.png)
インポートが完了し、他のアプリでも利用できるようになりました。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/a97fe2ac2939d8179c7c6197401e828e.png)
アプリでの利用方法
スクリーンで挿入→カスタムよりComponentTabを追加し、縦向きまたは横向きで画面の端に設置します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/54e79ce9d70afd3b460cb8771853a3f4.png)
App.OnStartでコレクションを宣言します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/434234e7419a2fa0e6f753df4e867554.png)
ClearCollect(
ColTab,
{
Label: "Screen1",
Icon: Icon.Items,
Screen: Screen1
},
{
Label: "Screen2",
Icon: Icon.Bookmark,
Screen: Screen2
}
)
OnStartを実行します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/c91e5b611bb95c6e56982da45c40bdf4.png)
コレクションで設定したアイコンに応じてタブが表示されます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/ca87ebf47c3ecde7043596212059448e.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/424879924f049976aeb3ff669619a21e.png)
また、Colorプロパティを設定すれば色を変更することも可能です。
コメント