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

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

Advertisements

7 thoughts on “CRM 2013-Increase width of Process Step Label in Business Process

  1. This code worked great, except for one little thing. If you only have three steps in a process the field to enter data shows up below the label instead of to the left of it. It is an aesthetic issue not a workflow or data issue. I will tweak the code a bit to see if I can adjust it.

  2. Hi Zhe,

    Thank you for posting this article. I am new to Dynamics CRM 2013 and trying to make this script run on my CRM site. Would you be kind enough to show how can I add the JavaScript and CSS to my Opportunity Form?

    Thanks!
    Irfan

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s