INC-PCF-REACT

This library makes it easier to create a React based PCF control with support for the MVVM and ServiceProvider patterns. This version of the PCF-REACT project is a clone of Scott Durow's PCF-REACT project, and therefore all credits should be due there: https://github.com/scottdurow/pcf-react

This version of that library updates (or in some instances, downgrades) the version of dependencies (including moving some to dev-dependencies) to align with the new in-preview feature of dataverse to share react platform libraries across PCF controls, therefore reducing the bundling size of the delivered control. For more information, please see here: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries

Why?

When writing PCF controls, there is usually a great deal of boiler plate code for handling updates to properties and managing dataset paging. Furthermore, there are some oddities of the way in which PCF provides you with data and some differences between Canvas and Model Apps:

1. DateTimes are provided in browser local timezone and need to be converted to utc and the users timezone offset added before they can be used in React bindings. See http://develop1.net/public/post/2020/05/11/pcf-datetimes-the-saga-continues
2. In Canvas Apps, the list of changed properties is not provided and must be computed by looking at the changed properties
3. In Model Apps, when auto-save runs, all the properties are registered as having changed, even if they haven't
4. When a PCF control updates a value and getOutputs() is called, this will then trigger an updateView with the same values. To avoid unnecessary rendering, we need to detect changes compared the previous values.
5. In Dataset PCFs the paging works differently between Canvas and Model and has some oddities. This library attempts to homogenize the differences and provides an abstraction. See http://develop1.net/public/post/2020/05/07/pcf-dataset-paging-in-mode-vs-canvas-apps
6. When testing control logic, it is difficult to mock the different ways in which updates can be called. This library implements a serviceProvider pattern with a ControlContextService that abstracts away from the base StandardControl and provides methods that can be easily mocked using jest. These methods extend to other areas such as opening records and formatting values.

This library has been updated, as of 2.0, with support for React controls within Dataverse. Using the -fw react parameter when creating a PCF control allows you to share the react framework libraries with the PowerPlatform, reducing the overall size of the PCF bundle. For more information, please see: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries

Controls will need to be created with the -fw react parameter. Where a control was created without using the -fw react parameter, the following changes will be required on your project:

1. Update the ControlManifest.Input.xml file, change control-type from standard to virtual
2. Update the ControlManifest.Input.xml file, under resources add the following: <platform-library name="React" version="16.8.6" />
3. Update the index.ts file as per the changes defined below

Simple Field PCF control

This library can easily be used by replacing ComponentFramework.StandardControl<TInputs, TOutputs> in your index.ts that is generated by pac pcf init to be StandardcontrolReact<TInputs, TOutputs>. You then no longer need the init, updateView etc. methods:

export class PCFTester extends StandardControlReact<IInputs, IOutputs> {
  static createElement(serviceProvider: ServiceProvider): React.ReactElement {
    return React.createElement(<YOUR REACT FIELD COMPONENT>, {
      serviceProvider: serviceProvider
    });
  }

  constructor() {
    // Change PCFTester to the name of your TS Class
    super(PCFTester.createElement);

    this.renderOnParametersChanged = false;
    this.initServiceProvider = serviceProvider => {
      serviceProvider.register("<YOUR VIEWMODEL NAME>", new <YOUR VIEWMODEL>(serviceProvider));
    };
  }
}

The component will be rendered when any of the properties changes.

In your React component you can access the ViewModel and ControlContext using:

this.controlContext = props.serviceProvider.get(ControlContextService.serviceProviderName);
this.viewModel = props.serviceProvider.get("<YOUR VIEWMODEL NAME>");

The parameters can be read using:

context.getParameters<IInputs>()

This allows you to using the MVVM pattern and move your logic into a ViewModel that binds to the View using mobx or redux.

Simple Dataset PCF control

export class PCFTesterDataset extends StandardControlReact<IInputs, IOutputs> {
  static createElement(serviceProvider: ServiceProvider): React.ReactElement {
    return React.createElement(<YOUR REACT FIELD COMPONENT>, {
      serviceProvider: serviceProvider
    });
  }

  constructor() {
    // Change PCFTesterDataset to the name of your TS Class
    super(PCFTesterDataset.createElement);

    this.renderOnParametersChanged = false;
    this.renderOnDatasetChanged = false; 

    this.initServiceProvider = (serviceProvider: ServiceProvider): void => {
      serviceProvider.register("<YOUR VIEWMODEL NAME>", new <YOUR VIEWMODEL>(serviceProvider));
    };
  }
}

If using mobx/redux for state management, then you can set renderOnDatasetChanged = false and in your ViewModel use:

this.controlContext = this.serviceProvider.get(ControlContextService.serviceProviderName);
this.controlContext.onDataChangedEvent.subscribe(this.onDataChanged);