What is PCF Control in D365?

PowerApps Control Framework (PCF) components are basic building tools that spread a crossed the entire PowerApps potential. The PowerApps component framework allows developers to create code components for canvas apps that we don’t get by default.

One of the best things about PCF controls is that developers can reuse code components across multiple entities and forms.

Further, some developers can create their own PCF components to provide custom functionality, but most native developers can take advantage of the resources available on the PCF.Gallery website. After all, it contains a slew of prebuilt components that they can use based on the needs and requirements of the project.

Take color, for example; it is not available out of the box in PowerApps.

Apart from these basic constraints, our developers at Stallion Solutions overcome several challenges while implementing custom PCF controls in Dynamics 365.

Configuration Advanced

We added the option for a more advanced configuration in the control’s most recent release (v. 1.9.4).

For example, in the new version, the control configuration “Use Subgrid Data” now allows configuring the control so that it restrains the subgrid data. Instead, the PCF control will use WebApi to load the required data flow.

User case for Advanced Configuration

This may appear to be an odd thing to do. But, let us explain the situation we were in.

The customer would like to see the conversation even while filling out the message form. This would imply including a subgrid on the message form that displays all messages related to the “parent” Case/Conversation entity. However, all messages are activities and are “only” indirectly related to the Case/Conversation entity via the “regarding object” field. Because there is no relationship between messages, and certainly no N:N relationship, it is impossible to display a subgrid containing the correct data.

Because “quick view forms” are read-only, they do not currently support PCF controls. As a result, those are also out of the question.

This is only a temporary solution until Microsoft releases the new “form component.” These will allow for fully functional forms within forms and will support PCF. The “form components” should be available in Release 2020 Wave 2.

What are Custom Code Components?

  • Custom controls enable you to convert text-only fields into visualizations. Similarly, custom controls can transform datasets, such as a view, into a more visual rendering rather than a list of records.
  • Visualizations of custom controls can appear on forms, dashboards, views, and homepage grids. In addition, you can configure one type of custom control to appear in the web browser client while another appears in Dynamics 365 for Customer Engagement phone or tablet mobile apps. For example, in web browser clients, you could use a number input custom control for a field and a slider custom control in the phone app.
  • Users can fully interact with the PCF control to change the value after the customization is published, such as by sliding the control using the linear slider custom control. In addition, changes are saved automatically when the form is closed, just like when a user changes a traditional field on a form.

Methods of Deployment

You can deploy PCF code components in two ways:

  1. You can import the solution into CDS
  2. Or you can use Power Apps CLI

Requirements

  • First, you have Node.js, which will also install NPM. Node.js is a framework for the purpose of developing server-side JavaScript applications using the V8 engine and NPM (Node.js Package Manager). This tool will allow you to include, remove, and update the project’s libraries.
  • Visual Studio Code.

Common Challenges while Implementation

Learning how to add custom functionality to the User Interface was one of the challenges most people face while learning Dynamics 365 / Power Platform development. For example, the.NET developer can become frustrated when you want to add a button to the page that triggers some server-side code.

However, we eventually discovered a pattern of adding HTML / JavaScript resources to the page, which resulted in creating an Annotation (Note). Intercepting the Annotation would yield the Regarding object. This allowed our team to run server-side code from the User Interface, though it wasn’t as smooth as we’d hoped.

How is it Different from Web Resources?

In contrast to HTML web resources, code components of PCF are rendered as part of a similar context and loaded at the same time as any other, providing the user with a unified experience.

You can write code components that can be used across the entire range of Power Apps benefits and reuse them across multiple tables and forms.

Developers can combine all HTML, CSS, and TypeScript files into a single solution package file that can be moved between environments and made available via AppSource.

Advantages

Access to a diverse framework of APIs exposes capabilities such as component lifecycle management, contextual data, and metadata.

Web API server access; utility and data formatting methods; device features such as camera, location, and microphone; and simple user experience elements such as dialogues, lookups, and full-page rendering. Other benefits include:

  • Support for the contemporary web practices
  • Performance optimization
  • Reusability
  • You can bundle all files into a single solution file
  • Capability to be destroyed and reloaded for performance reasons while maintaining state

Limitations

You can now create your code components to improve the user experience in model-driven and canvas apps with the release of the PowerApps component framework. However, even though you can create your components, some limitations prevent developers from implementing specific code components. Some of the restrictions are as follows:

  • The experimental preview for canvas apps only supports field-type components, not dataset-type components.
  • This experimental preview does not include Common Data Service dependent APIs such as WebAPI and a few other APIs. See PowerApps component framework API reference for individual API availability for this experimental preview release.
  • All code, including external library content, should be bundled into the primary code bundle by code components. See the Angular flip component example of how the PowerApps command line interface can assist you in bundling your external library content into a component-specific bundle.

Conclusion

As you can see, using Power Platform to connect a control to your Power App with server-side logic is simple. Power Automate offers fantastic low / no-code solutions, and the Power Apps Component Framework simplifies the design, publishing, and connecting of controls to your user interface. Don’t hesitate to contact us for more information on configuration PCF controls in Dynamics 365.