CRM Crate

Open a Canvas App on a ribbon button click in Dynamics 365

We will learn to open a Canvas App on a ribbon button click in Dynamics 365. Before we start, make sure to subscribe to CRM Crate so that you stay up-to-date in the field of Dynamics 365 CRM.

Why do we need to open a Canvas App in Dynamics?

Consider a scenario where we need to open a canvas application during the “OnClick” event of form’s ribbon button. In such scenario, we can open and render the Canvas Application in a HTML iframe which will appear on the same form.

Using navigateTo(Client API) for calling the HTML web resource.

navigateTo (Client API reference)


JavaScript snippet for calling web resource using navigateTo API –

//CRM Crate - JavaScript Snippet.
function callMethod (executionContext) {

//Initiating Web Resource Parameter.
var pageInput = {
    pageType: "webresource",
    webresourceName: "cc_html"

//Declaring HTML Page Dimensions.
var navigationOptions = {
    target: 2,
    width: 1050, // value specified in pixel
    height: 900, // value specified in pixel
    position: 1

//Using navigateTo Client API.
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success() {
            // Run code on success
    function error() {
            // Handle errors

Create a HTML web resource and embedd the Canvas Application.

Step 1 – Copy the default Uniform Resource Identifier (URI).

If you have an app you want to embed, the first step is to set parameters for the Uniform Resource Identifier (URI), so that the iframe knows where to find the app.

Below is the default format of URI –[AppID]?source=iframe

The only thing you have to do is change the ID of your app for [AppID] in the URI (including ‘[‘ & ‘]’).

Below is the detailed list of URI parameters.

  • [appID] – It provides the ID of the app to run.
  • tenantid – is an optional parameter to support guest access and determines which tenant to open the app from.
  • screenColor – is used to provide a better app loading experience for your users. This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. It is best to set it to the same color as your app’s icon.
  • source – does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. They are added to the end of the URI, such as [AppID]?source=iframe&param1=value1&param2=value2. These parameters are read only during launch of the app. If you need to change them, you must relaunch the app. Note that only the first item after [appid] should have a “?”; after that use the “&” as illustrated here.

Step 2 – Get App ID from your Canvas App

  • Navigate to the Power App studio and open a Canvas App as shown below.
Canvas App on a ribbon
  • Select the Canvas Application of your choice and navigate to the details as shown below.
Canvas App on a ribbon button
  • Copy the App ID from the detail section and replace it in the above created URI.

Substitute the [AppID] value in the URI.

Step 3 – Embed your app in a website or HTML Page

Embedding your app is now as simple as adding the iframe to the HTML code.

<iframe width="[W]" height="[H]" src="[AppID]?source=website&screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera"/>

Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Below is the final HTML code with the embedded Canvas App iframe.

<html><head><meta></head><body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">

<iframe width="1000" height="625" src=";screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera">


Configure the web resource in Dynamics 365 and test the Canvas Application.

Call the above JavaScript function during the ribbon button’s “OnClick” event. Deploy the above HTML code as a HTML web resource in Dynamics 365.

Below is the outcome of the above configuration where the Canvas App is opened in the new HTML model page.

Canvas App on a ribbon button
Dynamics 365 form before the ribbon button’s “OnClick” event.
Canvas App on a ribbon button
Canvas App embedded in the Dynamics 365 form after the ribbon button’s “OnClick” event.

Thus we learned to integrate and open a Canvas App on a ribbon button click in Dynamics 365

5 1 vote
Article Rating
Notify of
Inline Feedbacks
View all comments
error: CRM Crate Security Engine - Disabled Right Click & Selection!


Well Done,
Welcome to CRM Crate

Stay tuned with us and get all latest updates and learning in Microsoft CRM and related techonologes.