この記事では、Power Appsの開発者がMicrosoft Power Appsフレームワークで開発したキャンバスPower AppsにPendoをインストールする方法を説明します。
Microsoft Power Appsはローコードでアプリケーションを開発できるフレームワークです。Microsoftユーザーは、これを活用して社内のビジネスアプリケーションを開発し、カスタマイズすることができます。Microsoft Power Appsには、モデル駆動型アプリケーションとキャンバスアプリケーションという2つの大きなカテゴリーがあります。このガイドでは、キャンバスアプリケーションに焦点を当てます。モデル駆動型アプリケーションについては、Pendoをモデル駆動型Power Appsにインストールするを参照してください。
インストールの概要
キャンバスアプリケーションはMicrosoft Dynamics 365 CE Frameworkの外部で実行されるため、管理ソリューションではキャンバスアプリケーションにPendoをインストールしません。代わりに、Power Apps Component Framework（PCF）で構築したカスタムコードコンポーネントを使用して、各アプリケーションにPendoを追加する必要があります。
コンポーネントの作成に関するMicrosoftのガイダンスについては、最初のコンポーネントを作成するを参照してください。
Pendoコンポーネントは、ユーザーが最初にアプリケーションにアクセスしたときにPendoが読み込まれるように、キャンバスアプリケーションのランディングページに配置してください。既定のランディングページがない場合は、ランディングページとなり得るすべてのページにコンポーネントを追加し、Pendoが常に読み込まれるようにします。Pendoコンポーネントが複数のページにインストールされている場合、Pendoインストールスクリプトがユーザーセッションあたり1回のみ実行されるように、条件ロジックを追加する必要があります。Pendoはページの読み込みあたり1回のみ初期化が可能で、それ以降の初期化の試行は無視されます。
ステップ1. 開発環境をセットアップする
Microsoft Power Appカスタムコンポーネントの作成に必要なソフトウェアをダウンロードし、インストールします（ステップ2）。
- 以下のいずれかのVisual Studio Code（VSCode）。［パスに追加（Add to PATH）］が選択されていることを確認します。
- node.js（LTSバージョン）。
- Microsoft Power Platform CLI。Visual Studio Code用Power Platform ToolsまたはWindows用Power Platform CLIのいずれかを使用します。
- .Net Buildツールは、以下のいずれかをインストールします。
ステップ2. 新しいコンポーネントを作成する
新しいコードコンポーネントのディレクトリを作成し、そのディレクトリに移動します。
mkdir <your_repo_name>
cd <your_repo_name>
プロジェクトディレクトリ内に、新しいコンポーネントプロジェクトを作成します。
pac pcf init --namespace <your_component_namespace> --name <your_component_name> --template field --run npm-install
ステップ3. Pendoインストールスクリプトをコードコンポーネントに追加する
ステップ2で作成したテンプレートコンポーネントは、Pendoを追加する際に編集が必要です。Pendoインストールスクリプトをコンポーネントに追加するには、以下のように変更します。
- 新しいファイル
initPendo.jsを作成し、以下を追加します。
export function initPendo(context) {
(function (apiKey) {
(function (p, e, n, d, o) {
var v, w, x, y, z;
o = p[d] = p[d] || {};
o._q = o._q || [];
v = ["initialize", "identify", "updateOptions", "pageLoad", "track"];
for (w = 0, x = v.length; w < x; ++w)
(function (m) {
o[m] =
o[m] ||
function () {
o._q[m === v[0] ? "unshift" : "push"](
[m].concat([].slice.call(arguments, 0))
);
};
})(v[w]);
y = e.createElement(n);
y.async = !0;
y.src = "https://cdn.pendo.io/agent/static/" + apiKey + "/pendo.js";
z = e.getElementsByTagName(n)[0];
z.parentNode.insertBefore(y, z);
})(window, document, "script", "pendo");
window.pendo.initialize({
visitor: {
id: context?.userSettings?.userId || "VISITOR-UNIQUE-ID",
},
account: {
id: context?.orgSettings?.uniqueName || "ACCOUNT-UNIQUE-ID",
},
});
})("<YOUR_PENDO_API_KEY>");
} - 関数を
index.tsファイルにインポートし、以下のコンテキストを渡してinit関数内で呼び出します。
import {IInputs, IOutputs} from "./generated/ManifestTypes";
import {initPendo} from './initPendo'
export class PendoOnMSPCF implements ComponentFramework.StandardControl<IInputs, IOutputs> {
/**
* Empty constructor.
*/
constructor()
{
}
/**
* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
* Data-set values are not initialized here, use updateView.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
* @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
*/
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
{
// Add control initialization code
initPendo(context);
}
... - 以下のように
tsconfig.jsonファイルを修正して、プロジェクト内のJavaScriptファイルを許可します。
{
"extends": "./node_modules/pcf-scripts/tsconfig_base.json",
"compilerOptions": {
"typeRoots": ["node_modules/@types"],
"allowJs": true
}
}
ステップ4. コンポーネントをテストする
npm startを使用して、テスト環境でコンポーネントをローカルに読み込みます。コンポーネントがPendo上で実行されていることを検証するには、ブラウザコンソールを開いてpendo.validateInstall()を実行します。正常に設定されている場合、以下のように表示されます。
ユーザー情報はテスト環境では使用できないため、プレースホルダー値が必要です。
ステップ5. コンポーネントをパッケージ化してデプロイする
以下のコマンドを実行して、コンポーネントをデプロイメント用にパッケージ化します。
mkdir <your_solution_name>
cd <your_solution_name>>
pac solution init --publisher-name <your_publisher_name> --publisher-prefix <your_publisher_prefix>
pac solution add-reference --path ..
dotnet build
生成されたソリューションのzipファイルは、<your_solution_name>/bin/debugフォルダに格納されます。新しく作成したソリューションをインポートするには、Microsoftの手順「ソリューションのインポート」に従います。ソリューションには、<your_piblisher_prefix>_<your_publisher_name>.<your_solution_name>という命名構造があります。
次に、Microsoftの手順「キャンバスアプリにコンポーネントを追加する」に従って、新しいコードコンポーネントをキャンバスアプリに追加します。キャンバスアプリケーションを保存して公開した後、Pendoはアプリ上で実行されます。
ステップ6. デプロイを確認する
ブラウザコンソールを開き、キャンバスアプリに関連するiframeに移動して、pendo.validateInstall()を実行します。正常に設定されている場合は、Microsoftアプリケーションコンテキストに訪問者IDとアカウントIDが表示されます。