Dynamics CRM Knowledge Base: Simple Google Maps Integration

Dieses Beispiel zeigt, wie sich Google Maps auf einfache Weise in das Kontakt-Formular integrieren lässt.

Umgebung:
Microsoft Dynamics CRM 2011 Beta
(vanilla/Out-Of-The-Box)

Deployment:
onpremise

Achtung:
In CRM Online funktioniert das ganze leider nicht. Das Problem ist, den Internet Explorer dazu zubringen, einen iFrame mit HTTP-Content in einer Webseite mit HTTPS-Content anzuzeigen. Google Maps ist leider nicht über HTTPS verfügbar.

#1: Herausgeber und Lösung erstellen
Um die Funktionalität exportieren zu können und die Anpassungen vom CRM Standard getrennt zu halten, sollte man zuerst einen Herausgeber und eine Lösung im CRM anlegen.

1.1 Erstellen eines neuen Herausgebers

1.2 Erstellen einer neuen Lösung

#2: iFrame auf dem Formular einfügen

Der eben erstellten Lösung fügen wir nun die (bereits existierende) Entität "Kontakt" hinzu. Dadurch werden der Lösung auch noch die Entitäten "Price List" und "Service" hinzugefügt. Dem Kontakt-Formular spendieren wir einen neuen Registerkarte inklusiv iFrame.

2.1 Auf dem Kontakt Formular ein neues iFrame einfügen - unter "Formatting" kann man optional noch die "Number of Rows" erhöhen (z.B. auf 15), um die angezeigte Karte zu vergrößern.

#3: JavaScript Bibliothek erstellen

Nun benötigen wir eine JavaScript Datei mit folgendem Inhalt:

function loadMap()

{

    // Get address data from form
    var strasse = Xrm.Page.getAttribute("address1_line1").getValue();
    var plz = Xrm.Page.getAttribute("address1_postalcode").getValue();
    var ort = Xrm.Page.getAttribute("address1_city").getValue();
    var land = Xrm.Page.getAttribute("address1_country").getValue();

// Build google maps url
var url = "http://maps.google.de/maps?output=embed&q="

+ strasse + "," + plz + " " + ort + "," + land;

// Set iFrame source to google maps url
Xrm.Page.ui.controls.get("IFRAME_googlemapsdemo").setSrc(url);

}

#4: JavaScript Bibliothek bereitstellen
Diese Datei fügen wir der in Schritt #1 erstellten Lösung als neue Web Resource hinzu.

4.1 Die JavaScript Bbliothek als neue Web Resource der Solution hinzufügen

#5: JavaScript Bibliothek aktivieren
Nun müssen wir nur noch unsere JavaScript Bibliothek aus den Schritten #3 und #4 auf dem Kontakt-Formular im OnLoad Ereignis aktivieren. Dazu öffnen wir im Bearbeitungmodus (Kontakt Formular) die "Form Properties" und fügen unsere Bibliothek den Formular Bibliotheken hinzu.