Prettify your BPF by adding a Code Component

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!

I have previously blogged about replacing Process Dialogs with embedded canvas apps. We are now 2,5 years further so I would like to present my learnings. There are a ton of new features added to the platform which I would also like to explore. This blog will be part of a series and as I write more post on this I will add them here.

  1. Task Groups help you guide work in Business Process Flow
  2. Set form fields required based on Business Process Flow Stage
  3. Prettify your Business Process Flow by adding a Code Component

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!

BPF stage before we start

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 XML solution. 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 agrees. He 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 simply 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.

Shows the Business Process Flow Stage with the out of the box toggle component.
BPF stage with toggle control

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 showingcasing 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 Green checkmark for the “Yes” value. And it will show a red circle with a white cross Red circle with a white cross in the middle 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.

The PCF 2 BPF tool showing the screen where we are connected to our environment and selected our Business Process Flow.  You can select the stages and fields to change the component type.
PCF 2 BPF tool after loading

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.

Animated gif of the process how to change a single Yes / No field to my newly created Checkmark Control.
Process of changing component in PCF 2 BPF tool

And if everything went as expected, you can see the result with a refresh of the page!

Shows the Business Process Flow Stage with the custom PCF component we just updated.
BPF stage after we updated the component

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 Clement!

Shows a recording of how the Business Process Flow behaves with the new component.  After we entered all required information the icon changes from a red cross to a green checkmark.
BPF stage with custom controls in action

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 requirements by adding required field 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!

The post Prettify your BPF by adding a Code Component appeared first on Power Addict Ben.

.

Leave a Comment