Power Apps Component Framework (PCF) is a powerful tool that allows developers to create custom components for Dynamics 365. These components can enhance the user experience by providing more interactive and visually appealing controls. In this blog, we’ll explore what PCF Control is, how it works, and how you can create your own PCF controls in Dynamics 365.

What is PCF Control in Dynamics 365?    

PCF stands for Power Apps Component Framework. It is a framework that enables developers to create custom components for model-driven apps and canvas apps in Dynamics 365. These components can replace standard controls, providing a more tailored and interactive user experience.

One of the greatest advantages of PCF controls is that developers can reuse code components across various entities and forms.

Additionally, while some developers create their own PCF components to provide custom functionality, many native developers benefit from the resources available on the PCF.Gallery website. This site offers a wide range of prebuilt components that can be utilized based on the specific needs and requirements of a project.

For instance, color options are not available out of the box in PowerApps.

Despite these basic limitations, our developers at Stallions Solutions have successfully overcome numerous challenges while implementing custom PCF controls in Dynamics 365.

Why Use PCF?

PCF controls offer several advantages:

  • Customisation: Tailor the user interface to meet specific business needs.
  • Interactivity: Create more engaging and interactive controls.
  • Reusability: Once created, PCF controls can be reused across different apps and forms.
  • Performance: PCF controls can improve the performance of your app by reducing the need for custom scripts.

Getting Started with PCF

To start creating PCF controls, you’ll need the following tools:

  • Visual Studio Code: A lightweight but powerful source code editor.
  • Node.js: A JavaScript runtime built on Chrome’s V8 JavaScript engine.
  • Microsoft Power Platform CLI: A command-line interface for managing Power Platform components.

Creating Your First PCF Control

Set Up Your Environment:

  1. Install Visual Studio Code, Node.js, and Microsoft Power Platform CLI.
  2. Open Visual Studio Code and create a new folder for your project.

Initialise the Project:

  1. Open a terminal in Visual Studio Code and navigate to your project folder.
  1. Run the following command to initialise a new PCF project:
  2. pac pcf init –namespace MyNamespace –name MyControl –template field
  3. This command sets up the basic structure for your PCF control.

Develop Your Control:

  1. Open the generated project in Visual Studio Code.
  2. Implement the required artifacts, such as the manifest, component logic, and styling.
  3. Use TypeScript to write the logic for your control.

Build and Test Your Control:

  1. Run the following command to build your project:
  2. npm run build
  3. Test your control by running it in a local environment or deploying it to a test instance of Dynamics 365.

Deploy Your Control:

  1. Once you’re satisfied with your control, bundle it into a solution file.
  2. Import the solution into Microsoft Dataverse to make it available in your Dynamics 365 environment.

Common Challenges During Implementation

One of the main challenges in Dynamics 365 / Power Platform development is learning how to add custom functionality to the User Interface. For instance, a .NET developer might find it challenging when trying to add a button to the page that triggers server-side code.

However, we discovered a method of adding HTML / JavaScript resources to the page, which resulted in creating an Annotation (Note). By intercepting the Annotation, we could obtain the regarding object. This allowed our team to execute server-side code from the User Interface, although it wasn’t as seamless as we had hoped.

How is it Different from Web Resources?

Unlike HTML web resources, PCF code components are rendered within the same context and loaded simultaneously with other components, providing a unified user experience.

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

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

Advantages

  • Access to Diverse APIs: PCF exposes a variety of APIs, including component lifecycle management, contextual data, and metadata.
  • Web API Server Access: Utility and data formatting methods, device features like camera, location, and microphone, and simple user experience elements such as dialogues, lookups, and full-page rendering.
  • Support for Modern Web Practices: Ensures compatibility with contemporary web standards.
  • Performance Optimization: Enhances the performance of your applications.
  • Reusability: Code components can be reused across different apps and forms.
  • Bundling: All files can be bundled into a single solution file.
  • State Management: Components can be destroyed and reloaded for performance reasons while maintaining state.

Limitations

While the PowerApps component framework allows you to create custom components to enhance the user experience in model-driven and canvas apps, there are some limitations:

  • Experimental Preview: The experimental preview for canvas apps only supports field-type components, not dataset-type components.
  • API Availability: This preview does not include Common Data Service-dependent APIs such as WebAPI and some other APIs. Refer to the PowerApps component framework API reference for individual API availability in this experimental preview release.
  • Bundling Requirements: All code, including external library content, must be bundled into the primary code bundle by code components. The PowerApps command line interface can assist in bundling external library content into a component-specific bundle, as demonstrated in the Angular flip component example.

By understanding these challenges and differences, developers can better navigate the complexities of implementing custom PCF controls in Dynamics 365.

Wrap Up

Power Apps Component Framework (PCF) is a robust tool that significantly enhances the customisation and interactivity of Dynamics 365 applications. By allowing developers to create reusable, custom components, PCF provides a tailored user experience that can meet specific business needs. Despite some initial learning curves and limitations, the benefits of using PCF—such as improved performance, modern web practices, and access to diverse APIs—make it an asset for any Dynamics 365 developer.

By leveraging resources like the PCF.Gallery and following best practices for development and deployment, developers can overcome common challenges and fully utilise the potential of PCF controls. Understanding these aspects will help developers navigate the complexities and create powerful, efficient solutions within Dynamics 365.