Dynamics 365 - How to add JavaScript event handlers to Business Process Flow

Dynamics 365 provides option of adding JavaScript on following Business Process Flow events:

• OnPreProcessStatusChange
• OnProcessStatusChange
• OnStageChange
• OnStageSelected

Event handlers available for each of these events are:

Source: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/formcontext-data-process

Example: 

Following example will show how to show / hide form tabs on change of business process flow stage in 3 simple steps.

Step1: 

On form load event, add the event handler JavaScript: 

function onLoad(executionContext)

{

var formContext = executionContext.getFormContext();

var activeStageName = "";

var activeProcess = formContext.data.process;

if(activeProcess != null)

{

formContext.data.process.addOnStageChange(ShowHideRelevantTabs);

}

}

Step2: 

Add the ShowHideRelevantTabs function in JavaScript:

function ShowHideRelevantTabs(executionContext)

{

var formContext = executionContext.getFormContext();

var activeStageName = GetProcessStage(formContext);

switch(activeStageName)

{

case "Stage1":

formContext.ui.tabs.get("tab_1").setVisible(true);

formContext.ui.tabs.get("tab_2").setVisible(false);

formContext.ui.tabs.get("tab_3").setVisible(false);

formContext.ui.tabs.get("tab_1").setFocus(true);

break;

case "Stage2":

formContext.ui.tabs.get("tab_1").setVisible(true);

formContext.ui.tabs.get("tab_2").setVisible(true);

formContext.ui.tabs.get("tab_3").setVisible(false);

formContext.ui.tabs.get("tab_2").setFocus(true);

break;

case "Stage3":

formContext.ui.tabs.get("tab_1").setVisible(true);

formContext.ui.tabs.get("tab_2").setVisible(true);

formContext.ui.tabs.get("tab_3").setVisible(true);

formContext.ui.tabs.get("tab_3").setFocus(true);

break;

default:

formContext.ui.tabs.get("tab_1").setVisible(true);

formContext.ui.tabs.get("tab_2").setVisible(true);

formContext.ui.tabs.get("tab_3").setVisible(true);

}

}

Step3: 

Upload JavaScript on entity's Onload event. Section 2 and 3 in following article provide step by step approach on loading JavaScript in Dynamics 365 entities: 

https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/walkthrough-write-your-first-client-script 

Good Luck 👍