The final part about “Task groups”, I promise! In this post I want to show you how to add Power Apps Component Framework (PCF) to a Business Process Flow field. This feature will finish my “Task Group” concept. The final step to guide our user to enter the correct task. Instead of showing a disabled “Yes / No” field inside we want to show a Checkmark Control. Adding a Code Component in BPF field is a feature that kind of flew under my radar and now it’s relatively easy to do so!
This blog is part of a series about guiding users and teams through their work. This post is part about an advanced scenario called Task Groups. Click here for an overview of all related post regarding Task Groups. I also added a sample solution you can import in your own development environment so you can see the entire concept in action!
Keeping people in their flow of work by utilizing Asynchronous work or asynchronous processes is one of the key benefits for Business Process Flows. I have written down my thoughts on this subject here. Find out what asynchronous work is, how Business Process Flow can help and more advanced scenario’s.
Guiding the user is the entire reason we use the “Task Group” concept. However changing a Business Process Flow field to read-only can be confusing. A user could get frustrated as he wants to set the fields to “Yes” to progress the BPF. As you can see in the image below it isn’t as clear as it could be. Luckily we can change how this field looks by changing the component!
Changing the solution XML?!
The way to do so provided by Microsoft is quite hard, or should I say impossible? It requires you to export a solution containing your BPF, the component configuration on a different form and manually editing the solution XML. I’ve been recommending colleagues to never edit the solution XML. This could do more harm then good. And this is supposed to be the exception?
I don’t think so! And luckily Clément Olivier and Tanguy TOUZARD agrees. They build a great tool to configure your BPF field components in a few steps. You can use this tool from within the XRM Toolbox. Your swiss army knife to make administration, customization or configuration tasks easier related to Dataverse.
What Code Component do we want for our BPF?
So the first thing we need to do, is to find a control we actually want to use! First let’s check what default control we have available to us for a “Yes / No” field. A toggle control is available to us out of the box. It brings more flavor to any form and it too would bring more flavor to a BPF stage. However in our scenario the “Yes / No” field is merely an indicator if all our tasks are finished. And as our control is read-only it as greyed-out by design. Which, quite frankly, looks just silly.
For inspiration on controls we then turn to the PCF Gallery. The PCF Gallery is a showcase of components made by the community. It has a lot of gems which you can immediately use in your own environment. However a word of caution is also needed. Some components are just showcasing what’s possible and others could have outdated JavaScript libraries in them which could be a security risk. Ask your local favorite Power Apps developer to do a quick review on a component if you want to use one in production.
Sadly at the time of writing this blog there was no control to my liking. This means we are out of options and we have to develop my own. I’ve created a “Checkmark Control” to use specifically for this scenario. It will show a green checkmark 
for the “Yes” value. And it will show a red circle with a white cross 
for the “No” value. Feel free to use this in your own solution. I made this available on the PCF Gallery. And here is a direct link to the managed solution on GitHub.
How to add our code component using PCF 2 BPF
The steps involved to change a component are fairly easy. First we need to make sure that the component we want to use is available in our environment. For my Checkmark Control for example, you need to import the solution. Second is to load the Xrm ToolBox, connect to your environment and load the PCF 2 BPF tool.
Within the tool we then click on Load BPF Entities. This will give us a list of Business Process Flow records. When we choose the BPF we want we get all the stages and fields as seen below.
You can then click on the field where you want to change the component. Just as in the Form editor you choose for which Form Factor you want to change the component by pressing the Plus button. You can select the component and edit the properties. The properties might be the hardest part of configuring the component. Hopefully the control you choose has some documentation available to help you with that. My Checkmark control only needs to be bound to the field we selected, so that’s not too hard 😉. Do not forget to press Add Control / Apply Changes as else your change won’t take effect. Then finish by pressing Update and Publish. The gif below showcases the process in action.
And if everything went as expected, you can see the result with a refresh of the page!
Code component in BPF is a great addition
Adding a code / custom component to the Business Process Flow stage brings a lot of value. We are all visual beings and are able to digest pictures faster then words. Using the Xrm ToolBox tool PCF 2BFG is however absolutely necessary. I would not advise you to do this by editing the solution XML. So thanks again Clément and Tanguy!
This brings an end to my “Task Group” concept. Not only did we tidy up the Business Process Flow stage in blog 1. We also guided the user by adding required field requirements based on the Stage in blog 2. For the finishing touch we just added a code component to the “Yes / No” fields. I am not done exploring new Business Process Flow capabilities. Next up I want to explore calling Power Automate Cloud flows, so see you for the next one!
One comment