How to Make a Business Process Flow Driven Form in Dynamics 365

John Towgood, 28 November 2017

Using Business Process Flow is a good way of walking users through a process step by step. Each Stage contains steps which are just fields necessary to complete the stage. But there are times where displaying only fields for each stage doesn’t offer users clear instructions on what information is necessary to complete the stage.


So, the solution is to divide all the form controls necessary to aid users in completing a stage into tabs/sections and display these when the user has changed or selected a stage. This can be achieved by using JavaScript to apply display logic to tabs/sections base on the addOnStageChange and addOnStageSelected events of the Business Process Flow.


To demonstrate this, I will use the purchase process which we are all familiar with on most e-Commence websites when purchasing goods and services.
1.    Define the stages of the Process


Details -> Order -> Shipping Details –> Completed


This indicates that four tabs would need to be created on the Form

 
2.    Place sections, fields and sub-grid controls in each tab which is specific for a stage

image

3.    OnLoad of the Form firstly hide all tabs then setup the StageChange and StageSelected events of the Business Process Flow to execute the stageSelected function.

image
StageChange event happens when the user clicks on the “Next Stage” or “Back Arrow” button

image
StageSelected event happens when the user clicks on a Stage
  image

image

4.    User starts off with the Detail Stage, so the Details Tab is shown
image
  image
5.    User clicks the Next Stage to move to the Order Stage, so the Order Tab is shown

image

image

In conclusion, grouping fields and controls into tabs and sections and implementing JavaScript to display the tabs and sections results in a Form driven by the Business Process Flow.