この記事では、PowerApps コンポーネントフレームワーク (PCF: PowerApps Component Framework) についての概要と開発に必要な環境の準備を紹介します。
PCF は 独自 UI コントロールを開発して PowerApps/Dynamics 365 Customer Engagement (CE) に埋め込むためのフレームワークです。また PowerApps が裏で使う Common Data Service (CDS) は実質 Dynamics 365 CE でもあるため、Dynamics 365 CE でも動作します。
尚、本記事公開時点ではモデル駆動アプリのみサポートされており、キャンバスアプリでの利用は将来的にサポートされる予定です。
The PowerApps component framework and the PowerApps CLI is now available for public preview
何が開発できるのか
PCF ではフィールドに対するコントロールとグリッド (ビュー) に対するコントロール開発が行えます。
フィールド
特定エンティティの特定フィールドに対してコントロールを設定できます。設定したフィールド値の取得/更新ができるバインドと、任意の値や任意のフィールドの値を入力として使えるインプットが設定でき、表現は以下例のように HTML で行える範囲で自由です。
スライダー
複数ボタン
画像アップローダー
IFrame
グリッド
レコード一覧の表現を変えたい場合はグリッドに対して開発したコントロールを適用できます。こちらも以下例のように HTML で表現できるものがサポートされます。
カスタムグリッド
タイル形式
開発したモジュールの配布
開発したコントロールは CDS および Dynamics 365 CE のソリューションとして展開できるため、複数のコントロールをパッケージして複数環境に容易に展開が出来ます。
開発ツールのインストール
PCF で開発するために、以下ツールをインストールします。
PowerApps CLI (PAC)
PAC はカスタムコンポーネント開発用の CLI ツールで、プロジェクトの作成やスキャフォールディング、デバッグやパッケージ作成などが行えるツールです。
1. 最新の Node.js をインストール。LTS 版を推奨。
2. .NET Framework 4.6.2 の Developer Pack をインストール。
3. Visual Studio 2019 または .NET Core 2.2 および Visual Studio Code をインストール。
4. Microsoft PowerApps CLI をインストール。
※既に PAC をインストールしている場合は、以下コマンドで最新の更新できます。
pac install latest
PCF API
開発にあたり、フレームワークとしてコントロールから利用できる API が提供されます。それぞれの使い方は各サンプル内で紹介していきます。
| 名前 | 説明 |
|---|---|
| Client | コントロールが描写されているクライアントの情報 |
| Column | グリッドのデータセット列のメタデータ |
| ConditionExpression | フィルターの条件列挙型 |
| Context | 各 API へアクセスするためのコンテキスト |
| Control | UI コントロール自身へのアクセス |
| DataSet | グリッドで渡させるデータセット |
| DateFormattingInfo | 日付のフォーマット情報 |
| EntityReference | エンティティ参照のオブジェクト |
| Factory | ポップアップサービスや再描写サービス取得ができるファクトリー |
| Linking | 関連エンティティの操作 |
| Formatting | 各種データのフォーマット情報 |
| Mode | コントロールの状態やフルスクリーン操作 |
| Navigation | 各種ダイアログの表示 |
| NumberFormattingInfo | 組織の数値フォーマット情報 |
| Paging | データセットのページング情報 |
| Popup | ポップアップへのアクセス |
| PopupService | ポップアップ API サービス |
| Resources | コントロールのリソース情報 |
| SortStatus | データセットの並び替え情報 |
| UserSettings | ユーザー設定情報 |
| Utility | ユーティリティへのアクセス |
| WebApi | Web API サービス |
まとめ
まず今回は環境準備まで行いました。
参照
PowerApps component framework overview
PowerApps component framework API reference