An environment got stuck in some bad state. First, publishing was no longer possible. Then, after deleting the environment from admin center the environment was still there but Delete button was not available.

Dropping to console, issuing

pac admin delete --environment <your-guid-here>

and waiting a few minutes helped.

Task

Create a custom (PCF) control for use in edit form of a model-driven app which would add a simple, display-only, visual indicator based on the current state of the entity.

Problem

After following the steps to create the control, implement the requirements, test it in the browser test harness and publish it, I struggled to make it appear in Components list of form editor. After doing pac pcf push, it would appear in the list of custom controls in the default solution of the environment, but I could not make it available for adding to the form itself.

All sources on the internet, including official documentation, were pointing to classic form editor and changing the default control for a field. Since the task was to display additional data and not replace default input control, this felt unnecessary. Nevertheless, I tried to follow the steps but Field Properties dialog would not show. Classic editor appears to be very unstable.

Experimenting with different way of publishing by using msbuild to create unmanaged (and then managed) solution and manually import it did not lead to success.

Using search engines and AI chat did not help.

Idea

After a couple of days, I got back to this and thought - what if I tried to publish a sample control from the samples repository?

That worked. After doing all steps - the control showed in the form editor.

OK, now, what is different between that control and my control? Can’t see anything obvious: directory structure is the same, manifest looks the same, implementation follows the same pattern.

Then, let’s try and apply changes from my control to sample control step by step and see at which point it stops showing up in the form editor.

Resolution

Doing that demonstrated that once usage attribute of property elements in manifest is changed to input, control is no longer displayed in the Components tolbox of the form editor.

And remember, the goal was to enrich the display of data, not to edit it, and so it seemed logical to select input value. So easy to make a mistake costing many hours.

But how is one to know in the first place? Here’s the relevant excerpt from the documentation:

Name:           usage
Type:           bound, input or output
Description:    The usage property identifies if the property is meant to represent a column that the component can change (bound), read-only (input) or output values

Neither here nor elsewhere did I found it stated that properties must be bound for the control to work.

After the fact, searching with appropriate keywords produced some results from which it can be understood that other people are seeing same behavior.

Bonus funny moment

At one point I found a post by a developer saying he is coming from C++ background. He needs to do something with Power Apps but wonders where is all the documentation - all he can find is videos. I felt his pain :)

Takeaway

Do things in tiny steps. Especially so if the platform is new to you.

I asked Bing AI:

in javascript, how to access outer object’s this from inner objects function ?

The answer starts with:

To access the outer object’s this from an inner object’s function in JavaScript, you can assign the outer object’s this to a local variable and use that variable inside the inner object’s function. Here is an example:

var outerObject = {
  outerProperty: 'outerPropertyValue',
  innerObject: {
    innerFunction: function() {
      console.log(outerObject.outerProperty);
    }
  }
};

outerObject.innerObject.innerFunction(); // logs 'outerPropertyValue'

To name the outer object - not a bad idea at all, only it was not applicable for me.

But then, there was more:

You can also use arrow functions in ES6 to capture the this value of the enclosing context, avoiding the need to assign this to a new variable or to use bound functions. Here is an example:

var outerObject = {
  outerProperty: 'outerPropertyValue',
  innerObject: {
    innerFunction: () => {
      console.log(this.outerProperty);
    }
  }
};

outerObject.innerObject.innerFunction(); // logs 'outerPropertyValue'

That looks nice and simple! But, isn’t innerFunction’s this the innerObject? 🤔

Running the code produces an expected undefined.

So, nothing new - AI offers convincing anwers which are wrong - it’s only that it happened to me for the first time.