Power Appsを開発するとき、私はどれだけ簡単に作成できるかを考えています。つまり、必要な機能がすでに構築している場合は、コードを再利用します。 Power Appsキャンバスコンポーネントを使用すると、開発者はカスタムコントロールを作成し、それらを複数のアプリで使用できます。コンポーネントを再利用することで、個人的に何百時間もの作業を節約し、アプリのバグの数を減らすことができました。この記事では、最初のPower Appsキャンバスコンポーネントを作成する方法を紹介します。
はじめに：ヘッダーコンポーネント
ヘッダーコンポーネントは、さまざまなアプリで利用できるレイアウトを簡単に追加することができます。
新しいPower Appsキャンバスコンポーネントを作成する
Power Apps Studioを開き、空白から新しいアプリを作成します。ツリービューから[コンポーネント]を選択し、[新しいコンポーネント]をクリックします。コンポーネントに Header という名前を付けます。
コンポーネントのWidthプロパティをApp.Widthに、Heightプロパティを100に変更します。
次に、タイトルとイメージを表示させるためのコントロールをコンポーネントに追加します。ラベルをコンポーネントと同じサイズで配置し、コンポーネントの左側に画像を配置します。
次に、画面遷移させるためのコントロールをコンポーネントに追加します。コンポーネントの左側に戻るアイコンを挿入し、コンポーネントの右側に次へアイコンを配置します。
Power Appsコンポーネントに入力プロパティを追加する
Power Appsのすべてのコントロールには、画面上での動作を定義するプロパティがあります。Power Appsコンポーネントも、プロパティを自分で作成する必要があります。ツリービューからコンポーネントを選択し、新しいカスタムプロパティを選択します。
ヘッダーラベルの値を設定させるために、Labelという入力プロパティを作成します。表示名と名前にLabelという単語を入力します。プロパティの型は[入力]を選択し、データ型は[テキスト]を選択します。次に[作成]をクリックします。作成すると、入力プロパティLabelが右のメニューに表示されます。
次に、コンポーネントの入力プロパティに値を設定します。LabelのLabelプロパティを選択し、Power Apps Componentを入力します。
ラベルに値を表示するには、その値をコンポーネントのLabelプロパティにリンクする必要があります。
このコードをラベルのTextプロパティに記述します。
Header.Label
画像とアイコンの表示プロパティを設定する
今度は、画像とアイコンの表示を制御するための入力プロパティを追加します。表示名と名前にそれぞれImage、Back、Nextという単語を入力します。プロパティの型は[入力]を選択し、データ型は[ブール値]を選択します。次に[作成]をクリックします。
次に、コンポーネントの入力プロパティに値を設定します。ImageのImageプロパティを選択し、trueを、BackのBackプロパティにfalse、NextのNextプロパティにfalseを入力します。
画像やアイコンの表示に適用させるには、その値を各コントロールのVisibleプロパティに設定する必要があります。
例として、このコードは、次へアイコンのVisibleプロパティに記述します。
Header.Next
アイコンの動作プロパティを設定する
最後に、2つのアイコンに画面遷移の動作をさせるために動作プロパティを設定します。戻るアイコンのOnSelectプロパティを Back() に変更します。
次に、次へアイコンの画面遷移をするための入力プロパティを追加します。表示名と名前にそれぞれNext Screenという単語を入力します。プロパティの型は[入力]を選択し、データ型は[画面]を選択します。次に[作成]をクリックします。
次へアイコンの動作に適用させるには、追加した入力プロパティをアイコンにリンクさせる必要があります。
このコードを次へアイコンのOnSelectプロパティに記述します。
Navigate(Header.NextScreen,ScreenTransition.Fade)
Power Appsコンポーネントをキャンバスアプリに挿入します
ヘッダーとなるPower Appsキャンバスコンポーネントが完成しました。それでは、キャンバスアプリに追加しましょう。ツリービューの[画面]タブに移動し、[カスタム]メニューからコンポーネントを選択します。
これで、コンポーネントが画面に挿入されます。
Power Appsコンポーネントについて詳しく知りたい方へ
Power Appsコンポーネントは開発者が再利用できるコントロール、プロパティを作ることができる機能となってます。Power Appsの概要をもっと活用してキャンバスアプリの幅を広げていきましょう。