JPPDevUG#2_Introduction_of_PCF

Power Appsをディープにカスタマイズする Power Apps Component Framework！ 2024/10/5（土） Japan Power Platform Dev User Group #2 yone@mescius

自己紹介 名前 yone 仕事 プロダクトマーケティング これまで at メシウス（旧グレープシティ） • 業務システム開発(.NET) • 農業IT研究＋Power Platform ブログ • https://devlog.mescius.jp/category/power-apps/ GitHub • https://github.com/masataka-yonei/PCF/ • Power Platform App Maker • Power Platform Developer Associate • Azure AI Engineer Associate • Azure Developer Associate • Power Platform Fundamentals • Azure AI Fundamentals • Azure Fundamentals 2

• https://devlog.mescius.jp/category/power-apps/
• https://github.com/masataka-yonei/PCF/

3

農業とITの研究プロジェクトをやっていました 4

プロジェクトでやりたかったこと 分析 データ管理 経路生成 5

Power Platformで出来るかも？ 6

大枠は完成 コネクタ 7

苦労したところ、出来なかったこと 苦労したところ ： 地図まわりのドラッグドロップ処理 ◼ 静的地図（BingMap）＆スライダー・タイマーを利用して ドラッグドロップ処理実装 ◼ 経路生成用の位置座標取得 【参考にさせていただいたブログ】 ◆ Power Appsでまだ利用できないドラッグ&ドロップを実装する方法 ◆ 地図上でポイントの緯度経度を補正する(Power Apps ＆ BingMaps) 出来なかったこと ： 印刷機能 ◼ Print関数がまだなかった… ◼ List形式でデータをQRコードを印刷したかった 8

• https://papasensei365.com/powerapps-drag-and-drop/
• https://qiita.com/kenjik/items/fc313e76e1ec7b04c1de

コンポーネントだけでいろいろ 出来るといいな 9

1. Power Apps Component Framework とは？ 2. PCFでコードコンポーネントを 本日お話しする 内容 つくってみよう 3. JSライブラリを使って機能アップ 4. PCF帳票ビューワと外部Webサーバー 帳票機能を作成 5. まとめ 10

Power Apps Component Framework とは？ 11

Power Apps Component Framework Power Appsをディープにカスタマイズできるツール 12

Power Apps Component Framework とは？ ◼ キャンバスアプリ・モデル駆動型アプリで利用可能な UIコンポーネント（コードコンポーネント）を作成する為のフレームワーク ◼ TypeScript(JavaScript拡張言語）、CSSなどをWebフロントエンド技術を用いて開発すること が可能 ◼ React や Angular などのJSフロントエンドフレームワークをサポート ◼ Power Apps コミュニティによってつくられたコンポーネントがPCF Galleryで公開

• https://pcf.gallery/

今回扱う内容 Reactコンポーネント （プレビュー） キャンバスアプリ ◼ コンポーネントの実装を別ファイルにわけて実装 できるため、より簡単に開発できる ◼ Webフロントエンド開発でUIフレームワークとして 高いシェアがありさまざまなライブラリが用意され ている ◼ コンポーネントの配置やイベント動作など自由度 が高いキャンバスアプリで解説 14

• https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/reference/react-control

開発に必要なツール Webフロントエンド開発に必要なツール ＋ Power Platform CLI＆ビルドツール ◼ Visual Studio Code（VSCode） ⚫ コードエディタ（統合開発ツール） ◼ Node.JS （LTS (長期サポート) バージョンのご利用をお勧め） ⚫ バックエンドJavaScript実行環境とJavaScriptパッケージ管理ツール（Npm） ⚫ デバッグ実行や、主にJavaScriptパッケージライブラリのインストールに使用 ◼ Power Platform CLI （VSCode拡張機能でのインストールのほか、インストーラーも） ⚫ Power Apps Component Frameworkを利用する為のコマンドラインインターフェイス ⚫ 開発プロジェクトの作成・デバックの他、ソリューションパッケージ化、環境へのアップロードも行える ツール ◼ .NET ビルド ツール（Visual Studio 2022 用ビルド ツールなど） ⚫ ソリューションパッケージをビルド時に使用 15

• https://code.visualstudio.com/Download
• https://nodejs.org/en/download/package-manager
• https://marketplace.visualstudio.com/items?itemName=microsoft-IsvExpTools.powerplatform-vscode
• https://aka.ms/PowerAppsCLI
• https://visualstudio.microsoft.com/ja/downloads/

PCFでコードコンポーネントを つくってみよう • • • • • • プロジェクトの作成 プロパティの作成 ボタンコンポーネントを追加 イベントの作成 データセットプロパティの追加 環境へのアップ 16

プロジェクトの作成

プロジェクトの作成 - ディレクトリ作成 まずは、任意のフォルダを作成します。 作成したフォルダ内をVSCodeで開きます。 VSCode開いた後ターミナルを起動しておきます。 18

プロジェクトの作成 - “pac pcf init” コマンド実行 pcf init ：PCF プロジェクトの作成しディレクトリを初期化 ◼ -n(--name) ： コンポーネントの名前 ◼ -ns(--name) ： コンポーネントの名前空間 ◼ -t(--template) ： コンポーネントのテンプレートを選択します（field or dataset) ◼ -fw(--framework) ： コンポーネントのレンダリング フレームワークを選択します（none or react) ◼ -npm(--run-npm-install ) ： プロジェクト作成後に “npm install” を自動実行します（必要なパッケージをインストール） • ターミナルでpac コマンド（Power Platform CLIコマンド）の“pcf init”コマンドを実行しPCFプロ ジェクト作成 19

プロジェクトの作成 - プロジェクト完成 • “pcf init”コマンド実行後、プロジェクトが作成され、コンポーネント作成のテンプ レートとして自動的にファイルが生成 20

プロジェクトの作成 - ファイルの役割 ControlManifest.Input.xml （マニフェストファイル） プロパティ定義・イベント定義・外部リソース（CSSなど）の参照設定を行うファ イル index.ts 処理の実装本体（通常テンプレートの場合は、このファイルのみが作成される） HelloWorld.tsx コンポーネントの実装部分を分割したファイル（Reactテンプレートのみ作成される） index.tsから呼び出され使用する 21

プロジェクトの作成 - 処理実装の基本 init：コンポーネント インスタンスの初期化 ※必須 コンポーネントのインスタンス時に、コンポーネント内で使用 する各種オブジェクトなどの初期化、事前処理などを行いま す。 getOutputs：コンポーネントが外部にデータを渡す際の処理 コンポーネント内部で変更された値を、外部のプロパティな どへ出力する際に使用します。外部出力プロパティを実装し ている場合は必須となります。 updateView：コンポーネントの見た目や表示内容を更新時処理 ※必須 プロパティ値や、テキスト入力値、データの値などの表示状態が変わ る際に行う処理です。 destroy：コンポーネントがウェブページから取り除かれる際に行われる コンポーネントが使用しているリソース（例えば、イベントリス ナーやタイマーなど）をクリーンナップする際に利用します。 メモリの開放などもこのタイミングで実装します。 22

プロジェクトの作成 – プロジェクトのデバック実行 • • • • 初期状態では、HelloWorldを表示するコンポーネントが実装済み まずはこの状態デバック実行してみます。 デバック実行には、”npm start“で行います 実行すると、PCF コントロールを表示してテストできるように、ブラウザーで コントロール サンドボッ クスが表示されます 23

プロパティの作成

プロパティの追加 - プロパティ定義 プロパティの名前 プロパティ名の説明文字列 プロパティの説明を記述する文字列 データ型 使い方 input:入力だけ、bound:入力と出力 必須にするかどうか 初期値 初期値（PowerFX式） • プロパティは、ControlManifest.Input.xmlで定義 • 定義後のターミナル上で”npm run build”すると、型定義ファイルが作成される • 型定義ファイルが作成されると、コード上でプロパティの操作が可能 25

ボタンコンポーネントの追加

ボタンコンポーネントの追加 • プロジェクト作成時に組み込まれているReactライブラリ”@fluentui”のコマンドボタ ンを追加 • デバックするとボタンが追加される 27

ボタンコンポーネントの追加 - 追加したプロパティを使う • • • • • 追加したプロパティを使う為、型定義をimport設定 コンポーネント描画の引数にプロパティを追加 追加したプロパティをボタンの表示名に設定 ボタンサイズを調整 最初に呼び出される、index.tsからcontext（PCFで用意されている外部パラメータ）を渡す 28

ボタンコンポーネントの追加 - プロパティ動作の確認 29

イベントの作成

イベントの作成 - イベント定義 イベントの名前 イベント名を説明文字列 イベントの説明を記述する文字列 コンポーネントに提供される既定の Power Fx 式の値。 • イベント定義も「ControlManifest.Input.xml 」で定義 31

イベントの作成 - イベント定義② IEventBag はイベントの登録、解除、および発生 を行うためのメソッドを提供 プロパティしかない！！ • イベントの場合、ビルドしても型定義ファイルが作成されない • 自分で型定義を拡張する必要がある • 「ContextExtended.ts」でparameter として渡ってくる型にイベントを追加 32

イベントの作成 - イベント実装① • 拡張した型タイプを追加 • クリックイベントハンドラをうけとるプロパティを追加 • クリック時にイベントをプロパティへ渡す 33

イベントの作成 - イベント実装② • contextの型を拡張したものに書き換える • イベントを実装し、作成したクリックイベントと変更状態を通知する • コンポーネント側のプロパティに追加したイベントハンドラプロパティに自分のイベ ントを設定する 34

イベントの作成 – 動作確認 35

イベントの作成 – 動作確認2 • デフォルトで設定していた、PFXが初期状態でただしく設定される • クリックしたら変数に、指定の文字列が設定される 36

データセットプロパティの追加

データセットプロパティの作成 - プロパティ定義 プロパティの名前 プロパティ名の説明文字列 プロパティの説明を記述する文字列 コンポーネントに提供される既定の Power Fx 式の値。 • データセットプロパティも「ControlManifest.Input.xml 」で定義 • データセットの場合、子ノードにもプロパティ設定が可能 38

データセットプロパティの作成 – 動作確認① • Itemsに設定される • コンポーネントにつき、ひとつ？ • 子ノードのプロパティセットは、フィールドの編集時に、使えるコントロールの種類に なる 39

データセットプロパティの作成 – 動作確認② 画面描画は、コンポーネント内でテーブルタグで実装 40

環境へのアップ

環境へのアップ コンポーネントをZipファイルにパッケージ化 ソリューションインポート Power Platform CLI コマンド 「pcf push」を使い環境へデプロイ • 作成したコンポーネントの環境へのアップは２つ • 今回は、pcf pushを使う方法を紹介 ※Zipファイルにパッケージ化する方法はこちらで紹介中 42

• https://devlog.mescius.jp/powerapps-component-framework-2/

環境へのアップ - 認証プロファイルの作成 • “pac auth create --environment https://example.com/”コマンドで デプロイ環境の認証プロファイル作成 43

• https://example.com/

環境へのアップ - 認証プロファイルの確認 • “pac auth list”で認証プロファイルを確認 • 複数プロファイルがある場合、デプロイ先に「＊」が設定されていればOK 44

環境へのアップ - 認証プロファイルの切替 • プロファイルを切り替える場合は、 “pac auth select --index 指定環境のindex” 45

環境へのアップ - 環境へデプロイ① “jdc”は公開者の接頭辞、任意の名 称が設定可能 ローカルのビルド出力先を初期化 事前にインストール済みのビルド ツール“MsBuild” を使用 46

環境へのアップ - 環境へデプロイ② パッケージビルド完了 ソリューションインポート 47

JSライブラリを使って機能アップ 48

JSライブラリを使って機能アップ • 数式表示を行う為のJavaScriptライブラリ「KaTeX（カテフ）」を利用して • 入力した文字列を数式化するコンポーネント作成 49

JSライブラリを使って機能アップ - ライブラリのインストール npm install react-katex --save-dev @types/react-katex • ライブラリのインストールには、npmを使用 50

JSライブラリを使って機能アップ – CSSのインポート • CSSは「ControlManifest.Input.xml 」で設定 • <resources>内で対象CSSを設定 51

JSライブラリを使って機能アップ – コード実装 ライブラリのインポート 使っていなかった「sampleProperty」の値を ライブラリを利用して数式表示 52

JSライブラリを使って機能アップ – 動作確認 53

JSライブラリを使って機能アップ – 他ライブラリ使用例 Reactライブラリとして有名なMaterial UIを使用すると ダイアログもコンポーネント化できる https://mui.com/material-ui/react-dialog/ 54

• https://mui.com/material-ui/
• https://mui.com/material-ui/react-dialog/

PCF帳票ビューワと外部Webサーバー 帳票機能を作成 55

.NETアプリケーション開発の”帳票”をトータルで支援する コンポーネント 56

いろいろな帳票がつくれます 57

帳票機能の構成 Power Appsキャンバスアプリ on premises server リクエスト ASP.NET Core Webアプリ 帳票生成 （html、pdf..） フロントエンド（PCF帳票ビューワ） Web API 58

帳票ビューワの追加プロパティ プロパティ 設定値 Server_Url 「AcitveReports ASP.NET Core Webアプリ」のホスト名を指定します。 例：「https://任意のアプリケーション名.azurewebsites.net/”」 Reports_ID 表示するレポートを指定します。（Webサーバー上に配置しているレポートファイル名を指定） Reports_Loading Reports_Parameter レポートの読み込みを行うかどうかの設定。 レポート設定が行われていない場合に読込を行うとエラーとなる動作の抑制を行います。 キャンバスアプリケーション上から、制御できるように切替コンポネントにて操作可能なように以下を設定し ます。 レポートへパラメータを設定します。 JSONデータなどを渡すことで、キャンバスアプリのデータをレポートデータソースに使用できます。 Style_Width ビューワのスタイル設定（幅）です。 Style_Height ビューワのスタイル設定（高さ）です。 59

帳票ビューワの実装 -マニフェストファイルの更新 • 外部ドメイン設定 • プロパティ追加 • 帳票ビューワライブラリで使用する、CSSファイルの参照設定 60

帳票ビューワの実装 – CSSファイル作成 ビューワ内部で利用しているCSSファイル • App.cssを新規追加（ビューワに対する設定） • ビューワー内部で利用しているCSSファイルをコピーし配置 61

帳票ビューワの実装 – コンポーネント実装 • プロパティ定義した外部Webサーバー指定 • レポートIDとレポートへのパラメータを設定 62

Webアプリの実装 • • • Webアプリ（サーバー）上にレポートファイルを配置 サーバー上で帳票（html、pdfなど）を生成 Power Appsからのリクエストを処理する為にキャンバスアプリが実行されているPower Appsの オリジンを登録しておく ※ブラウザの異なるオリジン（Cross-origin）間へのリソースへのアクセスを制限回避の為 63

デモ1 64

デモ2 65

まとめ 66

まとめ • PCFを利用すれば、より高機能なコンポーネントをつくれる • OSSをはじめ、PCFで利用できそうな、JSライブラリはたくさんありそう • コンポーネントの要件にはよるが、プロ開発者であれば、開発の敷居 はそこまで高くない 67

さいごに これからやりたいこと • Power AppsユーザーにもっとPCFを知ってもらいたい • サーバーがいらない帳票PCFコンポーネントを実現したい • もっといろいろなJavaScriptライブラリと組み合わせPCF 作ってみたい 68

Thank you #JPPDevUG セッション内容についてのおことわり • 本セッションでは、Power Platformに関連する内容について、公式ドキュメントなどの公開済みの情報を基に登壇者が調査し、理解した内容をお伝 えしています。 • 本セッションの情報は正確性を期しておりますが、プレビュー機能や、誤りや最新の情報と異なる場合があることをご了承ください。 • 本セッションの内容に基づいて行動する前に、必ず公式ドキュメントを参照してください。 • 本セッションの情報に基づくいかなる損害についても、登壇者および主催者は一切の責任を負いかねます。 69