This article provides guidance for a Power App developer to install Pendo on a model-driven Power App, built on the Microsoft Power Apps framework.
Microsoft Power Apps is a low-code application building framework that enables Microsoft customers to build and customize internal business applications. There are two major categories of Microsoft Power Apps: model-driven applications and canvas applications. This article focuses on model-driven applications. For canvas applications, see Install Pendo on canvas Power Apps.
Model-driven apps are optimized for web environments. If you choose to install on mobile apps, there are a number of known limitations to consider.
Install the Dynamics 365 package
Model-driven applications run in the Microsoft Dynamics 365 Customer Experience framework (MS D365 CE). MS D365 CE (formerly known as Dynamics 365 CRM) is an integrated suite that brings together various capabilities on a single platform: Microsoft Dynamics 365 Sales, Marketing, Customer Service, Field Service, and Project Operations. Example CE applications include CRM, Customer Service Hub, and Field Service.
For third-party, employee-facing web-applications, we instead recommend deploying Pendo using the Pendo Launcher. The process that follows allows you to install Pendo natively on top of Microsoft Dynamics 365 CE model-driven Power Apps.
- In Dynamics 365, navigate to Settings > Solutions.
- Select Import and then choose a file that contains the solution you want to import.
- Select Next.
- Open the Pendo package and edit the
callPendoAPI
Web Resource. - Select Text Editor next to Content Type.
- Copy-and-paste the Pendo API key into the code as indicated below:
function callpendoapi() {
'use strict';
if (window.top.pendo) return;
console.log('Invoking Pendo Agent');
let agentUrl = "https://cdn.pendo.io/agent/static/<YOUR PENDO API KEY HERE>/pendo.js"
pendo(agentUrl);
return false;
}
function pendo(agentUrl) {
'use strict';
(function (p, e, n, d, o) {
var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];
v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; 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 = agentUrl;
z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);
})(window.top, window.top.document, 'script', 'pendo');
window.top.pendo.initialize({
visitor: {
id: //Globally Unique Visitor ID
// email: // Recommended if using Pendo Feedback, or NPS Email
// full_name: // Recommended if using Pendo Feedback
// role: // Optional
// You can add any additional visitor level key-values here,
// as long as it's not one of the above reserved names.
},
account: {
id: //Name Of Organization Or Department Visitor Belongs To
// is_paying: // Recommended if using Pendo Feedback
// monthly_value:// Recommended if using Pendo Feedback
// planLevel: // Optional
// planPrice: // Optional
// creationDate: // Optional
// You can add any additional account level key-values here,
// as long as it's not one of the above reserved names.
}
});
} - Optionally, selectively call Pendo based on the Dynamics 365 application.
- Configure metadata.
- Save your metadata fields and publish the Pendo solution.
- Verify that Pendo is installed.
Optional: Selectively call Pendo based on the Dynamics 365 application
If you want to selectively call Pendo on some but not all MS D365 CE applications, replace the callPendoAPI
Function using the sample code below as a basis for your changes.
function callpendoapi() {
'use strict';
if (window.top.pendo) return;
var globalContext = Xrm.Utility.getGlobalContext();
globalContext.getCurrentAppProperties().then(
function success(app) {
console.log(app);
// select which app will have Pendo running
if (app.uniqueName === '<YOUR UNIQUE MSD365 APP NAME HERE>'){
// Load Pendo if unique name matches
console.log('Invoking Pendo Agent on ' + app.uniqueName);
let agentUrl = "https://cdn.pendo.io/agent/static/<YOUR PENDO API KEY HERE>/pendo.js";
pendo(agentUrl);
}
else if (app.appId === '<YOUR UNIQUE MSD365 APP ID HERE>'){
// Load Pendo if unique ID matches
console.log('Invoking Pendo Agent on ' + app.appId);
let agentUrl = "https://cdn.pendo.io/agent/static/<YOUR PENDO API KEY HERE>/pendo.js";
pendo(agentUrl);
}
}
To find the Unique ID and Unique Name for your MS D365 CE app:
- Select your app name at the top your Dynamics 365 account to view all apps.
- Select the ellipsis (...) in your app's tile and select Open in app designer.
- Select Properties to view the Unique Name.
- Find the Unique ID in your URL. Look for
appid=
and then copy-and-paste the characters between=
and&
.
The Unique ID and Unique Name for your MS D365 CE app can also be found using the following console command:
Xrm.Utility.getGlobalContext().getCurrentAppProperties()
This returns something like the following:
Configure metadata
Edit the pendo.initialize()
function to include Visitor and Account IDs. Visitor ID is a required field and must be globally unique. Account ID is highly recommended and can be an organization or department name. For more information, see Planning your Pendo installation.
Visitor metadata example
visitor: {
id: Xrm.Utility.getGlobalContext().userSettings.userId,
},
For guidance, see Microsoft's documentation: getGlobalContext.userSettings (Client API reference).
Account metadata example
account: {
id: Xrm.Utility.getGlobalContext().organizationSettings.organizationId,
},
For guidance, see Microsoft's documentation: getGlobalContext.organizationSettings (Client API reference).
Verify that Pendo is installed
Open the browser console, navigate to the relevant iframe for the canvas app, and run pendo.validateInstall()
. If successfully configured, you then see the visitorID and accountID from the Microsoft application context.
Considerations for model-driven apps on web
Rules that you create for tagging Features might rely heavily on the Contains
selector, and these can be fragile. If you plan on excluding inner text collection, you must use allowedText
to whitelist specific text strings for Contains
rules. For information about CSS selectors, including the Contains
rule, see Using CSS selectors in Feature tagging.
Considerations for model-driven apps on mobile
MS D365 CE applications can be accessed on mobile devices through their corresponding mobile applications, for example, the “Field Service (Dynamics 365)” mobile app or via the “Power Apps” mobile app. Microsoft renders CE applications on mobile differently from on the web. For example, portions of the applications might be re-rendered as native mobile components, Webviews, or in a mobile-friendly manner (such as with different navigation elements). The re-rendering on mobile has the following impact on Pendo Analytics and Guides.
Impact on Analytics
- Limited event capture
- The Pendo JavaScript agent can't capture events from web components that are re-rendered as native mobile components.
- Web components that are re-rendered to be mobile friendly might have new selectors and need to be re-tagged.
- Pendo still captures clicks as raw events, but there's no way to associate these with Features because the selectors will be different from the desktop web application.
- Unable to launch Pendo's Visual Design Studio for tagging:
- There is no way to tag Pages and Features using the Visual Design Studio.
- Page tagging through Suggested Pages and Untagged URLs is still possible.
Impact on Guides
- Unable to launch Pendo's Visual Design Studio for guides: It isn't possible to build guides on top of the mobile UI, but can be built in the web experience.
- It isn't possible to anchor guides to elements or to implement certain behaviors, such as advancing on an element click.