Microsoft Dynamics CRM 4.0 to Bing Maps Integration – Improving the User Experience

Roshan Mehta, 16 September 2010

In my last post, I showed you a great way to display the driving directions between two addresses in a Dynamics CRM iFrame, and also pull through the total distance and estimated time values. Although this is a powerful method of integrating the two Microsoft systems, there is always a way in which the functionality can be improved.

You may work for a multi-national company which requires automatic retrieval of distance and time calculations between two addresses in multiple units. This means that you may want to display the total distance in kilometres for one record, and in miles for another record. Bing Maps makes this very easy by setting a single property in the Javascript code on the custom ASPX page.

            var options = new VERouteOptions;

            options.DistanceUnit = VERouteDistanceUnit.Kilometer;

            //or

            options.DistanceUnit = VERouteDistanceUnit.Mile;

We can take this one step further by making the Javascript respond to data that is present on the Dynamics CRM form. I have a custom picklist field called Distance Unit which contains two options: Kilometres and Miles. When the user selects either of these options, we want to display the total distance in the selected unit. Here is how we would build this functionality.

Modifying Javascript on the Custom ASPX Page

With this method, we add a condition to the Javascript on our custom ASPX page to check the selected value of our Distance Unit picklist attribute.

            var selectedUnit = parent.document.forms[0].all.mag_distanceunit.SelectedText;

            if (selectedUnit == "Kilometres") {

                options.DistanceUnit = VERouteDistanceUnit.Kilometer;

            } else if (selectedUnit == "Miles") {

                options.DistanceUnit = VERouteDistanceUnit.Mile;

            }

However, we’d need to save the form every time we want the selected distance unit to kick in. To eliminate an extra click to save the form, we could use the following code inside the onLoad event in the Distance Unit attribute. This code automatically refreshes the iFrame and sets the distance to the correct unit.

document.getElementById("IFRAME_map").contentWindow.location.reload(true);

Let’s see the added functionality in action. Here is what the form looks like when kilometres is selected as the distance unit.

 

This is the result after the user selects miles as the distance unit.