What is PCF?
If you are building Model Driven Apps, you would have realised by now that Unified Interface is the future. Microsoft has made huge investments in this area to ensure that you have an optimal experience regardless of the device or form factor. Unified Interface is composed of several components/controls that help you to visualise and interact with the data.
If you wanted to swap out the control or build a new one that is better than what comes out this box, the only way you could do this earlier was to build a custom webresource and embed it into an IFrame. Using IFrame is clunky, and you had to handle all the complexities of building a responsive interface. IFrame also cannot be displayed on a view, only on a form.
But with the arrival of PowerApps Component Framework, you can build custom components/controls that can be used in fields or view fairly quickly. PCF entered public preview around April, 2019. The are three things that you will be using while developing a custom components/control: PCF, the framework that can be used to build the components, a CLI (similar to yeoman, if you are from node world) that is used to scaffold, build & deploy the control and a test harness to assist you during development.
What do you need to know to build components/controls using PCF
- TypeScript (preferable) or JavaScript
- NodeJS
- Ability to run commands from commandline
- If you don’t like to live in the commandline, download XrmToolBox tool called PCF Custom Control Builder by Danish
- React (preferable)
- Office UI Fabric (preferable)
- Edge Dev Tools or Chrome Dev Tools (while build/debug)
- Fiddler (while build/debug)
Where do I go to get inspired or assess the capabilities
There are couple of places:
In this post I will share a control that I built using PCF that displays the view as a set of cards. Here is how it looks on the contact grid when you choose the Full layout.
You can also display the result in the compact layout.
Clicking on the card takes you to the record, and you can load more records, by clicking on the “Load more” button on the command bar.
In order to install the control, you would first need to install the managed solution by downloading Contact.Card.Component.zip from https://github.com/rajyraman/Office-UI-Fabric-Card/releases
After you have downloaded and installed the managed solution, you can add the PCF component/control to an existing view or new view.
As you can see above, I am configuring the view to show the results using “Cards” control, and not “Read only Grid” control. After this you need to configure each property to the correct field on the entity, that you would like be shown on the card.
Each property on this control maps to the card as below
How do you get the image to display on the custom control?
If you don’t need image on the card, you can skip this step. This is the tricky bit. There is a field on each entity that is capable of storing a image. The name of the field is entityimage. This screenshot should jot your memory.
You cannot however, add the entityimage field to a view, as this field is not visible in the View Builder: both classic experience and maker experience. But, entityimage is a valid field, so you can add this field using the awesome tool called “View Designer” in XrmToolBox.
This allows you to modify both the FetchXML and LayoutXML of the view. Using this tool you can add the “entityimage” field.
Once you do this, you can see the entityimage field on the view in the classic designer. If you try to open the same view in the modern designer it will fail.
After save and publish, you should now be able to use the custom control on the view that it is bound to. You can also use a custom control to display results on the Quick Find as well, using similar update to FetchXML and LayoutXML, but Quick Find does not seem to be supporting entityimage attribute at the moment.
TIL: It is possible to render QuickFind results using PCF by using API to modify SavedQuery’s LayoutXml. Not sure why this is not enabled on the UI yet.
#PowerApps #PCF #MsDyn365 cc @98codes pic.twitter.com/CQ3mgV0dBC
— Natraj Yegnaraman (@RajYRaman) August 14, 2019
I hope this is an useful control that everyone can use.
Further reading:
- Using TypeScript with modern React (YouTube)
- Office UI Fabric Controls
- Office UI Fabric CodeSandBox
- What are custom components (docs.microsoft.com)
- PCF Forum
People to Follow for PCF ❤
How can we render QuickFind results using PCF by using API to modify SavedQuery’s LayoutXml ?
Is it possible to render PCF control for QuickFind results of view?
It is using the XrmToolBox view designer as well. You can copy over the LayoutXml of the view with the PCF component, if the fetchxml columns match.