Keeping in line with a previous article about using the Bootstrap library with Dynamics CRM, in this article we will look at using another JScript library.
This mini-series of articles relates to the topic I’ve presented at eXtreme CRM this year. It all revolves around visual presentation at the record level. While Dashboards are nice, humans are “visual animals”, and as such, presenting information visually at the record level is not only eye-candy, but also can make a user of the system more productive, and more eager to adopt a new tool.
The previous articles in this mini-series are:
HTML Web Resource in Dynamics CRM
HTML Web Resource in Dynamics CRM [2]
We’re going to be looking now at Easy Pie Chart. There are two reasons I like this library. First off, it is very light. Second, I like the animation. Makes it more “look here first” like. I’ll be using it as is, with no visual customizations, but if you want, feel free to tinker with the CSS.
So, just like when using Bootstrap, we need to load our libraries. With Easy Pie Chart, it’s actually pretty simple. All we have is a stylesheet (CSS) and a JS library. You should use the minimized library. JQuery should also be loaded as a web resource.
Once we have all these, we can add the HTML web resource and add the following code:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″/>
<meta name=”viewport” content=”width=device-width”/>
<link rel=”stylesheet” href=”/extremecrm/WebResources/new_piechartstyle”/’>http://<srvname>/extremecrm/WebResources/new_piechartstyle”/>
</head>
<body>
<span id=”myChart” class=”chart” data-percent=”86″>
<span class=”percent”></span>
</span>
<script src=/extremecrm/WebResources/new_easypiechart.min”>http://<srvname>/extremecrm/WebResources/new_easypiechart.min></script>
<script>
var _pctValue = window.parent.Xrm.Page.data.entity.attributes.get(“new_percentagecomplete”).getText();
document.getElementById(“myChart”).setAttribute(“data-percent”, _pctValue);
// debugger;
document.addEventListener(‘DOMContentLoaded’, function() {
var chart = window.chart = new EasyPieChart(document.querySelector(‘span’), {
easing: ‘easeOutElastic’,
delay: 3000,
onStep: function(from, to, percent) {
this.el.children[0].innerHTML = Math.round(percent);
}
});
});
</script>
</body>
</html>
Same as in the Bootstrap example, we pick the percentage value from a drop-down on the entity form. We need to trigger the web resource reload on control value changed and on the initial page load.
The function to trigger the iframe refresh on control value change is:
function RefreshIFrame() {
// gauge iframe
var iFrameURL = “/extremecrm/WebResources/new_piechart”;’>http://<srvname>/extremecrm/WebResources/new_piechart”;
Xrm.Page.getControl(“WebResource_easyPieChart”).setSrc(iFrameURL);
// debugger;
}
And the end results should look something like this on a Lead record:
If you like it, give a thumbs-up to the library author.
Enjoy!
thatcrm.com 