Microsoft Dynamics CRM 2015 Tip: Form Manipulation Using “Business Process Flow” Control

Microsoft Dynamics CRM 2015 supports new dynamic UI features in its XRM.Page namespace. One of these is the ability to interact with the Business Process Flow controls to quickly write business validations, control the visibility of form elements, among other actions based upon the current Business Process stage.

This may be helpful for the end users to display only relevant form controls and content based upon the active stage. These actions may be invoked either by clicking on the stage, or using the Next and Previous stage buttons.

First, give the tabs meaningful titles. I personally prefer not having any space in names of tabs, sections or labels. It just makes it less prone to typos.

Here is how my form tabs appear in the form editor:

(Click on the image to view full size)

Once the tab names are in order, add a JavaScript web resource along with an Onload function, which will register handlers for onStageChange and onStageSelected events of the business process flow control.

Below is the complete JavaScript:

// Initialize an array with key names that match stage names.
// Set each key's value to another set of string array. Here you specify which tabs should be visible for current stage.
// Alternately, you can also use this script to hide only certain tabs based on current stage.

var stagetabs = new Array();
stagetabs["Summary"] = ["Summary"];
stagetabs["Administration"] = ["Administration"];
stagetabs["Finalize"] = ["Summary", "Administration", "Details", "Finalize"];

var stages = null;

// Register this function on the form's onload event.
function Form_OnLoad()
// Register events for both stage selected and changed.;;

// If there is a business process flow found on the form, get it and hide all tabs.
if ( != null)
stages =;


// Hides all the tabs for a given stage.
function StageTabsLoop(stage, index)
for (var j = 0; j < stagetabs[stage.getName()].length; j++) { Xrm.Page.ui.tabs.get(stagetabs[stage.getName()][j]).setVisible(false); } } // Fires when user clicks previous or next stage button function OnStageSelected(state) { var eventAgrs = state.getEventArgs(); var selectedStage = eventAgrs.getStage() stages.forEach(StageTabsLoop); var selectedStage = selectedStage.getName(); for (var i = 0; i < stagetabs[selectedStage].length; i++) { Xrm.Page.ui.tabs.get(stagetabs[selectedStage][i]).setVisible(true); } } // Fires when a user clicks on a stage name. function OnStageChanged() { stages.forEach(StageTabsLoop); var activeStage =; for (var i = 0; i < stagetabs[activeStage].length; i++) { Xrm.Page.ui.tabs.get(stagetabs[activeStage][i]).setVisible(true); } }

Here is how the functionality looks like by different stages. The example below shows that a user has selected the Summary stage.

Summary Stage

(Click on the image to view full size)

The below example demonstrates when a user has advanced to the Administration stage by clicking the Next Stage button.

Administration Stage

(Click on the image to view full size)

Finally, when the user moves to the Finalize stage.

Finalize Stage

(Click on the image to view full size)

Of course, there might be instances where you, the developer, would need to enforce error handling based on the specific requirements. However, this code should get you started with the basic idea.

If you have another way of achieving this user experience, please share your ideas in the comments section below. It is always good to learn from others.

By | 2017-10-17T19:06:52+00:00 September 9th, 2015|Sales & Service (CRM), Tech Tips|Comments Off on Microsoft Dynamics CRM 2015 Tip: Form Manipulation Using “Business Process Flow” Control
Alternative Text

Contributor: Ahmad Pirani

Ahmad Pirani Senior Consultant on the Delivery team. As the lead developer on CRM projects, is a highly skilled technical resource with deep development knowledge and CRM best practices.