Automatic refreshing of PCF components when embedded on a model-driven App in Dynamics365
npm install pcf-reloader-transformerTypescript 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
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.
sh
$ npm install -D pcf-reloader-transformer
$ npx ts-patch i
`Usage
!PCF Reloader in actionThe generated code can be found in ./samples/patched.ts and the corresponding compiled javascript can be found in ./tests/samples
$3
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_
json
{
"compilerOptions": {
"plugins": [
{
"transform": "pcf-reloader-transformer",
"type": "config",
}
]
}
}
`For a list of available settings see Settings
$3
The transformation injects code in any class that implements .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:
| If request matches... | then respond with... |
| ------------------------------------------------------------------------- | -------------------------------------------------------------- |
| REGEX:(?insx).+\/WebResources\/cc_(?'namespace'[^.]+)\.([^/]+)\/bundle.js | __sourcedir__\${namespace}\out\controls\${namespace}\bundle.js |
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_
The following settings are available:
- Debug
- Print Generated
- Show Force Reload
- Use Browser Sync
- Verbose
- WS Address
Debug
Setting: debug
Type: boolean
Default:
Description:
If , inject calls to the debugger to allow stepping into the dynamically loaded code.$3
Setting: printGenerated
Type: boolean
Default:
Description:
If , the generated typescript code will be output to a file alongside the detected file. If the file is named index.ts, the generated file will be index.generated.ts$3
Setting:
Type: boolean
Default:
Description:
If show a reload button in the corner of the component$3
Setting: useBrowserSync
Type: boolean
Default: true when PCF Start version >= 1.11.3, false otherwise
Description:
If true force use of the BrowserSync.io / Socket.io based integration,
If false, force use of the WebSocket,
If not specified, detect the protocol based on the PCF Start version$3
Setting: verbose
Type: boolean
Default:
Description:
If , status messages will be printed during the transformation
$3
Setting: wsAddress
Type: string
Default: For websocket:
For BrowserSync: