Navish Jain MS Dynamics CRM Consultant

In this article , i am going to explain how to make asynchronous and synchronous call using javascript in CRM 2011

first you need to add JQuery file on form as webresource and if you want to run javascript code asynchronous  then make async attribute value true else false in below code


function Retrieve() {
    var jSonArray = new Array();

    if (Xrm.Page.getAttribute("account").getValue() != null) {
        //acount guid no
        var studentid = Xrm.Page.data.entity.attributes.get("account").getValue()[0].id;

        var filter = "$select=name&$filter=accountid eq guid'" + studentid + "'"
        var entityset = 'account';

        var pagecontext = Xrm.Page.context;
        var serverUrl = pagecontext.getServerUrl();
        if (serverUrl.match(/\/$/)) {
            serverUrl = serverUrl.substring(0, serverUrl.length - 1);
        }
        var odataSelect = serverUrl + "/xrmservices/2011/OrganizationData.svc/" + entityset + "Set?" + filter;

        //asynchronous call -> async: true
        //synchronous call -> async: true
        $.ajax({
            type: "GET",
            async: false,
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            url: odataSelect,
            beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("Accept", "application/json"); },
            success: function (data, textStatus, XmlHttpRequest) {
                jSonArray.push(data.d);
                onSaveSuccess(jSonArray);
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) { alert('OData Select Failed: ' + odataSelect); }
        });
    }

}

function onSaveSuccess(jSonArray) {
    if (jSonArray != null && jSonArray[0].results.length > 0) {
        var accountname = jSonArray[0].results[0].name;
    }
}

In this article , I am going to explain how to use Google Map API in CRM 2011

In my custom entity have two attributes "new_fromaddress" and "new_toaddress" and i need to show Address Path direction using Google Map API
To display path , I created HTML web resource and in html web resource inserted two div panels
<div id ="directionpanel"  style="height: 390px;overflow: auto;width: 200px" ></div>
<div id ="map" style="height: 390px; width: 500px"></div>


To use Google API need to insert javascript Class
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

To find CRM main entity attributes need to insert Class
<script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>

To initialize Google map , need to write javascript function InitializeMap()
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionpanel'));

        var control = document.getElementById('control');
        control.style.display = 'block';
 }


and call this function on window load event.
window.onload = InitializeMap;


To show From and To addresses Path Direction , need to write function findDirection()
function findDirection() {
        var start = window.parent.Xrm.Page.getAttribute('new_fromaddress').getValue();
        var end = window.parent.Xrm.Page.getAttribute('new_toaddress').getValue();
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
}
and called this function after InitializeMap function
findDirection();


Complete HTML web resource code 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>
    <script language="javascript" type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        function InitializeMap() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directionpanel'));

            var control = document.getElementById('control');
            control.style.display = 'block';


        }



        function findDirection() {
            var start = window.parent.Xrm.Page.getAttribute('new_fromaddress').getValue();
            var end = window.parent.Xrm.Page.getAttribute('new_toaddress').getValue();
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

        }


        window.onload = InitializeMap;
        findDirection();
    </script>
</head>
<body>
    <table id="control">
        <tr>
            <td valign="top">
                <div id="directionpanel" style="height: 390px; overflow: auto; width: 200px">
                </div>
            </td>
            <td valign="top">
                <div id="map" style="height: 390px; width: 500px">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>