Dynamics 365 : Custom chart with HTML and JS 

In this article, I will explain how to customize chart map in a classic mode such as CRM2011, CRM Onpremises v8.2, ... then how to adapt it for D365 Online and Unified Client Interface which I have face in real project. Of course we could use Power BI, but this article will give you another option by using custom code without dependencies with other BI services. 

1. How to customize a chart:

In this section, we will go throw steps to create own custom chart. This process is quite simple and does not require much coding base.

• Create basic HTML page: here are an example of very basic HTML page will be display in the chart

  
    
  

  

  

  Example web resource for the Accounts grid

• Add HTML page to CRM : there are various way to add this HTML page to server but I think the simplest way is: go to solution and create a webresource then browse to the HTML you already created:
• Create a chart xml: use the following format

  
    account
    Example Chart
    dd_chartMap.htm
  

  Attribute definition:
  - primaryentitytypecode: the entity which the chart will be display on
  - name: name of the chart
  - webresourcename: the name of webresource that will be load when the chart is rendered. This value should set to the created webresource above.
  Then go to solution -> Account -> Chart -> More Actions -> Import Chart

  

Here is the result after we import chart successfully. Since this chart is build from a webresource (HTML page) so we could use any javascript in this HTML page to build custom chart as you want.

2. How to create Chart map:

How does a web resource know which chart is being rendered?
 

If you have worked with web resources placed on forms/dashboards, you would be aware of the data query-string parameter. This parameter essentially lets the same web resource render differently in different contexts – you specify the value of this parameter (if required) at the time of adding the web resource to a particular form/dashboard.

For web resources rendering as charts, we do not let you explicitly specify a value for this parameter. Instead this parameter is always set to (a URL-encoded form of) the following format:

visid=&vistype=&viewid=&viewtype=

Therefore, we can get the ID and type of the chart being rendered by parsing the data query-string parameter.

Web resource for chart map: here is an example which you could find it easy on internet

    Accounts on Bing Maps
    
    
    
 
    


    

• In this snippet code, there are
  - loadMap: handle logic for event onload of webresource
  - loadChartFromCrm: Retrieve DataDescription and PresentationDescription of the current chart from the CRM 2011 oData end-point. Note the double-call to a function that parses a query-string.
   

  var parameters = getParametersFromQuery(window.location.search.substring(1)); 
  parameters = getParametersFromQuery(parameters["data"]);

  Because when the chart is rendered, all information of chart will be encode in URL so this function will parse the URL and get parameter inside.

• getMap: Use Bing Map APIs to load a map with the center and zoom-factor specified in presentation-description.
• loadAccountsFromCrm: Retrieve account records from CRM 2011 oData end-point, filtered by the country specified in data-description.
• plotAccountLocations: Add push-pins on the map to represent each of the account records retrieved above.

Create a new chart that use this web resource

3. How to adapt chart map for D365 Online and Unified Client Interface (UCI):

I have faced with this issue when we want to upgrade version of CRM to later version like v9.0 and change to use UCI and it breaks the feature because in the UCI, when the chart is render, the parameters of the chart has change when it's renderd. 

I did my test on a v9.0 on premise but it always works for Online version! 

This is an example of url where the chart is render in UCI:

http://testingOrg:5555/Test/main.aspx?appid=1237ef-eab5-ea11-9123-005056bc865b&pagetype=entitylist&etn=account

As you could see, All of informations which we could get from URL are: the pagetype and entity name.

So basically we will not have enough parameter as the chart want in the UCI mode. They are not supported in the UCI mode. However, if you really want this feature in UCI, we could achieve this goal by using an unsupported way.

Let's have look at which paramters will be encode in classic mode:

visid=&vistype=&viewid=&viewtype=

and the piece of source that consume paramters:

        function loadChartFromCrm(callback) {
            var parameters = getParametersFromQuery(window.location.search.substring(1));
            parameters = getParametersFromQuery(parameters["data"]);
 
            var id = parameters["visid"].substr(1, 36);
            var type = parameters["vistype"];
            var url = (type == "1111" ? "/SavedQueryVisualizationSet" : "/UserQueryVisualizationSet")
                + "(guid'" + id + "')?$select=DataDescription,PresentationDescription";
            retrieveFromCrmRestApi(url, callback);
        }

So the source code needs 2 parameters from URL: visid and vistype (name of entity).

We could easily get vistype from URL in UCI which contains: &etn=account. So the problem remaining is how to visid?

Let's have a look at DOM:

And I found that the first iframe id will contain the visid of chart. Finally, I could get the id of chart (visid) by following code:

                    var iframId = parent.document.getElementsByTagName("IFRAME")[0].id;
                    visid= "{" + iframId.replace('_dd_chartMap.htm', '') + "}";

The result in UCI:

Summarize:

This is unsupported way to overcome the issue related chart map in UCI due to the change of URL. I don't recommend to do this unless you have no option to go.

If you have any solutions, please feel free to share and I'm very pleasure. This topic has come when I work in real project.

Dynamics 365 : Custom chart with HTML and JS