# 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 1. In Canvas Apps, the list of changed properties is not provided and must be computed by looking at the changed properties 1. In Model Apps, when auto-save runs, all the properties are registered as having changed, even if they haven't 1. 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. 1. 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 1. 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` in your index.ts that is generated by `pac pcf init` to be `StandardcontrolReact`. You then no longer need the `init`, `updateView` etc. methods: ``` export class PCFTester extends StandardControlReact { constructor() { super(); this.renderOnParametersChanged = false; this.initServiceProvider = serviceProvider => { serviceProvider.register("", new (serviceProvider)); }; this.reactCreateElement = (container, width, height, serviceProvider) => { ReactDOM.render( React.createElement(, { 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(""); ``` The parameters can be read using: ``` context.getParameters() ``` 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 { constructor() { super(); this.renderOnParametersChanged = false; this.renderOnDatasetChanged = false; this.initServiceProvider = (serviceProvider: ServiceProvider): void => { serviceProvider.register("", new (serviceProvider)); }; this.reactCreateElement = (container, width, height, serviceProvider): void => { ReactDOM.render( React.createElement(, { 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); ```

	Version	Updated	Created
@alma3lol/react-mvvm	1.3.0	4 years ago	4 years ago
cra-template-typescript-mvvm	2.0.0	2 years ago	3 years ago
inversify-react-mvvm	0.0.4	4 years ago	4 years ago
pcf-react	1.0.13	3 years ago	4 years ago
rhelena	1.2.5	5 years ago	8 years ago

@alma3lol/react-mvvm vs cra-template-typescript-mvvm vs inversify-react-mvvm vs pcf-react vs rhelena

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past