Virtual React PCF code components - create new, and convert existing ones!
Vložit
- čas přidán 25. 07. 2024
- You've been waiting for it - now it's here! In this video, I'll show you how to create a virtual react control and how to convert your existing react and fluent UI controls to virtual ones. #PowerApps #PowerApps #PCF #React #FluentUI #PowerPlatform
👉 Blog post on how to convert controls develop1.net/public/post/2022...
👉 Microsoft blog post powerapps.microsoft.com/en-us...
00:00 Introduction
00:42 What is a virtual react control?
01:02 Two types of performance improvements
03:42 Creating a virtual control using pac pcf init
04:52 New framework parameter
06:02 Converting existing controls to virtual controls
07:22 Making updates to the control manifest
09:16 Making updates to index.ts
11:40 Building and testing the control
13:09 Conclusion - Jak na to + styl
"It really is that simple...", I always chuckle when I hear Scott saying that! Excellent video, thanks Scott, hopefully I'll figure it out - eventually!
You’ve got this!! 💪
Haisenberg, I'm really enjoying every video! You are a great teacher!
Hehe - Heisenberg 😎 Thank you for watching!
Thanks again for yet another great video. Looking forward to seeing this feature becoming GA. This is totally a no-nonsense next logical step for PCF. And thanks to your video I get to try it hands-on :D
Thank you Tiklu - and thank you for watching. 😊
I can't imagine it will be long before it is GA since all the first party components are using this technique already.
10/10. Clear and consise. Thanks!
FYI I had a an issue when trying to execute "npm start watch" and other NPM commands where it couldn't find pcf-scripts.js. This is because the folder containing my project (even several levels up in the file path) had a space character in it. So make sure your containing folders are all space-character free!
Hello Scott.
I have 2 same optionset fields on the form in my model driven app.. So I created 1 custom pcf control and tagged to both the same fields.
When I select a value on field 1, field 1's updateview is called, which changes color of the selected option.
But how to call field 2's update view also at that time?
thanks for another great video. Is your PCF course going to reopen for enrolment at any stage?
That’s the plan once it is updated for these new features!
what a great thing to just return the react component rather than rendering it, great job (y), aaaaaaaaaaand the optimization of course => in love, now what about the version of react and Fluent UI to be used ? how to maintain it, is their a way to directly point to the last one used in the environment ?
It is definitely a much more mature approach than bundling everything and creating a new virtual DOM with each control! As for versions - it looks like the only version of react available is 16.8.6 and 8.29.0 of fluent - we will have to see how this progresses over time as the platform moves on. I feel the best approach is to stick to a specific version of fluent/react in your package.json so that you can be sure you are not using anything that the platform does not provide.
Thank you ! @Scott , this looks in GA now, as it implements ComponentFramework.ReactControl when I create a new pcf, but wondering how it keeps up with the react and fluent library versions to match the platform verions
The virtual controls are still in preview (although they are very stable now and in use by many Microsoft controls including the creator kit) - learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries
The version of react and fluent must be 16.8.6 and 8.29.0 respectively at this time - as new versions are supported, I suspect we will be able to specify in the manifest file that we require a later version.
Thanks again for watching and subscribing 😊
@@ScottDurow ok make sense, thank you for your response, really appreciate
@@ScottDurow Do you know when virtual controls will be GA so I can start using them in a production environment?
Looks great!
How about debugging of this Virtual control? Will it be same using fiddler as per MS Docs?
Yes- exactly the same! Only down side is that the react library is the production one and so for React error you will need to use the react error code decoder rather than having the full description in the console log.
Awesome, thanks Scott. You are a legend!
Hi, Do we need to update the custom controls if MS updates react version in CRM, to use the new version of react that the CRM uses.How do we know that is updated and will it be compatible if we don't change?
Hi! You specify the exact version in the platform libraries section on the manifest - currently only one version is available but I am guessing there be later versions available in the future - how this will maintain backward compatibility I don’t yet know!
What is the Code Extension that you use?
Hi! I am using the Power Platform CLI for VS Code - it supports creating PCF components.
Are these available in powerapps portals?
Not at this time - since portals are not react based - I don't know if there will be a benefit there.
@@ScottDurow This is still a valid point though. That means that we might have to keep the PCFs in two versions: the one for Model-Driven and Canvas Apps (Custom Pages) and the ones for Portals
Дон