Business process flows or BPF’s provide a streamlined user experience to lead people through processes that their organization has defined.

Below is how a BPF renders right out of the box:

We also get options to either pin this stage or to close it using the controls highlighted above. Pinning the stage simply docks it to the right of the record like so:

The customer that we designed this BPF for wanted the BPF stages to be docked by default. CRM out of the box displays BPF stages in a collapsed state. This can be achieved using the Dynamics 365 client API.

Using client API to expand/collapse BPF stages:

We will need to use the setDisplayState client API for this. The API supports three states i.e “expanded”, “collapsed” and “floating”. Please note that floating is not supported in the web client.

I used the expanded state to achieve my customers requirement. The following snippet was added to the form on load event like so:

formContext.ui.process.setDisplayState("expanded");

Just to be make it foolproof, I added code to expand the BPF only when the process has been rendered on the form. The complete snippet looked like so:

if (formContext.data.process) {
   let activeProcess = formContext.data.process.getActiveProcess();
   if (activeProcess && activeProcess.isRendered()) {
        formContext.ui.process.setDisplayState("expanded");
   }
}

Below is how the BPF renders for each of the three states:

Expanded:

Collapsed: