Help! I Need a Code Component!

Have you browsed the PCF Gallery and thought: WOW, this is exactly what I need! Do you know how to actually incorporate an open source PCF/Code Component in your solution and maintain high quality? These are some of the things you need to consider.

What is a Code Component/PCF?

So let’s start with some background. A Code Component, also called PCF, is in short: JavaScript and HTML code created with the Power Apps Component Framework. The framework is, what most frameworks are, a guidance on how to write the code needed. It’s part of Microsoft’s “no-cliff” story that offers a sustainable way to extend power platform when the low-code platform is not fully sufficient.

When should you use a PCF?

In general you would use a PCF to improve the User Experience in your Power Apps, both model-driven and canvas. For example a PCF could help you with the data input of a certain field, say a date field where you only should be able to choose mondays. Another example would be to use a PCF for a list of records in the form of a calendar.

What to Consider

So even if PCF is created within a framework, it’s not giving guidance on every little thing, some things might have been overlooked by the developer or just done differently on purpose.

1. Fluent UI

Is the PCF written in Fluent UI? Using a PCF written with a different UI might standout and look weird in your app, if you want consistency you should pick a PCF written with Fluent UI. For example I tested out a PCF on a date field, on a form with several date fields (but the PCF was only used on one of them), but because it wasn’t written with Fluent UI the date picker looked and worked differently and would have confused the users so I chose a different solution instead.

2. New Record/Inactive Record

How does the Code Component act when you create a new record? For example: a PCF to display a N:N relationship in dataverse might render weird when there is no data available (which is obviously the case when the record is not saved yet). Does it perhaps look like you can add data before you save the record even though you shouldn’t be able too?

Same thing goes for what the PCF looks like when you deactivate a record or it becomes read only. Will the field or subgrid that you applied this PCF on actually be read only or does it look like it is still editable?

3. Language Support

Labels are hard coded in Code Components, and you do not have the option to edit these like you normally do with other parts of Power apps. This mean that you need to be okay with the language and the label of the component before you use it (or make changes to the code).

4. Field Level Security

Does it honor the field level security model? Maybe that is not something that you need to consider in your solution and you can overlook that and use a PCF that is missing the parts about FLS, but it’s something you should consider before just going ahead and using one.

5. Accessibility

Does the code component work with screen readers for example?

6. Time Zones

If it’s a PCF for a date field, does it honor time zones?

7. Themes

Code Components do not honor Themes in model-driven nor canvas apps. This means that if you have a very strict theme in your production environment you have to hard code that theme into the PCF itself.

8. Have a plan

It’s open source. You are not paying anything, you haven’t developed it yourself. That means you can not count on it being free of bugs or come with updates required of the platform or anything of that kind. That means that YOU have to have a plan on how to handle all of that. Do you have a developer familiar with the Power Apps Component Framework that can fix a bug or update a PCF that you want to use? If not: do you know where to find one to hire? Consider contracting the pro-coder that created the code component. You need a plan, this is still code that needs a plan for maintenance.

Managed Solutions

If you look at the pcf.gallery there is this tag if a managed solution exist or not. Please note that this is super useful for testing and demo purposes. You should not use this in production, then you might end up with 20 solutions with 20 different prefixes and a very messy solution.

If you decide that you found a PCF that is of the quality that you need (considering all points above) and you want to incorporate this in your solution: grab a pro-coder friend and have them compile the source code into your DEV environment.

Wait a minute…

So hopefully reading this far I’ve got you all excited and you are about to navigate to pcf.gallery at once to get a ton of PCFs into your solution but… Wish I didn’t have to rain on your parade but PCFs are still code and therefor have a maintainability cost. Always Always compare the value it brings to the total cost of ownership and check out Scott Durows video on exactly this subject here.

#LowCodeProCodeUnite is a hashtag that I and Scott created before our session on no-code vs code at Scottish Summit 2020. It’s all about using the right tech on the right place and really embracing the best of both code and no-code.

Summary

There are other aspects besides the one I mentioned here that are worth considering (responsivity, mobile support etc), but this is a start on what to look for to up the quality of your solution when choosing an open source code component.

Original Post https://saralagerquist.com/2021/11/01/help-i-need-a-code-component/