Using Business Process Flows in a Canvas App
Business process flows (BPF) provide a guide for people to get work done. They provide a streamlined user experience that leads people through the processes their organization has defined for interactions that need to be advanced to a conclusion of some kind. If you haven’t already played with the BPF capabilities available within the Power Platform, you can get started here: https://docs.microsoft.com/en-us/power-automate/business-process-flows-overview.
Our first example is an Employee on-boarding business process. We won’t go through the process of building the business flow itself but if you are new to BPF, you can check out Jon Levesque’s video here (https://www.youtube.com/watch?v=FEqaRV1gSx4). In his video, you can see how powerful the BPF designer can be to quickly put in place complex processes along with conditional branches. The resulting UI is generated for you and looks like the following:
The above experience integrates well with Model-driven-Apps and is fully responsive across different form factors. There are however scenarios where Canvas app can take this experience to the next level and enhance the out-of-the-box functionality of BPF.
For our on-boarding example, a possible look and feel for a canvas app could look like the following:
Business Process Flow Common Data Service APIs
To build above experience, we can use existing CDS APIs that exposes various functionalities of BPF. An overview of available BPF related APIs can be found here.
As an example, consider the BPF timeline. Read more h
We call a specific CDS API wrapped in Power Automate Flow to extract the stages of a business process flow:
https://<insert_org_url>.crm.dynamics.com/api/data/v9.1/RetrieveActivePath(ProcessInstanceId=<instance_guid>)
Similarly, we call other CDS APIs to retrieve the current active stage, the status of the process, the list of fields and their values which will allow us to render each stage with the corresponding UI.
The use of Power Automate allows us to further process the CDS API response that is not always straightforward to do client-side within Power Apps. An example of that is retrieving the field values of the BPF entity. We use Power Automate to return a list of key/value pair representing the field name and its value. You can take a look at the GetEntityFieldsValue Flow to see this in action.
Here is a list of CDS APIs exposed in the customer connector used in our Canvas-based BPF implementation.
Power Automate has proven very useful in shaping CDS API responses to simply work done within the Power Apps app. This could have been done within a custom WebAPI or CDS actions but to keep this solution purely low-code Power Automate was used. Here is the list of operations required:
BPF Component
The BPF component is generic in its implementation and allows you to use any business process flow. The component has a properties that allow you to further customize it.
Input Properties
| PROPERTY | DESCRIPTION |
|---|---|
| BPF Name | The name of the Business Process Flow to be rendered. |
| BPF Instance ID | GUID representing the BPF Instance. |
| Timeline Visible | Show or Hide the BPF Timeline. |
| Wrap Count | Number of items shown per row. |
| Back Button Visible | Show/Hide back button. |
| Allow Previous Stage Editing | When turned off, users can’t edit fields in previous stages. |
| Allow Reactivation | When turned on, users can re-activate a completed process. |
| Show Stage Information | Show/Hide Stage information. |
| Color | Accent Color for the component. |
| Spinner Color Hex | Color for the loading Spinner. |
Output properties
| PROPERTY | DESCRIPTION |
|---|---|
| Active Stage | The active stage of the business process flow. |
| Selected Stage | The selected stage when users go back/next. |
| Stages | The active stages for this business process flow. |
The other example included in the downloadable packages below is the Room Booking process. We are using the same component to build a desktop layout view. We are making use of the output property “Stages” to build a custom timeline while hiding the default experience for the timeline.
As you can see, with can easily adapt the component, style it to different needs and branding.
Custom implementations
Using the existing CDS APIs, you can build very custom experiences that combine other technologies. Consider the following real world example. Here, we have our regular BPF timeline representing different stages a project goes through. For each stage, we have a list of users used to create and send an Approval request.
Once everyone on the list approves the project at that stage, a flow is kicked off that will setup the next approval requests and advance to the next stage.
Deployment
- Download Solution file here
- Download BPF CDS API Custom Connector swagger file here & Icon here
- Download the Room Booking App here
- Download the Employee Onboarding App here
Follow the deployment steps here:
Supported Features & Limitations
The BPF component supports primitives such as integer, string, boolean and options sets. It also supports BPF conditional branching (https://docs.microsoft.com/en-us/dynamics365/customerengagement/on-premises/customize/enhance-business-process-flows-branching). At the moment, the component does not support look up fields, flows and workflows.
Disclaimer
The assets / samples provided in this blog are not supported by the Power Platform product team (which is true for all tools available in this GitHub repo). We are a small team in Engineering who built this community sample solution for anyone to use and modify as their own, made available to customers on an as-is basis via an MIT license. It’s possible you might run into some issues, such as installation problems, authorization issues, or bugs in the apps and flows within the solution. If you encounter an issue, please raise it in the issues tab of the GitHub repo.
