Componentsって何？
PowerAppsのプレビュー環境向けに配信された プレビュー機能です。
※現在は通常の環境でもアプリごとに有効にできます。
アプリの設定で実験的な機能で有効にすることで利用可能になります
記載されている通り、アプリやスクリーン間で再利用可能なコントロールの集合です。
これまではスクリーン間であってもグループ化してコピーしたり(その場合はコントロール名が”_1”のようになっていました)、アプリ間でもコピーペーストで対応していましたが、このComponentによって共通部品の再利用性が格段に向上しました。
また、スクリーン側からはComponent内のコントロールは隠蔽されているので、せっかくのグループを破壊してしまわないという点でもアプリ作成に恩恵があります。
作り方と使いかた
早速プレビュー環境でコンポーネントを作成してみます。
作る
コンポーネントを有効にしたアプリでは、画面左のスクリーンとコントロールのツリービューに新たなタブ”コンポーネント”が表示されています。
コンポーネントの追加/編集はこの"コンポーネント"をクリックし、スクリーンおよびその中のオブジェクトとは別の画面で行います。
複数のコンポーネントがツリービューで表示されています。
コンポーネントはそれ自身にサイズの定義を持っています。スクリーンとは異なり、このサイズはコンポーネントごとに定義ができます。
また各種プロパティも設定可能で、小さな独立したスクリーンのような構成になっています。
オブジェクト追加
スクリーンにオブジェクトを追加する場合と同様に、各種ラベルやコントロールをコンポーネント内に配置できます。
ここでは後のテストのためにボタンとラベルを1つ追加しました。また、もとのスクリーンとの境界がわかりやすいようにFillプロパティで背景色を指定しています。
スクリーンに配置する
作成したコンポーネントをスクリーンに配置する場合には赤枠内のボタンで他のコントロール同様に追加します。
注意:コンポーネントは、それ自身に名前の定義を持っていますが、スクリーンに配置した際には、スクリーンごとに異なる名前をつけなければなりません。(同じ”ギャラリーコントロール”でもスクリーンそれぞれ名前を変えるのと似ています)
左側のツリービューを見てわかる通り、コンポーネントの内部にあるラベルやボタンは、スクリーン側からは表示されないようになっています。また中の要素にスクリーン側からアクセスしようとしても候補に表示されません。
Component1.Label1のような指定は不可。
Component内の要素とスクリーン側とで名前の一意性は？
コンポーネント内で利用しているLabel1という名前は、スクリーン側でも使用できません。スクリーン側からは隠蔽されていますが、一方で、名前を一意にしなければならないのは変わらないようです。
変数の受け渡し
コンテキスト変数
画面内で閉じる変数、コンテキスト変数が、スクリーンに配置したコンポーネントではどのように作用するのかを確認します。
早速躓きました。コンポーネント内ではUpdateContext関数はサポートされていないようです。
当然、スクリーン側で更新したコンテキスト変数も、コンポーネント内には作用しませんでした。
グローバル変数
面白いことに、コンポーネント内ではグローバル変数の利用は可能です。なので、コンポーネント内で何かの変数を利用したい場合にはグローバル変数を利用する必要がありそうです。
Collection
ここまで変数がだめだったので、少し諦め気味ですが、Collectionが受け渡されるかを確認します。
コンポーネント内のボタンでコレクションを生成し、Label1にコレクションのテキストを表示します。
スクリーン側でも、Label2にコレクションのテキストを指定しています。
成功！！Collectionはコンポーネント内とスクリーン側で共通のようです。
カスタムプロパティを利用したデータの受け渡し
正攻法では、スクリーン側とコンポーネント側で値の受け渡しをする・コンポーネント内の要素にアクセスする場合、コンポーネントのカスタムプロパティを利用するようです。
カスタムプロパティを作成する画面では、以下のように、
- 入力か出力か
- 名前（表示名・プロパティ名）
- データ型
を定義します。
試しに、入力として"input1"をテキスト型、出力として"output1"をテキスト型で定義します。
スクリーン側からinput1というComp1のプロパティに値をセットできるようになりました。
あとはボタンのOnSelectなどに指定したコンテキスト変数の書き換え処理を入れれば
スクリーン側-->コンポーネントへの受け渡しは完了です。
残念ながら、出力側についてはまったくわかりませんでした。このあたり、Twitterで聞いてみます。
[追記]
出力側について確認できました。
まずはグローバル変数を何か定義します。（ここではgvTest）
そのグローバル変数をコンポーネントの[詳細設定]にあるカスタムプロパティに設定します。
ここではテストとして、ボタンクリックでテキスト入力の値をセットするようにしています。
スクリーン側では、ラベルを用意し、そのTextプロパティに、.<出力プロパティ名>（この場合はComp1_1.output1）を設定します。
適当なテキストを入力し、ボタンをクリックすると、以下のようにスクリーン側にコンポーネントの変数の値を受け渡すことができました。
*Twitterで教えてくださったMr.Dangに感謝です。
データコネクションの取り扱い
Componentの中でSharePointからリストを参照できるか確認してみます。
結果、SharePointリストをデータソースに登録はできているものの、GalleryのItemsに指定しようとするとエラーになることがわかりました。
アプリ間での再利用性
さて、コンポーネントの魅力であるアプリ間での再利用性について紹介します。
コンポーネントをほかのアプリで利用するためには、コンポーネントタブから、「コンポーネントをエクスポートします」を選択します。
すると、[アプリ名].msappというファイルがダウンロードされます。
ほかのアプリで利用する際には、ダウンロードしたファイルを、今度は「コンポーネントをインポートします」からインポートしてください。
アプリ内で作成したコンポーネント（この場合Comp1とComp2）が新しいアプリでも利用可能になっています。
同じ名前のコンポーネントでなければ、エクスポートしたmsappファイルを複数個、1つのアプリにインポートできます。ですので、用途に応じたコントロール群をコンポーネントとして定義し、それらを組み合わせることで、新しいアプリを作成するというやり方が可能になるかなと思います。
おわり
情報に更新がありましたら追記していきます。
Componentsをつかったスクリーン遷移用のサンプルアプリとComponentsファイルを以下のリンクに配置しました。ぜひ見てみてください。
https://1drv.ms/f/s!Arp1PnSG3hrVtUIRgEBxm43RUHTg