Tuesday, 25 July 2017

Customizing Dynamics CRM Charts using Chart XML


Customizing Dynamics CRM Charts using Chart XML

Description:

In this example we explain that how to bind Bing Map with list of country in dynamic CRM Chart. Or how to customizing Dynamic CRM Charts using XML or how to bind Bing Map in Charts of the Dynamic CRM using JavaScript and XML.

Here we demonstrate how to customize the charts of the Dynamic CRM by changing in the XML of the charts.

Here in this example showing Bing Map chart with help of the web resource to show the accounts addresses in the charts with Bing map.



Simply call the below web resource
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>Accounts on Bing Maps</title>

    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
     

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>



    <script type="text/javascript">

        var map;



        // Function to construct key-value pairs from a query string.

        function getParametersFromQuery(query) {

            var parametersDictionary = new Array();

            var parameters = query.split('&');

            for (var i = 0; i < parameters.length; i++) {

                var keyAndValue = parameters[i].split('=');

                parametersDictionary[unescape(keyAndValue[0])] = unescape(keyAndValue[1]);

            }

            return parametersDictionary;

        }



        // Function that makes a GET request to the CRM REST end-point, and invokes a callback with the results.

        function retrieveFromCrmRestApi(url, callback) {
                  debugger;

            $.ajax({

                type: "GET",

                url: GetGlobalContext().getClientUrl() + "/XRMServices/2011/OrganizationData.svc" + url,

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    callback(data.d);
                                                     

                }

            });

        }



        // Function that retrieves the corresponding CRM chart, and invokes the callback when successful.

        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";
                                          alert(url);

            retrieveFromCrmRestApi(url, callback);

        }



        var locations = new Array();

        function plotAccountLocations(accounts) {
debugger;
            if (accounts.length > 0) {

                var account = accounts.pop();

                var address = account.Address1_City + ', ' + account.Address1_Country;

                map.Find(null, address, null, null, 0, 1, false, false, false, false,

                    function (shapeLayer, results, places, moreResults, error) {

                        if (null != places && places.length > 0) {

                            var place = places[0];

                            var newShape = new VEShape(VEShapeType.Pushpin, place.LatLong);

                            newShape.SetTitle(account.Name);

                            newShape.SetDescription(address);

                            locations.push(newShape);

                        }

                        // When we have found (or not found) the current account,

                        // recursively call the same function to find the next one.

                        plotAccountLocations(accounts);

                    });

            }

            else {

                var shapeLayer = new VEShapeLayer();

                map.AddShapeLayer(shapeLayer);

                shapeLayer.AddShape(locations);

            }

        }



        function loadAccountsFromCrm(dataDescription) {

            var url = "/AccountSet?$select=Address1_Country,Address1_City,Name";

            if (null != dataDescription) {

                // Filter accounts based on country specified in data description.

               // url += "&$filter=Address1_Country eq '" + dataDescription + "'";
                                         

            }

            retrieveFromCrmRestApi(url,

                function (data) {

                    var results = data["results"];

                    var accounts = new Array();

                    for (resultKey in results) {

                        accounts.push(results[resultKey]);

                    }

                    // Once accounts are retrieved from CRM Server, plot their locations on map.

                    plotAccountLocations(accounts);

                }

            );

        }



        function getMap(presentationDescription) {

            // Set center and zoom defaults.

            var center = null;

            var zoom = 4;

            if (null != presentationDescription) {

                // Calculate map-center and zoom from the presentation description.

                var arguments = presentationDescription.split(',');

                if (arguments.length > 1) {

                    center = new VELatLong(arguments[0], arguments[1]);

                }

                if (arguments.length > 2) {

                    zoom = arguments[2];

                }

            }

            map = new VEMap("map");

            map.LoadMap(center, zoom, VEMapStyle.Road, true, VEMapMode.Mode2D, false, 0);

            window.onresize = function (event) { map.Resize(document.body.clientWidth, document.body.clientHeight); };

           window.onresize(null);

        }



        function loadMap() {

            // First, get the chart object from CRM Server.

            loadChartFromCrm(

                function (chart) {

                    // Once we have retrieved the chart, format the map based on the chart's presentation description.

                    getMap(chart.PresentationDescription);

                    // Get Accounts from CRM Server based on the chart's data description, and plot them on the map.

                    loadAccountsFromCrm(chart.DataDescription);

                }

            );

        }

    </script>

</head>

<body onload="loadMap()">

    <div id="map"></div>

</body>

</html>


0 comments:

Post a Comment