The aim of the article is to help users to achieve the data accuracy of address with better user experience for filling the address in D365. This solutioning helps the users to auto-complete addresses by just entering the leading text rather than having to fill out the complete lines of address.
Below diagram illustrates the working solution
Below are the steps to achieve this.
Prerequisites : Need to have a Bing Maps API Key to achieve this. ( A trial key can be obtained from here)
1. Create a html web resource in D365 with the below code. Replace the key in the bing maps api call with the one you have obtained. Update the selectedSuggestion method to assign values to CRM address fields based on suggestionresult.
<title>autosuggestuiHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">body{margin: 0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
<div id="printoutPanel" style="font-family: undefined;"></div>
<div id="searchBoxContainer" style="font-family: undefined;"><input id="searchBox" type="text"></div>
<div id="myMap" style="width: 100vw; height: 100vh; font-family: undefined;"></div>
<script type="text/javascript">
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
/* No need to set credentials if already passed in URL */
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12 });
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
var options = {
maxResults: 4//,
//map: map
};
var manager = new Microsoft.Maps.AutosuggestManager(options);
manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
});
function selectedSuggestion(suggestionResult) {
map.entities.clear();
map.setView({bounds: suggestionResult.bestView });
var pushpin = new Microsoft.Maps.Pushpin(suggestionResult.location);
map.entities.push(pushpin);
document.getElementById('printoutPanel').innerHTML =
'Suggestion: ' + suggestionResult.formattedSuggestion +
'<br> Lat: ' + suggestionResult.location.latitude +
'<br> Lon: ' + suggestionResult.location.longitude;
}
}
</script>
<script src="https://www.bing.com/api/maps/mapcontrol?key=Ahnv3l6aFkyTPbz9eG6C0Gyw37IqZETDsS-zSnhqlJBKYYidGFJ8Pf0O4DOF0O9T&callback=loadMapScenario" defer="" type="text/javascript" async=""></script>
</body></html>
2. Place it on the Contact form and Verify the properties of the Web Resource
3. Publish the Entity.
