Post
Ask Question

Add Custom Bing Map Control On Entity Form Using FormXML

Recently, I was stuck at one where I had to show Bing map on Opportunity entity. Everybody knows that to show Bing map on an OOB entity, we just need to go on form customization and click on Insert and insert the Bing map. But if any requirement comes and asks you to add the Bing map on the custom entity or that entity where you cannot add the Bing map control, how can you do that? 

First, you can create one section on your entity form where you need to put your map control.

I am giving you a simple solution. Most people are going to create IFrame, and they insert the Bing map control inside the HTML. Later, they have to create a Bing map Key, and before that, they have to create a Bing map account. Using the below HTML code you can easily add the Bing map but it takes more effort to create the key.

<!DOCTYPE html>
<html>
<head>
    <title>Bing Maps Integration</title>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=At6r4XyZzjbXGlZohOkTP4-SLrYB4EEiLIuIh8XYc092xKqV6ADR0rc3YioIYZhB&callback=loadMapScenario' async defer></script>
 </script>
</head>
<body>
    <div id="bingMap" style="width: 100%; height: 400px;"></div>
    <script>
        var map;
        function loadMapScenario() {
            map = new Microsoft.Maps.Map(document.getElementById('bingMap'), {
                credentials: 'At6r4XyZzjbXGlZohOkTP4-SLrYB4EEiLIuIh8XYc092xKqV6ADR0rc3YioIYZhB',
                center: new Microsoft.Maps.Location(47.606209, -122.332071), // Default location
                zoom: 10 // Default zoom level
            });
        }
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: loadMapScenario, culture: 'en-us', lazyLoad: true });
    </script>
</body>
</html>

Using the locations pin, we can easily show the Bing map but sometimes the Bing map key causes us problems. It will not work at the point of loading control on Entity form. So we have a simple solution, that is XRM Toolbox. We have FormXML Manager in the XRM Toolbox that can be used for adding the Bing map control using our Address field.

Log in using your MS dynamics credentials into XRM Toolbox -> open FormXML Manager -> Click on Load Entities -> Select the entity (I have selected Opportunity) -> Select the Form where you want to add the control -> Click on Edit FormXML.

Once you click on Edit FormXML, you can see FormXML Editor, where you find a search with the Map section where you already created an entity form. In my case, I have given the section name "opp_map_section".

<section name="oppo_section_bingmap" showlabel="false" showbar="false" locklevel="0" id="{48d840d6-14e5-9392-69d7-1be17442348a}" IsUserDefined="0" layout="varwidth" columns="1" labelwidth="115" celllabelalignment="Left" celllabelposition="Left">
  <labels>
     <label description="Section" languagecode="1033" />
  </labels>
  <rows>
     <row>
        <cell id="{d401275c-7a22-95c4-ccc0-d8e89d6bc7ba}" showlabel="false">
           <labels>
               <label description="Map view" languagecode="1033" />
           </labels>                    
        </cell>
     </row>
   </rows>
</section>

When you open and see the section does not contain any control, you just need to add your control with the class Id.

<control id="mapcontrol" classid="{62B0DF79-0464-470F-8AF7-4483CFEA0C7D}">
   <parameters>
      <AddressField></AddressField>
   </parameters>
</control>

You can also learn what the Form XML is in the microsoft docs. After adding the control, you can show which address you need to show on the Bing map. From that, you have to add the field's logical name into the <AddressField> tag so the map will take that address and show the location.

Here is the complete code of Map control.

<section name="oppo_section_bingmap" showlabel="false" showbar="false" locklevel="0" id="{48d840d6-14e5-9392-69d7-1be17442348a}" IsUserDefined="0" layout="varwidth" columns="1" labelwidth="115" celllabelalignment="Left" celllabelposition="Left">
  <labels>
    <label description="Section" languagecode="1033" />
  </labels>
  <rows>
     <row>
        <cell id="{d401275c-7a22-95c4-ccc0-d8e89d6bc7ba}" showlabel="false">
          <labels>
             <label description="Map view" languagecode="1033" />
          </labels>
          <control id="mapcontrol" classid="{62B0DF79-0464-470F-8AF7-4483CFEA0C7D}">
              <parameters>
                 <AddressField>app_fulladdress</AddressField>
              </parameters>
          </control>
        </cell>
     </row>
  </rows>
</section>

After you add the full code of control later, you can click on Update & Publish button on FormXML Editor to update the control on the Opportunity form. Now, you can go to your environment and open the opportunity form. 

I hope that by using the custom control you can easily add the Bing map control instead of adding Iframe and Bing map Key.

Keep learning new things...!!