As promised, I am posting a series of blogs related to the session I presented at eXtremeCRM 2014 on using external JScript resources with CRM. The first topic I want to tackle, is using the Bootstrap progress bar with percentage in CRM.
The business concept revolves around the fact that most sales people are looking for a quick way to identify what completion percentage each lead is at. While now you can achieve something similar using the Business Process Flows, the addition of the fields to each step, and the whole presentation in some cases might be taking too much real estate. Furthermore, with the progress bar you can present a more granular progression that you would normally do with Business Process Flows.
So, first off, let’s take a look and see what we are about to use. You can start by having a look at the official Bootstrap page available HERE. Bootstrap is a very well put together HTML, CSS and JScript framework. The beauty is in it’s responsiveness, as well as the rich set of controls available. Not all will work directly within CRM, so if you plan to use it, try, test, re-try, re-test.
For the purpose of this example, we want to use THIS.
First off, we’ll be working on Leads. In your solution, open the Lead entity. Create an option set with the predefined progress values you want to make available. You can select a few, or up to 100 if you want to go in 1 by 1 increments (and script until your fingers fall off).
Once we have this option set configured, add it to your page. You can put it in a hidden section if you don’t want it to be visible to all users. If you leave it visible, make sure users don’t have the ability to change the value, we want to do that programmatically. Default it to 0 and make it a required field.
Next step, write a script to re-calculate the completion percentage. This script will update the option set value as required, based on the business rules defined. Set it to run on the form OnLoad and on each of the form fields involved in the calculation on OnChange. This script will update the option set value as required.
So, now we have the option set, and the calculated value. With this, let’s see how we can graphically represent the completion rate on a Lead form.
First off, in order to use Bootstrap, we need to load the proper resources into our CRM environment. If you open up the Bootstrap resources, you will find three folders: css, fonts and js. We do not necessarily need the fonts for this example, but we need to pick the following resources to load:
From the js folder, load as a web resource bootstrap.min.js
From the css folder, load as a web resource bootstrap.min.css and bootstrap-theme.min.css
We load the minimized files as they are lighter and will load faster. If you want to make modifications in these files, load the non-minimized files, as they are much easier to read.
Now, create a new HTML web resource.
Add the following HMTL:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<!–
<script language=”javascript” type=”text/javascript” src=”http://<servername>/<orgname>/WebResources/new_jquery_1.11.0.min”></script>
–>
<link href=”http://<servername>/<orgname>/WebResources/new_jquery_1.11.0.min” rel=”stylesheet” type=”text/css”>
<link href=”http://<servername>/<orgname>/WebResources/new_bootstrapcss” rel=”stylesheet” type=”text/css”>
<link href=”http://<servername>/<orgname>/WebResources/new_bootstrap_theme” rel=”stylesheet” type=”text/css”>
<script language=”javascript” type=”text/javascript” src=”http://<servername>/<orgname>/WebResources/new_bootstrapjs”></script>
</head>
<body>
<script type=”text/javascript”>
var _pctValue = window.parent.Xrm.Page.data.entity.attributes.get(“new_percentagecomplete”).getText();
var _html = “<div class=’progress’>”;
_html += “<div class=’progress-bar’ role=’progressbar’ aria-valuenow='” + _pctValue + “‘ aria-valuemin=’0′ aria-valuemax=’100′ style=’width: ” + _pctValue + “%;’>”;
_html += _pctValue + “%”;
_html += “</div>”;
_html += “</div>”;
document.write(_html);
</script>
</body>
</html>
Replace <servername> with the name of the server, and <orgname> with the name of the organization.
Basically, we are referencing the location of the web resources used, including jQuery. For simplicity I am hard-coding the URLs.
Next, in the body script I am retrieving the value of the option set we have created earlier, and store the value in _pctValue.
With this value read from the record form, we can build the standard representation of the progress bar control, and pass in the percentage value where needed.
This script basically executes when the web resource html page loads, goes to the parent form, which is the actual record, and reads the populated option set value.
With this done, load the html web resource and publish it.
Now, on the Lead form, add a new iFrame, and point it to the html web resource we just created. Save and publish.
At this point, when the Lead form loads, we should be able to see the progress bar. But it does not refresh when we change the option set value.
Create a new jscript web resource, and add the following function:
function RefreshIFrame() {
// bootstrap iframe
var iFrameBootstrap = “http://crm2013dev/extremecrm/WebResources/new_bootstrap”;
Xrm.Page.getControl(“WebResource_bootstrap”).setSrc(iFrameBootstrap);
}
This function defines the action to be performed when the value of our option set changes. We are refreshing the iFrame, passing the URL to the same HTML web resource. This triggers the HMTL script to re-execute and redraw the progress bar.
On the Lead form, on the OnChange of the option set, add RefreshIFrame.
With all this in place, now we should have a fully functional Lead form, with a progress bar that updates every time the total completion percentage changes. And it should look like this:
That’s it. Now sit back, relax, and accept praises from the happy sales people.
Enjoy!
thatcrm.com 