Power Apps component frameworkを使うとTypeScriptでPower Appsのコンポーネントを作成できるとのこと。
今回は前回作成したソリューションzipファイルをインポートし、作成したコンポーネントをキャンバスとかモデル駆動型とかで使ってみる。
事前準備：環境の設定を変更
Power Apps component frameworkをキャンバスアプリで使うには、まず環境の設定を変更する必要がある。
[設定]→[管理センター]を押して、
環境を選択し[設定]を押す。
[製品]の[機能]を選択し、
[コードコンポーネントでキャンバスアプリの公開を許可する]を[オン]にして保存を押す。
これで設定は完了。
ソリューションをインポート
そしたらまずは、前回作成したソリューションzipファイルを環境にインポートする。
上記の設定を行った環境の[ソリューション]を開いて、[インポート]→[参照]を押下。
前回作成したzipファイルを選んで、
インポート！
無事にインポートが完了するはず。
￥1,899￥3,199
（2024/11/07 12:00 時点）
￥2,799￥3,599
（2024/11/07 12:00 時点）
![[大容量] レノア オードリュクス プレミアム柔軟剤 スタイルシリーズ イノセント 詰め替え 1,010mL](https://m.media-amazon.com/images/I/51O30A-n78L._SL160_.jpg)
￥1,221￥1,355
（2024/11/07 12:00 時点）
￥2,998￥3,980
（2024/11/07 12:00 時点）
キャンバスアプリで使ってみる
まずはキャンバスアプリで作成したコンポーネントを使ってみる。
左のタブの[＋]を押して、[コンポーネントをさらに取得]を押下。
[コード]タブを選ぶと作成したコンポーネントが表示されるので、[インポート]を押下。
するとこんな感じでキャンバスアプリに作成したコンポーネントが表示される！
こんな感じでラベルとバインドすることもできるし、
OnChangeプロパティにこんな式を書いてやれば、
スライダーの値が変わるたびにNotifyが表示される！
Power Apps Studioで作ったカスタムコンポーネントと違って、OnChangeみたいな動作のプロパティを定義できるのがかなり大きなポイントかなと。
イベントプロパティを作れると色々と便利なコンポーネントが作れそう！
モデル駆動型アプリで使ってみる
続いてモデル駆動型アプリで作成したコンポーネントを使ってみる。
今回はこんな感じで整数型の列を持つテーブルのフォームを、整数をスライダーで選択できるようにしてみる。
新しくメインフォームを作成し、
フォームに適当な名前を付けたら保存して、[クラシックに切り替える]を押下する。
クラシック表示で整数列の入力部分をダブルクリックすると、
フィールドのプロパティが表示されるので、[コントロール]タブの[コントロールの追加]を押下する。
すると作成したコンポーネントが表示されるので[追加]を押して、
今回は全部の画面でこのコントロールが表示されるよう設定し、OKを押す。
そしたらフォームを[保存]して[公開]する。
[フォームの設定]から[フォームの順序]でさっきのフォームを優先的に表示するよう設定したら、
[データ]タブから[レコードの追加]を選んでみると、
こんな感じで整数をスライダーで選択できるようになる！
こんな感じで色々と便利なコンポーネントが作成できそうなPower Apps component framework。
SharePoint Frameworkとどことなく似ているので、色々と便利な開発ができそう！
コメント