Gotchas with the PCF Custom Control Sandbox

Jared Johnson, 28 June 2019

When creating a custom control, I had a couple of gotchas when debugging in the Custom Control sandbox which were not an issue when the control was deployed into Dynamics 365.

The first issue was with inputs and typing. Because custom controls are built using typescript the type of the inputs will be used. In my case the input was set to be bound to a Two Options field, so the framework exposed this as a Boolean type. When the sandbox initialises with the default values it worked, however as soon as the values were changed using the Inputs section of the Sandbox the code broke. This was because the values were now being passed from the sandbox as strings, since they are values from an html dropdown list. The solution for the code to work in the sandbox was to use an any type variable when reading the input parameter from boolean to any, and then using a condition to set the Boolean variable.

For example:

let raw = context.parameters.TwoOptions.raw;
let twoOptions: boolean = raw === true || raw === "true";

The other issue occurred when I tried to display images in the control. While in the Sandbox it is possible to use relative URLs to point to the images, when deployed this would not be possible. The correct way of getting the image to display is to use the resources.getResource API, however it and other APIs just return undefined when called from within the Sandbox. This means that if you are using any of them, you will need to deploy the control to see it working correctly.