---
source_url: https://itmustbecode.com/pcf-controls-tips-tricks-how-to-detect-authoring-mode/
title: PCF Controls Tips & Tricks : How to detect Authoring Mode
date: 2025-06-02T02:57:10+00:00
categories:
  - blog
tags:
  - dataverse
  - pcf
word_count: 538
reading_time_minutes: 3
type: posts
---

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](https://www.linkedin.com/in/andriibutenko/)** wrote an excellent post about it and proposed a nice solution.

🔗[PCF: Design time vs run time - Andrew Butenko's Blog](https://butenko.pro/2023/01/08/pcf-design-time-vs-run-time/)

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 called **`isAuthoringMode`**—and it immediately caught my attention. _I’m not sure how long it’s been there, but I had never seen it before._

{{< figure src="./image-9.png" alt="" caption="" >}}

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.


{{< figure src="./image-2.png" alt="" caption="" >}}

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_) :

{{< figure src="./image.png" alt="" caption="" >}}

Or in the actual application ( _run time_) :

{{< figure src="./image-1.png" alt="" caption="" >}}

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
{{< linkcard url="https://butenko.pro/2023/01/08/pcf-design-time-vs-run-time/" title="PCF: Design time vs run time - Andrew Butenko’s Blog" summary="Recently I developed quite a complex and quite flexible PCF control for my customer. I did all the testing and everything was working fine for me according to the provided requirements. I notified the customer that the latest version of the control was pushed to the environment and started to wait on the feedback. In…" image="/linkcards/d2fed01b901efb63.jpg" domain="butenko.pro" new_tab="true" nofollow="true" >}}

[Image by rawpixel.com on Freepik](https://www.freepik.com/free-photo/aerial-view-man-typing-retro-typewriter_3213042.htm)