Progress Bar in Dynamics CRM 4.0
To create a progress bar in Dynamics CRM 4.0 like the one below
You need the following
1. jQuery 1.3.2
2.step.gif 
3.statusbar.gif - You can get this from the /_imgs/ folder in CRM
For step.gif, right click the .gif file and save it on your system.
crmprogressbar.js
function crmProgressBar(id) {
this.bar = $("#" + id);
this.bar.css({
'height': '23px',
'width': '357px',
'background': 'transparent url(img/statusbar.gif) no-repeat'
});
this.bar.find("div").css({
'height': '19px',
'width': '1px',
'background': 'transparent url(img/step.gif) repeat-x',
'position': 'relative',
'top': '2px',
'left': '3px'
});
this.step = function(percentage) {
var width = parseInt((percentage / 100) * 351);
if (width > 351) { width = 351; }
this.bar.find("div").css({ 'width': width + 'px' });
}
}
To implement follow the steps below.this.bar = $("#" + id);
this.bar.css({
'height': '23px',
'width': '357px',
'background': 'transparent url(img/statusbar.gif) no-repeat'
});
this.bar.find("div").css({
'height': '19px',
'width': '1px',
'background': 'transparent url(img/step.gif) repeat-x',
'position': 'relative',
'top': '2px',
'left': '3px'
});
this.step = function(percentage) {
var width = parseInt((percentage / 100) * 351);
if (width > 351) { width = 351; }
this.bar.find("div").css({ 'width': width + 'px' });
}
}
1.Create a new html file
2.Create a new javascript file and copy the above code into it
3.Include a reference to the jQuery javascript library
4.Include a reference to the javascript in your html file
5.Add a "div" tag to the html file and give it an "id"
6.Add another "div" tag inside the "div" you created in step 4. and put a blank space
7.To initialize the progress bar; create a new variable to hold the progress bar, then create a new instance of the progress bar by specifying the "id" of the div you created in step 4.
eg: var progressBar1 = new crmProgressBar("id-of-div");
8.To step/increment the progress bar use the step() instance method
eg: progressBar1.step(10); // will increment to 10%;
<div id="p1">
<div>
</div>
</div>
<script type="text/javascript">
var i = 5;
var cpb = null;
$(document).ready(function() {
cpb = new crmProgressBar("p1");
increment();
});
function increment() {
if (i <= 100) {
i += 5;
cpb.step(i);
setTimeout(increment, 1000);
}
}
</script>
Labels: crm, crm 4.0, dynamics, javascript, microsoft, progress bar
Post a Comment