Power Apps コンポーネントをTypeScriptで開発してみる ｜Power Apps component framework

Power Apps component frameworkを使うとTypeScriptでPower Appsのコンポーネントを作成できるとのこと。

ということで、今回はこちらのサイトの通りにコンポーネントを作ってみた。

Microsoft Dataverse の Power Apps Component Framework を使用して最初のコンポーネントを作成する - Power Apps

Power Apps Component Framework を使用してコード コンポーネントを実装する方法について説明します

learn.microsoft.com

開発に必要なものたち

前提として以下が必要。

1. Visual Studio Code
2. node.js(LTSが推奨）
3. Microsoft Power Platform CLI（インストール方法は後述）
4. Visual Studio 2019 または Visual Studio 2019用のビルドツール

詳しくはこちら
https://docs.microsoft.com/ja-jp/powerapps/developer/component-framework/implementing-controls-using-typescript#prerequisites

VSCode用のMicrosoft Power Platform CLIのインストール手順

VSCodeを開いて左側のタブから拡張機能を選択、検索窓に「Power Platform」と入れるとこんな感じで見つかるので「インストール」を押下。

早速Power Appsのコンポーネントを作ってみる！

上のツールが全部準備できたので、早速コンポーネントを作成して。

手順1：開発するフォルダを作成してそこにプロジェクトを作成する

まずは適当な開発用フォルダを作成して、

VSCodeのターミナルでそのフォルダまで移動して、こんな感じでコマンドを実行。

すると開発用フォルダにプロジェクトができる。

※コマンドはここでコピペ可能
https://docs.microsoft.com/ja-jp/powerapps/developer/component-framework/implementing-controls-using-typescript#creating-a-new-component-project

手順2：マニフェストファイルの編集

そしたら展開されたプロジェクトの中の「ContorolManifest.Input.xml」を開いて、

マニュアルの通り、こんな感じに書き替える。

※中身はここでコピペ可能
https://docs.microsoft.com/ja-jp/powerapps/developer/component-framework/implementing-controls-using-typescript#implementing-manifest

手順3：ロジックの実装

マニフェストファイルを編集したら次は「index.ts」ファイルを開いて、

こんな感じで書き替える。
※エラーがたくさん出るけど無視してOK

※中身はここでコピペ可能
https://docs.microsoft.com/ja-jp/powerapps/developer/component-framework/implementing-controls-using-typescript#implementing-component-logic

手順4：CSSの作成

作業をしているフォルダの直下に「css」という名前のフォルダを作成し、そこに「LinearInputControl.css」を作成する。

※CSSの中身はここでコピペ可能
https://docs.microsoft.com/ja-jp/powerapps/developer/component-framework/implementing-controls-using-typescript#adding-style-to-the-code-component

※マニフェストファイルのコピペをミスってなければ大丈夫だけど、念のためcssファイルまでのパスが正しく設定されているか、さっきのControlManifestInput.xmlを確認。

手順5：ビルドして動作確認

ここまでできたら一旦動くか確認。

こんな感じでコマンドを実行してビルドして、

ビルドが成功したらこのコマンドを実行、

するとブラウザが立ち上がってこんな感じで動作確認が実施できる！

スライダーを動かすとちゃんと数字も動く！

手順6：ソリューションファイルを作成

動作で問題がなければソリューションファイルを作成していく。

ここでいったんPower Appsに移動して、[ソリューション]→[新しいソリューション]→[新しい公開元]を選択。

適当な名前で公開元を作成し、その「名前」と「接頭辞」をどこかにメモっておく。

そしたら再びVSCodeに戻り、作業をしているフォルダの下に「solution」フォルダを作成、

ターミナルでそこまで移動して、

こんな感じでコマンドを実行する。
このとき「–publisher-name」の後ろと「–publisher-prefix」の後ろには、それぞれさっきメモした「名前」と「接頭辞」を入力する。

コマンドが成功し「solution」フォルダの中に色々できたら、

こんな感じでコマンドを入力し、プロジェクト参照を追加。

無事にビルドが成功すると、こんな感じでzipファイルが作成されているはず！

※コマンドは全部ここでコピペ可能
https://docs.microsoft.com/ja-jp/powerapps/developer/component-framework/implementing-controls-using-typescript#packaging-your-code-components

今回はここまで

思ったより記事が長くなってしまったので今回はここまで。

次回、作成したソリューションzipファイルをPower Appsの中で使ってみる。

2022/1/15追記：
続きの記事はこちら

Power Apps TypeScriptで開発したコンポーネントを使ってみる ｜Power Apps component framework

Power Apps component frameworkを使うとTypeScriptでPower Appsのコンポーネントを作成できるとのこと。 今回は前回作成したソリューションzipファイルをインポートし、作成したコンポーネントをキャ...

ippu-biz.com

2022.01.15