PCF-REACT

This library makes it easier to create a React based PCF control with support for the MVVM and ServiceProvider patterns.

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.

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> {
  constructor() {
    super();
    this.renderOnParametersChanged = false;
    this.initServiceProvider = serviceProvider => {
      serviceProvider.register("<YOUR VIEWMODEL NAME>", new <YOUR VIEWMODEL>(serviceProvider));
    };
    this.reactCreateElement = (container, width, height, serviceProvider) => {
      ReactDOM.render(
        React.createElement(<YOUR REACT FIELD COMPONENT>, {
          serviceProvider: serviceProvider,
          controlWidth: width,
          controlHeight: height,
        }),
        container,
      );
    };
  }
}

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> {
  constructor() {
    super();
    this.renderOnParametersChanged = false;
    this.renderOnDatasetChanged = false; 

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

    this.reactCreateElement = (container, width, height, serviceProvider): void => {
      ReactDOM.render(
        React.createElement(<YOUR REACT DATASET COMPONENT>, {
          serviceProvider: serviceProvider,
          controlWidth: width,
          controlHeight: height,
        }),
        container,
      );
    };
  }
}

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);