26 Sep 2023, 17:17

Custom PCF component for model-driven apps in Power Apps must have a bound property

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.