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:
Output:
Code:
<html><head>
<script src=”ClientGlobalContext.js.aspx” type=”text/javascript”></script>
<script type=”text/css”>
progress {
background-color: #f3f3f3;
height: 18px;
}
</script>
<script type=”text/javascript”>
function onload()
{
//debugger;
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;
}
</script>
<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>
</body></html>
Ask your Query : Click here
Hope it helps!
MSDYNAMICSBLOG BY DEEPESH 