Best Practices for Developing PCF Controls on Power Platform

Occasionally, I can code some PCF controls on my projects. My journey with React and Fluent UI began some time ago with the smallest PCF to customize the look and feel of fields, but today, I'm implementing huge PCF components for the datasets. Along the way, I've managed to collect some best practices. So, check out my findings below.

Power Platform: Insights from a Developer's Perspective

As a developer on the Power Platform, it's crucial to customize the platform and build new modules that appear native while leveraging Microsoft's approaches and technologies. The advent of PCF and Fluent UI has made this more accessible.

????Native Look and Feel - Ensure Controls Look Native: Whenever possible, use: Fluent UI, Virtual PCF Control

This approach improves performance and allows for rapid control development. Virtual PCF Control helps minimize the final bundle size, speeding up page load times.

??Adhere to System Behavior Patterns

??Field-Based Components:

????Use Empty Field Placeholder:

????Implement Read-only Mode: Enable this when the field is disabled on the form.

??Dataset-Based Components:

Implement different working modes for the control:

????Design Mode: Can be ignored and doesn't execute the main component logic in the form designer mode.

????Debug Mode: Allows debugging the component on a PC without deployment.

????Indicate data loading with a shimmer.

FluentUI has already implemented specific components that supporting shimmer functionality for instance, you can use ShimmeredDetailsList instead of the original DetailsList to implement grid with shimmer. Or you can implement your own shimmer ready-made Shimmer component. See example below.

????Empty list placeholder - ?use an empty list placeholder with a message to avoid confusing users. Simply add a message explaining why the field is empty. See code example in the Figure 4, lines 14-16.

??Common Rules

???? Localization: Always build PCF/CustomPage/CanvasApp with localization resources from the start. This is part of the standard boilerplate of PCF, so it's strange to bypass this by hardcoding strings in the code. I usually utilizing the localization helper class to bright localization to the PCF controls.

???? The implementation should rely on metadata received at the loading stage.

???? Your custom PCF should fetch data and settings from their parameters, not the form context (Xrm.Page). Even more important, please avoid modifying form values from your PCF control. In that case, PCF control will be dependent on the specific form instead of building a form-agnostic PCF.

???? Use Mock Data and Unit Testing

???? Too many controls or non-optimized implementations can degrade the user experience with the platform.

???Remember, Power Platform focuses more on data rather than design (UI/UX). Maintain a balance between customizing fields and lists when developing various customizations.

??????P.S. Also, Unit Testing is an interesting topic. Feel free to leave comments if you would like to see the new article about it.