Power Apps Component Framework でコントロールを作成する
この記事はこちらの動画をもとに作成してあります。
Power Apps Component Frameworkとは
キャンバスアプリやモデル駆動型アプリのUIを作成するフレームワークのことです。
例えば数値を入力するスライダーや、日付を入力する際にカレンダーなどUIの部品を作成できます。
詳細はPower Apps Component Frameworkの概要で説明してあります。
環境構築
まずはMicrosoft Power Apps CLIをインストールする必要があります。
Microsoft Power Apps CLIはカスタマイズの作成、構築、デバッグ、公開を行うコマンドのことです。
Microsoft Power Apps CLIインストールとコマンド一覧に詳細が書かれています。
不足しているものをインストールしておいてください。
component framework プロジェクト作成
プロジェクトを作成したいディレクトリに移動しておきます。
以下のコマンドを実行します。
> pac pcf init --namespace [specify your namespace here] --name [Name of the code component] --template [component type]
今回はコンポーネントのタイプをフィールドに設定します。
>pac pcf init -ns fic -n GitControl -t field
PowerApps component framework プロジェクトが 'C:\Microsoft\GitControl' 内に正常に作成されました。
プロジェクトの依存関係をインストールするために、このディレクトリで 'npm install' を実行してください。
Node.jsのパッケージをインストールします。
作成したプロジェクトをVisual Studio Codeで開きます。
>cd GitControl
>code .
(Visual Studio Codeが起動)
作成したプロジェクトのファイルに以下が用意されているか確認します。
- PCF コントロールフォルダ
- マニフェスト(ControlManifest.Input.xml)
- control metadata
- configuration propaties
- resources
- コントローラ(index.ts)
- init()
- updateView()
- getOutputs()
- destroy()
コントローラにデフォルトで用意されているメソッドについて軽く説明します。
- init()
- indexが呼び出されたときに最初に1度だけ処理される
- updateView()
- スクリーンサイズが変わったときやイベントが走った時などに呼び出される
- getOutputs()
- destroy()
画面にテキストボックスを表示/valueの取得
マニフェスト修正
namespaceは大文字始まりが良いようです。
ControlManifest.Input.xmlを修正します。
<?xml version="1.0" encoding="utf-8" ?><manifest><controlnamespace="Fic"constructor="GitControl"version="0.0.1"display-name-key="GitControl"description-key="GitControl description"control-type="standard"><!-- property node identifies a specific, configurable piece of data that the control expects from CDS --><propertyname="gitUsername"display-name-key="Property_Display_Key"description-key="Property_Desc_Key"of-type="SingleLine.Text"usage="bound"required="true"/>
...
エレメントの追加
画面にテキストボックスとイメージを追加します。
init()に以下を追記します。
publicinit(context:ComponentFramework.Context<IInputs>,notifyOutputChanged:()=>void,state:ComponentFramework.Dictionary,container:HTMLDivElement){lettextbox=document.createElement("input");letimage=document.createElement("img");container.appendChild(textbox);container.appendChild(image);}ここでビルドを走らせ、ファイルが更新する度に自動でビルドを行うようにします。
実際に追加したテキストボックスを見てみたいと思います。
画面が切り替わり、テキストボックスが表示されていたら成功です。
イメージをまだセットしていないため、画像は表示されません。
![image.png]()
valueの取得
init()に以下を追加します。
letusername=context.parameters.gitUsername.raw||"";lettextbox=document.createElement("input");textbox.value=username;これでgitUsernameをセットした状態で画面を更新するとテキストボックスにデフォルト値が入ります。
GitHubAPIを使ってみる
テキストボックスに入力されたユーザネームからアバターを表示してみます。
まずは、ユーザネームからアバターを取り出すメソッドをindex.tsに追加します。
privateasyncsetAvatarImage(imageContainer:HTMLImageElement,username:string){constresponse=awaitfetch("https://api.github.com/users/"+username);constbody=awaitresponse.json();imageContainer.src=body.avatar_url;}
次に、テキストボックス内のテキストが変更された時に呼び出されるイベントハンドラをindex.tsに追加します。
publictextboxOnChange():void{this._value=this._textbox.value||"";this.setAvatarImage(this._image,this._value);this._notifyOutputChanged();}このままだと変数未定義のエラーが出てしまうので、必要な変数を定義していきます。
exportclassGitControlimplementsComponentFramework.StandardControl<IInputs,IOutputs>{private_notifyOutputChanged:()=>void;private_textbox:HTMLInputElement;private_image:HTMLImageElement;private_value:string;private_textboxOnChange:EventListenerOrEventListenerObject;init()が呼び出されたタイミングでこれらの変数に値を入れていきます。
publicinit(context:ComponentFramework.Context<IInputs>,notifyOutputChanged:()=>void,state:ComponentFramework.Dictionary,container:HTMLDivElement){this._notifyOutputChanged=notifyOutputChanged;this._textboxOnChange=this.textboxOnChange.bind(this);letusername=context.parameters.gitUsername.raw||"";// Add control initialization codelettextbox=document.createElement("input");textbox.addEventListener('input',this._textboxOnChange);textbox.value=username;this._textbox=textbox;letimage=document.createElement("img");this._image=image;container.appendChild(textbox);container.appendChild(image);}最後に、変更されたusernameをgitUsernameプロパティにセットするためにgetOutputs()を使って定義します。
publicgetOutputs():IOutputs{return{gitUsername:this._value};}これでテキストボックス内を変更するたびにAPIが呼び出されアバターが更新されます。
また、画面右側のデータの出力の値もテキストボックスが変更される度に更新されます。
![image.png]()
アバターの枠を変更する
ドロップダウンでアバターの枠を変更できるように設定してみます。
まずはプロパティを追加します。
<propertyname="gitUsername"display-name-key="Property_Display_Key"description-key="Property_Desc_Key"of-type="SingleLine.Text"usage="bound"required="true"/><propertyname="imageShape"display-name-key="Property_Display_Key"description-key="Property_Desc_Key"of-type="Enum"usage="input"required="true"><valuename="square"display-name-key="square"description-key="Square">Square</value><valuename="circle"display-name-key="circle"description-key="Circle">Circle</value></property>
次にinit()から追加したプロパティを受け取ります。
gitUsernameを受け取るタイミングでshapeも受け取ります。
letusername=context.parameters.gitUsername.raw||"";letshape=context.parameters.imageShape.raw;
次に、cssファイルを追加します。
GitControlフォルダにcssフォルダを追加し、GitControl.cssファイルを作成します。
GitControl\css\GitControl.css
.Fic\.GitControlimg{border-style:solid;border-width:5px;border-color:#742774;height:150px;width:150px;}.Fic\.GitControlinput{width:-webkit-fill-available;}.Fic\.GitControl.circle{border-radius:50%;}これで実行すると、アバターに枠がついています。
しかし、この状態でimageShapeをcircleに変更してもアバターの枠を変えることはできません。
initializaは文字通り1度しか呼ばれないからです。
ここからは枠を丸く変化させる実装をしていきます。
publicinit(context:ComponentFramework.Context<IInputs>,notifyOutputChanged:()=>void,state:ComponentFramework.Dictionary,container:HTMLDivElement){this._notifyOutputChanged=notifyOutputChanged;this._textboxOnChange=this.textboxOnChange.bind(this);letusername=context.parameters.gitUsername.raw||"";// Add control initialization codelettextbox=document.createElement("input");textbox.addEventListener('input',this._textboxOnChange);textbox.value=username;this._textbox=textbox;letimage=document.createElement("img");if(shape=="Circle"){image.classList.add("circle")}this._image=image;container.appendChild(textbox);container.appendChild(image);}これで「circle」に設定してからリロードすると
アバターの枠が丸くなったかと思います。
![image.png]()
しかし、代わりにアバターがクリアされてしまいます。
アバターをセットするタイミングは、テキストボックスを変更したときしか用意されていないためです。
ここでinit()に、枠と同時にアバターをセットするコードを追加します。
letimage=document.createElement("img");if(shape=="Circle"){image.classList.add("circle")}this.setAvatarImage(image,username);this._image=image;これでリロードしてもセットしていたusernameからアバターを表示することができます。
フィールドレベルのセキュリティ実装
ここからはフィールドレベルのセキュリティを実装します。
初めに、読み取り専用の際は変更無効のロジックをupdateView()に追加します。
publicupdateView(context:ComponentFramework.Context<IInputs>):void{// Add code to update control viewthis._textbox.disabled=context.mode.isControlDisabled;}次にページを離れた時のイベントの破棄をdestroy()に実装します。
publicdestroy():void{// Add code to cleanup control if necessarythis._textbox.removeEventListener('input',this.textboxOnChange);}デプロイ
ここまでできたらデプロイしていきます。
まずは埋め込むアプリを認証する必要があります。
認証プロファイルの作成から行いましょう
使用法: pac auth [create] [list] [select] [delete] [clear]
create 認証プロファイルを作成してこのコンピューターに保存します
list このコンピューターに保存されている認証プロファイルをリストします
select アクティブにする認証プロファイルを選択します
delete 特定の認証プロファイルを削除
clear このコンピューターに保存された認証プロファイルをすべてクリア
こちらに従って
> pac auth create -u [環境URL]
環境URLはDynamics 365 Administration Centerから確認することができます。
サインインを求められますので、アカウント名とパスワードを入力してください。
認証が正常に作成されました。
接続の検証中...
接続先...[環境名]
こちらが表示されたら成功です。
コンポーネントをプッシュしていきます。
--publisher-prefix CDS ソリューション発行者を表すカスタマイズの接頭辞の値 (エイリアス: -pp)
--verbosity 一時的なソリューション ラッパーをビルドする際の MSBuild の詳細レベル。 (エイリアス: -v)
値: minimal, normal, detailed, diagnostic
--force-import Force a full update of the control (エイリアス: -f テレメトリ設定の管理
-pp で接頭語を入れます。
初回のプッシュは3分ほどかかります。
現在の組織に一時的なソリューション ラッパーをインポート: 完了。
Updating the control in the current org: done.
プッシュが完了しました。
今後のプッシュは修正箇所のみがプッシュされる為、より早くなります。
作成したソリューションを使う
それではソリューションを確認します。
ブラウザでPowerAppsの左メニューからSolutionsを開くとPowerAppsTools_ficが追加されていることがわかります。
![image.png]()
ここでGitHub_usernameを格納するフィールドを、任意のエンティティに用意します。
データの型はsingle line textとしておいてください。
フィールドのプロパティを開き、コントロールを追加します。
Controlsタブを選択し「Add Control...」から作成したコントロールを選びます。
Web, Phone, Tablet全てにチェックを入れます。
下のプロパティをcircleに設定しておきます。
![image.png]()
フォームに作成したフィールドを挿入し、実際にアプリを動かして見ると、アバターが表示されます。
![image.png]()
これでGitHubのユーザ名を登録する際に、正しく入力することができているかアバターを使って確認できるようになりました。
![IMG_0327[1].PNG](http://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F495103%2F93d1c4be-bef0-55e5-5ecb-0dd399a0d2b0.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=d9d5feb326ef88cbdf0cd9bdf0006ad3)
relative：
絶対的というのは他の要素や余白の有無など他のものに影響されることなく、
