Power AppsのPCFコントロールを作ってみた

投稿日:2025/11/21
投稿者:関

お客様より、入力項目について下記の要望を頂きました。

①「必須項目の＊を大きく表示したい」
②「プレースホルダで入力例を提示したい」
③「未入力状態の—は入力不可に見えるため使用不可」
④「状態表示型トグルはON時緑／OFF時灰色表示」

いずれも、標準（ノーコード）ではできない機能でした。

PCFコントロールとは

PCF コントロール（PCF コンポーネント）は、Power Platform 上で標準 UI では実現できない高度でカスタマイズされたユーザー体験を提供できる強力な手段です。
最新の Web 技術との親和性が高く、再利用性、パフォーマンス、UX 向上の観点からも非常に優れています。
開発にはプロコードの知識が求められますが、用途に応じて柔軟に設計・実装できるため、まさに「ローコード × プロコード（フュージョン開発）」の最前線と言えます。
（By ChatGPT）

Power Apps component frameworkの概要（Microsoft Learn）
最初のコンポーネントを作成する（Microsoft Learn）

開発の流れ（概要）

１．環境構築：
Visual Studio Code、Power Platform CLI、Node.js、TypeScript、必要に応じて .NET ビルドツールなどを整備

２．プロジェクト初期化：
pac pcf init コマンドで PCF プロジェクトを生成

３．コンポーネント実装：
TypeScript／HTML／CSS でロジックとスタイルを定義し、ControlManifest.xml でマニフェスト設定

４．ビルドとデバッグ：
npm run build や npm start watch でビルドやリアルタイムプレビューを実行し、動作確認

５．導入したい環境に認証プロファイルの作成：
pac auth create で認証を行い、その接続情報をローカルに保存

６．PCF コントロールを Dataverse 環境にデプロイ：
pac pcf push で一時ソリューションを使って、PCF コントロールをインポート

７．アプリへの追加：
モデル駆動型アプリやキャンバスアプリにコードコンポーネントを追加＆項目設定

※３．の各ファイルはChatGPTに要件を伝えて作って頂きました。（筆者に高度な知識はありません）
①１行テキスト（SingleLineText）
②金額（Currency）
③日付（DateOnly）
④選択肢（TwoOptionsYesNo）

※６．インポートしたPCFコントロール

※７．フォームの入力項目にコンポーネントを追加

実行結果（左が標準の入力項目、右がPCFコントロールを使った入力項目）

要件：
「必須項目の＊を大きく表示したい」
「プレースホルダで入力例を提示したい」
「未入力状態の—は入力不可に見えるため使用不可」
「背景色を変更」

１．１行テキスト（SingleLineText）

２．金額（Currency）

３．日付（DateOnly）

４．選択肢（TwoOptionsYesNo）

要件：「状態表示型トグルはON時緑／OFF時灰色表示」、「アクション型は通知を（有効にする）ボタン表示」

まとめ

モデル駆動型の入力項目は地味で、キャンバスアプリの自由度が欲しいと思っていましたので、PCFコントロール作成にチャレンジしてみて良かったです。
（もっと色々なコントロールがつくることができると思うとワクワクします）
と言っても、実際にコードを生成したのはChatGPTですが・・・
（最近、ChatGPTにお世話になってばかりでコーディングをしなくなってきた気がします、老化が進まないか心配です😭）