Kids, don't try this at home!

Dynamics CRM 4 - Progress Bar

I was browsing the dynamics forums the other day and saw a post asking about the progress bar in CRM, we created one awhile back, here it is for anyone else that's looking for something similar.

Click here to download a working sample.



What you'll need

• jQuery 1.3.2
• step.gif
• statusbar.gif - You can get this from the /_imgs/ folder in CRM

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' });
    }
}

Example

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>
        &nbsp;</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>