CRM 2013-Increase width of Process Step Label in Business Process

Business Process is the new feature in CRM 2013 and user can add multiple steps on the form. However we don’t have ability to change the layout of the process bar and the step name will be wrapped automatically.

To show the step name on the form completely, we decide to increase the width of the step name label by loading the customized CSS file. Following is the screenshot of layout change, JavaScript and the CSS file.

 

Business Process Formatting

Sample Java Script used:

//***************************************************************************

// Script Type: Changing Process step Label width

//***************************************************************************

function LoadCSS() {

var head = document.getElementsByTagName(‘head’)[0];

var link = document.createElement(‘link’);

var path = Xrm.Page.context.getClientUrl() + “/WebResources/_cssfile”;

link.rel = ‘stylesheet’;

link.type = ‘text/css’;

link.href = path;

link.media = ‘all’;

head.appendChild(link);

 }

// End of the script

CSS:

/*Increase width of process step*/

.processControlContainer div.processStepLabel {

width: 230px!important;

}

.processControlContainer div.processStepLabel span {

max-width: 220px!important;

}

//end of CSS Script

______________________________________________________________

I hope you find it useful!

Author: Zhe Chen
Title: Lead Dynamics CRM Consultant @ Adisys
Email: zhechen@adisys.co