Using PCF Controls in Canvas Apps and Custom Pages

In previous posts, we created some Power Apps Component Framework (PCF) controls for use in Model-Driven Apps. In this post, we will look at how to use PCF controls in Canvas Apps and Custom Pages.

First, let’s turn on a feature that allows us to use custom components in Canvas Apps. In the Power Platform Admin Center (https://admin.powerplatform.microsoft.com), select your environment, then Settings->Features and find the setting Power Apps component framework for canvas apps and turn it on (don’t forget to Save in the bottom right). You will need this for both canvas apps and custom pages.

Now let’s open a canvas app and click on the insert (+) option, then Get More Components:

Go to the Code tab and select a PCF control:

We will now see Code Components on the left, and expanding this we see our SampleControl:

We can drag the field onto the canvas, and set properties, in this case the Property_Display_Key:

We can now use our PCF component in a canvas app.

To find other controls for Canvas Apps, let’s search in the https://pcf.gallery. Go to the search page and select Made for Canvas Apps:

We will use the Tic Tac Toe control built by David Martínez Alcántara:

Upload and import the component:

We can drag the control onto the canvas:

We can now use this PCF control inside our canvas app:

The same applies to custom pages. We can add a new App->Page:

And import and add the new PCF control to the page. Let’s add Tic Tac Toe to a custom page:

Save the app and publish it:

Now let’s add the custom page to our model-driven app. We will add it to the site map. Let’s edit the Sales Hub app:

Under My Work, let’s select New->Custom Page:

Select the Tic Tac Toe app and click Add:

You may see:

After saving and publishing, we see our custom page running our PCF control is available in the model-driven app:

ABOUT CARL DE SOUZA

Source