コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

【Power Apps】カスタムメニューを作成する

Power Apps

スポンサードリンク

はじめに

今回は

参考文献

Power Apps Component With An OnSelect Property

公開

今回作成したカスタムコンポーネントはこちらで公開しています。

github.com

細かい設定値などはブログでは記載を省いている箇所もありますので気になる方や、これから学習を行おうと思っている方はダウンロードして実際の設定をみながら確認をしてください。

事前準備

拡張コンポーネントを有効化します。

ファイル > 設定 > 近日公開の機能 > 実験段階
より、"拡張コンポーネントのプロパティ"を"オン"にします。

f:id:koruneko:20210523160222p:plain

f:id:koruneko:20210523160048p:plain

f:id:koruneko:20210523160016p:plain

余談ですが、設定画面が以前と変わっていますね。
最近のアップデートによるものでしょうか？

完成イメージ

下記3つのカスタムコンポーネントを作成しようと思います。

f:id:koruneko:20210530150803p:plain

真ん中がポップアップメニュー
左の青いのが縦方向のリストメニュー
上のピンクのが横方向のリストメニュー(リボン)
になります。

カスタムメニューを作成する

ポップアップメニュー

新しいコンポーネントを追加して、以下のコントロールを追加します。

f:id:koruneko:20210530183539p:plain

それぞれのコントロールの役割は以下となっています。

コントロール名 役割
PopUpMenu_BackGround 背景
PopUpMenu_OKButton OK ボタン
PopUpMenu_CancelButton Cancel ボタン
PopUpMenu_BodyLbl 本文
PopUpMenu_TitleLbl タイトル

それぞれのコントロール名の頭に PopUpMenu_ を付けていますが、これはコンポーネント内で使用しているコントロール名は、画面の方で使用するコントロール名にも使用できなくなってしまうからです。
なので、汎用的に使用することになるカスタムコンポーネントのコントロールは、なるべく一般的に使用されそうな命名は避けるべきです。

私の場合、 [コンポーネント名]_[コントロールの役割] という命名規則を採用しています。
ここの命名規則に関しては、組織で今後利用される場合は予めコーディング規約を定め、作成者にきちんと周知して作成を行うようにすべきだと私は考えています。

各コントロールの座標、サイズは他コントロールから相対的に計算されるか、もしくはカスタムプロパティの値を参照して、コントロールの利用者が設定した値が適用(もしくはそれを計算した値)が適用されるようにします。
こうすることにより、コンポーネント利用者がコンポーネントのサイズを変更しても、レイアウトが崩れることなく、コンポーネントを利用することが可能になります。

他コンポーネントが、カスタムプロパティの値を参照するように設定している項目は色と文字の設定箇所です。

表示される文字はコンポーネント利用者によって異なるので、利用者が自由に設定できる必要があります。
また、色も同様です。
そのアプリにあったデザインに設定したいと思うのでカスタムプロパティの値を参照するように設定しています。

以上を踏まえたうえで作成しているカスタムプロパティをみてみましょう。

プロパティの型: 入力

パラメータ 説明 デフォルト値 型
BackGroundFill 背景色 RGBA(235, 230, 230, 1) ■ 色
BackGroundBorderColor 外枠の色 ColorFade(Self.BackGroundFill, -25%) ■ 色
BackGroundBorderThickness 外枠の線の太さ 10 数値
OKMessage OKボタンに
表示する
文字列 		"OK" テキスト
OKButtonFill OKボタンの背景色 RGBA(0, 207, 10, 1) ■ 色
OKButtonColor OKボタンの文字色 RGBA(255, 255, 255, 1) ■ 色
CancelMessage Cancelボタンに
表示する
文字列 		"Cancel" テキスト
CancelButtonFill Cancelボタンの
背景色 		RGBA(168, 168, 168, 1) ■ 色
CancelButtonColor Cancelボタンの
文字色 		RGBA(255, 255, 255, 1) ■ 色
TitleMessage タイトルに
表示する
文字列 		"Sample PopUp Menu" テキスト
TitleMessageColor タイトルの
文字色 		RGBA(0, 0, 0, 1) ■ 色
TitleMessageFontSize 本文の文字の
大きさ 		30 数値
BodyMessage タイトルに
表示する
文字列 		"This is sample popup menu
custom component." 		テキスト
bodyMessageColor 本文の
文字色 		RGBA(0, 0, 0, 1) ■ 色
BodyMessageFontSize 本文の文字の
大きさ 		20 数値

プロパティの型: 動作

パラメータ 説明
OnSelectOK OKボタンを押したときの動作
OnSelectCancel Cancelボタンを押したときの動作

上記のようにカスタムプロパティを定義することで、下の画像のように利用者がコンポーネントのプロパティ値を入力することができるようになります。

f:id:koruneko:20210531195532p:plain

ここで作成したカスタムプロパティを各コンポーネントから参照するには、 [コンポーネント名].[カスタムプロパティ] とるすか Parent.[カスタムプロパティ] とることで参照することが可能です。

例えば 'TitleMessage' というカスタムプロパティを参照したい場合は以下のように設定します。

Parent.TitleMessage

その他詳しい設定値は実際のコンポーネントを参照してください。

縦方向のリストメニュー

新しいコンポーネントを追加して、以下のコントロールを追加します。

f:id:koruneko:20210531214110p:plain

それぞれのコントロールの役割は以下となっています。

コントロール名 役割
VirticalListMenu_Gallery リストのギャラリー
VirticalListMenu_SelectIcon メニューの選択ボタン
VirticalListMenu_Image メニューに設定するイメージ
VirticalListMenu_Icon メニューに設定するアイコン
VirticalListMenu_Title メニューに表示するタイトル
VirticalListMenu_BackGround メニューの背景色
VirticalListMenu_Separation メニュー間の区切り線

コントロールの命名規則や、設定する値などは、先ほどのポップアップメニューと同様です。

プロパティの型: 入力

パラメータ 説明 デフォルト値 型
ListMenuTitle メニューの
リスト 		Table(
 {id:1, Icon:Icon.Edit, Title:"Sample1"},
 {id:2, Image:SampleImage, Title:"Sample2"},
 {_id:3, Title:"Sample3"}
) 		テーブル
TitleColor タイトルの
文字色 		RGBA(255, 255, 255, 1) ■ 色
BackGroundFill リストの
背景色 		RGBA(1, 72, 202, 0.2) ■ 色
TitleBackGroundFill タイトルの
背景色 		RGBA(51, 72, 202, 1) ■ 色
TitleBackGroundBorderColor タイトルの
外枠の色 		RGBA(255, 255, 255, 1) ■ 色
TitleBackGroundBorderThickness タイトルの
外枠の太さ 		3 数値
SeparationHeight 区切り線の
高さ 		1 数値
TitleFontSize タイトルの
文字の大きさ 		15 数値

プロパティの型: 動作

パラメータ 説明
ListMenuBehavior 各リストが選択されたときの動作

プロパティの型: 出力

パラメータ 説明 型
__Selected_id ユーザーが選択したリストのID 数値

今回設定可能なメニュー項目を可変にしたかったので、テーブルを使用していますが、リストの表示名と動作を同一レコードで設定できるようにしたほうが、ユーザビリティが高いのでは？と思われた方もいるかもしれません。

作成当初私もそのような作りにしようとしましたが、結論からいいますとできませんでした。
"プロパティの型: 動作"とし、"データの型: テーブル"とすると、設定したテーブル値がみれないんですよね。。。(というより設定すらされていないっぽい？)
これはデータ型をレコードにした場合も同様です。

苦悶の過程はここのスレッドをみてください。

もし、動作をレコードやテーブルなどで設定して、条件により参照する動作を変更したい。とお考えの方は注意が必要です。

そもそもテーブルやレコードは非動作関数なので、動作関数を設定できない。ということかもしれません。
であれば、プロパティの型を動作に選んだ際はデータ型の選択肢を無くす or 固定(固定だと"テキスト"ですかね。)にしてほしい気もしますが、これはまだプレビュー機能なので仕方ないですかね。

今回の要件の回避策の1案です。
もし他に良い案がありましたら、教えていただけますと幸いです。

まず、タイトルリストの文字列や表示するイメージなどが定義されたパラメータと、動作が定義されたパラメータの2つを作成します。

前者のタイトルリストの文字列や表示するイメージなどが定義されたパラメータの設定値は難しいこともないので、割愛します。

後者の動作が定義されたパラメータの設定値ですが、まず、"データの型"には"テキスト"を設定します。
テキストを設定しましたので、このパラメータには、文字列(動作)が1つ設定される必要があります。
今回動作は選択されたタイトルによって変更させたいので、 Switch 関数で条件分岐させることにします。
これで、文字列(動作)が1つ設定されることになります。

ただし、ここで1つ問題がでてきます。
こちらの動作が定義されているのは対象のコンポーネントになります。
ギャラリーはそのコンポーネントの子要素になるので、親要素であるこのコンポーネントから子要素であるギャラリーの値をプロパティの型、動作や入力からは参照することはできません。

上記の回避策として、"プロパティの型: 出力"に設定した、 __Selected_id を利用します。

これにより

__Selected_id

VirticalListMenu_Gallery.Selected._id

とすることができるので、コンポーネントから子要素であるギャラリーで選択されたIDを取得することができます。

動作関数がこれを参照するときは、自分自身の参照になるので、 Self で参照することができます。

こうして作成した、動作の設定方法は以下になります。

ListMenuBehavior

Switch(
    Self.__Selected_id,
    1, "Sample1",
    2, "Sample2",
    3, "Sample3"
)

上記はコンポーネント作成時にデフォルトで入力されている項目です。
実際利用する場合は以下のように利用します。

ListMenuBehavior

Switch(
    Self.__Selected_id,
    1, Navigate(Screen1),
    2, Navigate(Screen2),
    3, Navigate(Screen3)
)

以上、仕組みがちょっとめんどくさいですが、縦方向のリストメニューの作成方法でした。

横方向のリストメニュー

横方向のリストメニューの設定項目は縦方向のリストメニューの設定項目とほぼほぼ同じです。
異なっているのは、横にしたことによる値の計算方法と、動作をアイコン、もしくはイメージが選択されたときに動作を行うように設定したぐらいです。

新しいコンポーネントを追加して、以下のコントロールを追加します。

f:id:koruneko:20210531213319p:plain

それぞれのコントロールの役割は以下となっています。

コントロール名 役割
HorizonListMenu_Gallery リストのギャラリー
HorizonListMenu_Image メニューに設定するイメージ
HorizonListMenu_Icon メニューに設定するアイコン
HorizonListMenu_Title メニューに表示するタイトル
HorizonListMenu_BackGround メニューの背景色
HorizonListMenu_Separation メニュー間の区切り線

コントロールの命名規則や、設定する値などは、先ほどのポップアップメニューと同様です。

プロパティの型: 入力

パラメータ 説明 デフォルト値 型
ListMenuTitle メニューの
リスト 		Table(
 {id:1, Icon:Icon.Edit, Title:"Sample1"},
 {id:2, Image:SampleImage, Title:"Sample2"},
 {_id:3, Title:"Sample3"}
) 		テーブル
TitleColor タイトルの
文字色 		RGBA(255, 255, 255, 1) ■ 色
BackGroundFill リストの
背景色 		RGBA(230, 78, 198, 0.2) ■ 色
TitleBackGroundFill タイトルの
背景色 		RGBA(230, 78, 198, 1) ■ 色
TitleBackGroundBorderColor タイトルの
外枠の色 		RGBA(255, 255, 255, 1) ■ 色
TitleBackGroundBorderThickness タイトルの
外枠の太さ 		3 数値
SeparationWidth 区切り線の
幅 		1 数値
TitleFontSize タイトルの
文字の大きさ 		15 数値

プロパティの型: 動作

パラメータ 説明
ListMenuBehavior 各リストが選択されたときの動作

プロパティの型: 出力

パラメータ 説明 型
__Selected_id ユーザーが選択したリストのID 数値

おわりに

以上が今回カスタムコンポーネントで作成した、メニューたちになります。

他作成して欲しいメニューや、設定値で不明な箇所や改善案がありましたら、コメントや @koruneko32767までお願いしますー。


スポンサードリンク