PL-200 学習メモ (5) : キャンバス アプリ（コンポーネント、コンテナー、コレクション）

# はじめに
この投稿は PL-200: Microsoft Power Platform 業務コンサルタントの学習をした内容のメモです。

投稿の一覧は以下のリンク先にあります。

https://qiita.com/atsmin77/items/f25bd707921c421cee03

# 前の投稿

https://qiita.com/atsmin77/items/3e43f73c871cd2c56c50

## コンポーネント

キャンパスアプリの中で再利用な部品をコンポーネントとして、作成することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/ec5e8833-ea45-8390-7a2e-7cf03a419784.png)

作成したコンポーネントは [挿入] - [カスタム] からアプリで利用できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/364a66e0-8ac9-0376-a8c8-6c18616e8d73.png)

### コンポーネントの注意点

* コンポーネントではコンテキスト変数ではなく、グローバル変数を使用する
  UpdateContext 関数はコンポーネントでは使用できません。
* コンポーネントとアプリの間の入出力はカスタムプロパティで行う

### カスタムプロパティ

コンポーネントとアプリの間の入出力は、コンポーネントに定義したカスタムプロパティで行います。

#### アプリからコンポーネントへの入力

アプリからコンポーネントへの値の入力は、コンポーネントのカスタムプロパティで **[プロパティの型]** を **[入力]** に指定します。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/3c1abd48-e6a3-6417-d53c-dd0db553121f.png)

アプリ側からコンポーネントのカスタムプロパティに値を入力することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/acde3e0e-e576-06fa-b95c-1499ca285c77.png)

#### コンポーネントからアプリへの出力

コンポーネントからアプリへの値の出力は、コンポーネントのカスタムプロパティで **[プロパティの型]** を **[出力]** に指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/9bf4c799-8c31-8e7c-4925-4d1236475747.png)

アプリ側からコンポーネントのプロパティとしてカスタムプロパティの値を参照することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/94fa4fd0-2ee6-194f-2014-2b9251d495af.png)

## コンポーネントのインポート・エクスポート

作成したコンポーネントはエクスポートして、ほかのアプリにインポートすることもできます。
※ 現在は後述のコンポーネントライブラリの利用が推奨されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/72734126-df57-2ab6-2421-ac0a99ff2e23.png)

コンポーネントライブラリを作成すると、複数のコンポーネントをまとめてインポートしたり、コンポーネントのバージョンアップを簡単に行うことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/16e597ee-3bd6-7101-bf0b-89ef6f1f4882.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/e17a11e7-413a-9bc4-1f09-082708f0dc26.png)

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-component

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/component-library

## コンテナー

コンテナーの中にコントロールを配置することで、コントロールを等間隔で配置したり、画面サイズに応じて表示を変えたりすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/d8b0d317-64fa-f82b-248f-0f076e779062.png)

以下のように、コンテナーの Width プロパティをスクリーンのサイズに設定しておき、コンテナ内のコントロールを折り返し配置するようにしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/d611efd3-512b-b5da-9e51-778d4badcc24.png)

スクリーンのサイズに合わせて、自動的にコントロールが配置されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/6dddaedb-3dfc-ee09-c05c-51f2573dac7c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/ab450988-300c-6b0f-7cc2-886877c0f211.png)

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-container

## コレクション

コレクションを使用すると、アプリの中でテーブルのようなデータを生成して保存できます。コレクションのデータはテーブルと同じようにギャラリーで表示できます。

### コレクションへのレコードの追加・削除

**Collect** 関数でレコードをコレクションへ追加できます。

```
Collect(【コレクション名】, {【列名1】: 【データ1】,【列名2】: 【データ2】})

例：
Collect(MyCollection, {"Text": TextInput1.Text})
```

**Clear** 関数でコレクションの内容を削除します。**ClearCollect** 関数では内容を削除してからレコードの追加します。

```
Clear(【コレクション名】)
ClearCollect(【コレクション名】, {【列名1】: 【データ1】,【列名2】: 【データ2】})

```

ギャラリーの Items プロパティにコレクションを指定することで、ギャラリー内でコレクションを表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/27011059-4a9b-50ea-73ad-878644263317.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/31001029-ba57-c543-d31f-266d06cf026e.png)

### コレクションのデータの保存、読み込み

コレクションのデータはアプリを閉じると削除されます。
**SaveData** 関数、**LoadData** 関数を使用するとコレクション内のデータ
を端末内に保存して、後で読み込むことができます。

```
SaveData(【コレクション名】, 【保存名】)
LoadData(【コレクション名】, 【保存名】)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/9d175a6b-6f24-36b9-b7ea-d2d6be49cb46.png)

Web ブラウザでのコレクションの保存は投稿時点でプレビューの機能なので、設定からオンにする必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/003a1efa-3e13-0269-b795-84971151d1d6.png)

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-update-collection#remove-one-or-all-items

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-savedata-loaddata

# 次の投稿

https://qiita.com/atsmin77/items/1bbf110aafbd3dec7876