PCF Reloader Transformation

Typescript transformation that enabled automatic reloading of PCF Components when embedded on Model-Driven forms in Dynamics 365.

Table of Contents

• PCF Reloader Transformation
• Motivation
• Installation
• Usage
  • Running the transformer
  • Integrating
    • Fiddler
  • Settings

Motivation

The PowerApps Component Framework includes a test-harness which automatically reloads the component whenever it changes on disk.

However, the test harness has a couple of downsides

1. It does not have access to the environment
2. It does not show you the actual interaction with the surrounding system

In order to test fully, it is neccessary to include the actual component on a form.

However, having to fully reload the form on each change quickly gets annoying. Thus the transformer was born.

Installation

$ npm install -D pcf-reloader-transformer
$ npx ts-patch i

Usage

The generated code can be found in ./samples/patched.ts and the corresponding compiled javascript can be found in ./tests/samples

Running the transformer

The easiest way of running the transformer is through ts-patch.

TS Patch is automatically installed and enabled when installing this package.

To run the transformer, add it to plugins in your tsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "pcf-reloader-transformer",
        "type": "config",
      }
    ]
  }
}

Integrating

The transformation injects code in any class that implements ComponentFramework.StandardControl<IInputs, IOutputs>.

The code will listen for messages passed to the PCF Test Harness, unload the PCF, reload the bundle.js, and re-initialize the PCF with the current context.

The code expects the PCF test harness to be running in watch-mode. Start in watch mode by calling npm start watch.

Fiddler

The easiest way to get the updated bundle on the form is to inject it using Fiddler.

After publishing the component for the first time, an AutoResponder rule on the following format:

For details on setting up Fiddler for PCF debugging, see Microsoft Docs.

Settings

The transformer supports the following configuration settings.

The settings are specified as part of the plugin specification in tsconfig.json