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:

Output:

clip_image002

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!

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s