Post
Ask Question

Show Child Accounts On Bing Maps Under Parent

First we need to make sure address1_latitude and address1_longitude should be added under account form and filled for all account records based on their address.

Requirement

Let’s say we have a requirement to show all the child accounts (sub accounts) as pushpins on map under parent account and show their name and city when user will hover on pushpin.

Solution

We can simply develop an html web resource where we can use Bing Maps AJAX control to show pushpins for child account based on the latitude or longitude values. We can implement this in the following three steps:

  • Get Bing Maps API.
  • Need to retrieve all child accounts for current account.
  • Add pushpins to Bing Maps based on latitude and longitude returned from child accounts.

So let’s follow the below given steps:

  • To get Bing Maps key, you can follow instructions here.

  • We can create a new solution or can do this customization in base solution, (If you are new to solution, please refer our earlier posts to create solution).

  • Let’s first upload REST.SDK.js to your solution, we can use retrieve multiple method under this library to get child records and use the below given settings (Note: You can get this file under SampleCode\JS\RESTEndpoint\JavaScriptRESTAssociateDisassociate\JavaScriptRESTAssociateDisassociate\Scripts) under your CRM SDK folder, if you don’t have CRM SDK download and extract it first.

    CRM SDK folder

    Note: We have used him prefix in our publisher it could be new for you if you are not using specific prefix.

  • Create new HTML web resource and use the following details.

    HTML web resource

  • Use the following code for this html web resource.
    1. <html>  
    2.   
    3.     <head>  
    4.         <script src="../../ClientGlobalContext.js.aspx"></script>  
    5.         <script src="../Script/SDK.REST.js" type="text/javascript"></script>  
    6.         <title>Show Child Accounts</title>  
    7.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    8.         <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>  
    9.         <script type="text/javascript">  
    10.         var map = null;  
    11.         var messageBox = null;  
    12.         var lat = null;  
    13.         var lon = null;  
    14.         var City = null;  
    15.         var AccountName = null;  
    16.         var pushpin = null;  
    17.         var pushpinCollection = new Microsoft.Maps.EntityCollection();  
    18.         var messageBoxCollection = new Microsoft.Maps.EntityCollection();  
    19.         document.onreadystatechange = function ()  
    20.         {  
    21.             if(document.readyState == "complete")  
    22.             {  
    23.                 //initialise map    
    24.                 getMap();  
    25.                 //Get child account records    
    26.                 getChildAccounts();  
    27.             }  
    28.         }  
    29.   
    30.         function getChildAccounts()  
    31.         {  
    32.             //retrieve current entity id    
    33.             var parentaccountId = window.parent.Xrm.Page.data.entity.getId();  
    34.             var entitySchemaName = "Account";  
    35.             //get all child records based on parent customer id    
    36.             var odataQuery = "?$select=Name,Address1_City,Address1_Latitude,Address1_Longitude&" + "$filter=ParentAccountId/Id eq guid'" + parentaccountId + "'";  
    37.             if(typeof (SDK) != "undefined")  
    38.             {  
    39.                 //The retrieveAccountsCallBack function is passed through as the successCallBack.    
    40.                 SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error)  
    41.                 {  
    42.                     alert(error.message);  
    43.                 }, function () {});  
    44.             }  
    45.             else  
    46.             {  
    47.                 alert("Not able to load REST.SDK library");  
    48.             }  
    49.         }  
    50.         //callback method    
    51.         function getnotesImagesCallback(resultSet)  
    52.         {  
    53.             //initialise message box    
    54.             messageBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0),  
    55.             {  
    56.                 visible: false  
    57.             });  
    58.             messageBoxCollection.push(messageBox);  
    59.             //Show current account    
    60.             lat = window.parent.Xrm.Page.getAttribute("address1_latitude")  
    61.                 .getValue();  
    62.             lon = window.parent.Xrm.Page.getAttribute("address1_longitude")  
    63.                 .getValue();  
    64.             City = window.parent.Xrm.Page.getAttribute("address1_city")  
    65.                 .getValue();  
    66.             AccountName = window.parent.Xrm.Page.getAttribute("name")  
    67.                 .getValue();  
    68.             pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));  
    69.             pushpin.Description = AccountName + ", " + City;  
    70.             //show message box on mouse move    
    71.             Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);  
    72.             //remove message box on mouse lost    
    73.             Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);  
    74.             pushpinCollection.push(pushpin);  
    75.             //add collection to map    
    76.             map.entities.push(pushpinCollection);  
    77.             map.entities.push(messageBoxCollection);  
    78.             if(resultSet.length > 0)  
    79.             {  
    80.                 TotalImages = resultSet.length;  
    81.                 for(i = 0; i < resultSet.length; i++)  
    82.                 {  
    83.                     lat = resultSet[i].Address1_Latitude;  
    84.                     lon = resultSet[i].Address1_Longitude;  
    85.                     City = resultSet[i].Address1_City;  
    86.                     AccountName = resultSet[i].Name;  
    87.                     pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));  
    88.                     pushpin.Description = AccountName + ", " + City;  
    89.                     //show message box on move move    
    90.                     Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);  
    91.                     //remove message box on mouse lost    
    92.                     Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);  
    93.                     pushpinCollection.push(pushpin);  
    94.                 }  
    95.                 //add collection to map    
    96.                 map.entities.push(pushpinCollection);  
    97.                 map.entities.push(messageBoxCollection);  
    98.             }  
    99.         }  
    100.   
    101.         function displaymessagebox(e)  
    102.         {  
    103.             messageBox.setOptions(  
    104.             {  
    105.                 description: e.target.Description,  
    106.                 visible: true,  
    107.                 offset: new Microsoft.Maps.Point(0, 25)  
    108.             });  
    109.             messageBox.setLocation(e.target.getLocation());  
    110.         }  
    111.   
    112.         function hidemessagebox(e)  
    113.         {  
    114.             messageBox.setOptions(  
    115.             {  
    116.                 visible: false  
    117.             });  
    118.         }  
    119.   
    120.         function getMap()  
    121.         {  
    122.             map = new Microsoft.Maps.Map(document.getElementById('bingMaps'),  
    123.             {  
    124.                 credentials: 'Your BingMaps key',  
    125.                 center: new Microsoft.Maps.Location(41.956690, -103.137798),  
    126.                 mapTypeId: Microsoft.Maps.MapTypeId.road,  
    127.                 zoom: 10  
    128.             });  
    129.         }  
    130.         </script>  
    131.     </head>  
    132.   
    133.     <body>  
    134.         <div id="bingMaps" style="width: 600px; height: 500px; position: relative;"></div>  
    135.     </body>  
    136.   
    137. </html>  
  • Save and publish your web resource and place this web resource to account form by navigating Insert ->Web Resource under form editor.

  • Save and publish form and open any account record, if current account will have any child record it will show pushpins for child accounts otherwise it will just show current account record pushpin.

    Map

References: BingMaps SDK


Similar Articles
HIMBAP
We are expert in Microsoft Power Platform.