Getting started with Power Apps Component Framework (a.k.a. Goodbye Web Resources) !

After delivering the new “Microsoft Power Platform” and then the “Power Apps”, Microsoft wants to allow third-party developers to create attractive visual components in PowerApps using the same framework that is used by the Microsoft team.

Introduction

The first component concept was introduced in 2016 with a set of optimized mobile controls.

After the release of the unified interface, the first customs controls appeared for Dynamics 365. They can therefore be visible on mobile, tablet and more traditionally on the Web client.
At that time we were talking about Custom Control using an exclusive Microsoft framework

After the release of “Power Platform”, they just renamed it “Power Apps Components”. Which seems quite consistent! Finally, they announced the preview of the “Power Apps Components Framework” on April 23, 2019.

What is the Power Apps Components Framework ?

It’s a unified framework across Model Driven App and Canvas App that means same components can be reused across both app types due to same framework interface

It enables first and third party developers to build their own reusable UI components using their choice of libraries and services.

PCF is used to develop pro-dev leaf controls and programmatic compositions.

We already knew the possibility of creating low-code composition of component using expressions and connectors for Canvas App and now we will be able to create more sophisticated components.

So we can have like two type of components :

Custom Pro Components (example: from the PCF Gallery, only for model driven apps but soon for both)
Custom Canvas Compositions (example: 10 Reusable Components: tab control, calendar, dialog box, map control and more)

Building Canvas Components @Business Applications Summit 2019

Building PCF Components @Business Applications Summit 2019

Currently, we can not use Custom Pro components in the Canvas application, but only compositions. I heard it would be available in September 2019. So we will focus on the PCF for the Model Driven App.

The component implemented with PCF is an integral part of the DOM of the page, which is completely different from an Iframe or a Web resource, which implies a gain in performance.

Microsoft is working to allow us as a developer to make this type of component available on Source App, but in the meantime, you can refer to the PCF Gallery (projet maintained by Guido Preite, the same person who maintains Dynamics Weekly ) if you want to have an overview of existing components.
Here is a link to the one I designed: Phone Number By Country .

We can add these components to:

Field (lookup not supported yet, according to Hemant Gaur: “Lookup PCF support is a tracked work item and will be available post model apps PCF GA.”)
Entity grid (sub grid, views…)
In a Business Process Flow step

Here is an example of the “SharePoint DocumentCard” PCF created by Jose Aguilera added to a view:

A control for DataSet to preview the document image of SharePoint documents associated with the record.

Another example with my first component “Phone Number By Country“, added to a field:

A control to display a flag next to a phone field according to the calling code. Support 250+ countries.

An important thing to understand is to consider this framework as a socket. It will provide you with the Api Web Context, data / metadata and everything you need to talk with your model-driven application and to create your responsive design. Remember that components can be used on tablet, phone, web browser and they should not contain external dependencies (be careful how you code it).

"Framework As Socket", slide from Hermant Gaur. — “Framework As Socket”, slide from Hermant Gaur.

So to summarize, it allows you to:

Build reusable components for Model Driven Apps and Canvas App without dependencies
Package component into solution (Managed and UnManaged)
Use Modern Web Design pattern (TypeScipt, React, Angular, Fabric…)
Only works in Unified Interface (Tablet, Phone and Web)
Still in preview
Can be bound to Fields and added to forms, grid/views, BPF step
Aimed at developers, ISVs