Show Child Accounts On Bing Maps Under Parent

Mahender Pal
Nov 23, 2015
5.3k
0
0
Article

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.

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.
Use the following code for this html web resource.
1. <html>
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. }
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. }
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. }
112. function hidemessagebox(e)
113. {
114. messageBox.setOptions(
115. {
116. visible: false
117. });
118. }
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>
133. <body>
134. <div id="bingMaps" style="width: 600px; height: 500px; position: relative;"></div>
135. </body>
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.