My Adventures with CRM 2013 and HTML5: Progress bar control

Recently, I was seeing the newer HTML 5 tags which have been coming through, I was looking for ones which are accepted across most browsers which CRM 2013 supports. One of the controls I want to discuss here is Progress bar control. There are many times we require progress bar control depending on conditions on Forms, Dashboards, etc. Here is one which one of my old company buddy was been asked by for client. It is totally supported and will work for newer browsers which support HTML 5 tags.

Scenario: Show progress bar based on Business stages completed in Business Process.

Implementation: Implement an HTML web resource for Business process progress:





<script src=”ClientGlobalContext.js.aspx” type=”text/javascript”></script>

<script type=”text/css”>

progress {

background-color: #f3f3f3;

height: 18px;



<script type=”text/javascript”>

function onload()



var stageid = window.parent.Xrm.Page.getAttribute(‘stageid’).getValue();

var percent;

if(stageid == “f99b4d48-7aad-456e-864a-8e7d543f7495”)


percent = “25”;


else if (stageid == “”) //Stage 2


percent = “50”;


else if (stageid == “”) //Stage 3


percent =”75″;


else if (stageid == “”) //Stage 4


percent = “100”;


document.getElementById(‘p’).value = percent;



<meta charset=”utf-8″></head>

<body onload=”onload()”>

<p>Business Process Progress:</p>

<progress id=”p” value=”0″ max=”100″><span>0</span>% played</progress>


Ask your Query : Click here

Hope it helps!


Leave a Reply

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

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

Facebook photo

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

Connecting to %s