When you configure a PCF control on a Dataverse model-driven app, the form designer will try to render the control even though it’s not running in the actual app context.
This usually isn’t a problem, but for complex controls that depend on runtime data, it can cause errors—and even break the form designer.
Moreover, as a PCF developer, you might want to show a simplified or placeholder version of your control in the form designer to help makers understand how it will look when the app actually runs.
In this post, we’ll explore how to detect authoring mode during a PCF control’s initialization. That way, the code can be adjusted to avoid design time issues and provide a better configuration experience.
Detecting Authoring Mode
I’m not the first to highlight this issue—Andrew Butenko wrote an excellent post about it and proposed a nice solution.
🔗PCF: Design time vs run time - Andrew Butenko's Blog
In fact, I’ve been using a slightly tweaked version of his approach in many of the controls I’ve developed. I use the following code in the init method of my PCF controls to set a variable isDesignMode that I can use afterward in the component logic. It looked something like this :
//https://butenko.pro/2023/01/08/pcf-design-time-vs-run-time/
if (location.ancestorOrigins?.[0] === "https://make.powerapps.com" ||
location.ancestorOrigins?.[0] === "https://make.preview.powerapps.com") {
this._isDesignMode = true;
}
While his method works well, it depends on checking the origin URL (e.g., make.powerapps.com) to determine if the control is rendering in the form designer (design time) or in the actual app itself (run time). This works for now, but if Microsoft ever changes the URL structure, the logic could break unexpectedly.
Fortunately, while debugging a PCF control in the browser dev tools, I stumbled across an undocumented property of the PCF context.mode object calledisAuthoringMode—and it immediately caught my attention. I’m not sure how long it’s been there, but I had never seen it before.
So I decided to try it out and I simplified my detection logic to use isAuthoringMode instead of checking the origin URL.
My new version is quite simple and looks like this :
if ((context.mode as any).isAuthoringMode === true) {
this._isDesignMode = true;
}
Unfortunately since this property is not documented thus not part of the Typescript typings of the context object, the context.mode needs to be casted as any for the value to be accessed.
And it works exactly as expected. As you can see, the value of isAuthoringMode changes accordingly.
Whereas the control is rendered in the form designer (design time) :
Or in the actual application (run time) :
It’s as simple as that. I find this new approach concise, resilient, and future-proof. Hopefully, Microsoft will eventually release official documentation and typings for this property to simplify things further.
Hope this helps,
Links
Be First to Comment