Die Erweiterungsmöglichkeiten von Dynamics CRM mittels GUI Customizing, JavaScript oder Plugins sind recht umfangreich und geben dem Entwickler viele Freiheiten in der Gestaltung von spezifischen Lösungen.
Eine übliche Anforderung dabei ist es, Daten mit Hilfe eines modalen Dialogs zu erfassen und diese dann mittels JavaScript oder eines Plugins zu verarbeiten.
Einen solchen Dialog im CRM zu implementieren ist jedoch nicht so ganz „Straight Forward“. Wie das funktioniert, zeige ich in diesem Blog Artikel.
Im Wesentlichen benötigen wir hierzu vier JavaScript Funktionen aus dem Mscrm Namespace:
dialogUrl = Mscrm.CrmUri.create(PathToDialogHtml); Erzeugt ein URI-Objekt für den Dialog. PathToDialogHtml zeigt dazu typischerweise auf eine CRM Web-Ressource.dialogWindow = Mscrm.CrmDialog(dialogUrl,parentWindow, sizeX, sizeY); Erzeugt das eigentliche Dialog Objekt.dialogWindow.setCallbackReference( function(result) {} ); Setzt eine Callback Funktion, die vom Dialog aufgerufen wird, nachdem z.B. der OK Button angeklickt wurde.dialogWindow.show(); Ruft den Dialog auf.
Beginnen wir mit dem HTML Code für den Dialog. Dies ist im Grunde ein einfaches HTML Formular. Für das Design kann man z.B. jQuery und das Microsoft Office UI Fabric Framework benutzen. Wichtig ist hier jedoch, dass die ClientGlobalContext.js.aspx Datei eingebunden wird.
<html>
<head>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
...
</head>
...
</html>
Danach folgt das eigentliche Formular:
<html>
...
<head>
...
<script src="HelloWorld.js" type="text/javascript"></script>
</head>
<body>
<form id="formPopup">
<div>
<div>
<h1>Hello World!</h1>
</div>
<div>
<button title="Cancel" id="btnCancel" onclick="Gate4.HelloWorldDialog.CancelButton();" type="button">Abbrechen</button>
<button title="OK" id="btnOk" onclick="Gate4.HelloWorldDialog.OkButton();" type="button">OK</button>
</div>
</div>
</form>
</body>
</html>
Dieses HTML Formular wird dann als Web-Ressource im CRM hochgeladen und veröffentlicht. Natürlich benötigen wir auch noch die HellowWorld.js Datei als Web-Ressource, in dem die OnClick Funktionen für die Dialog-Buttons definiert sind:
if (typeof Gate4 === "undefined") {
Gate4 = function () {
};
}
Gate4.HelloWorldDialog = function() {
var okButton = function () {
Mscrm.Utilities.setReturnValue({ "dialog": window, "click": "OK" });
}
var cancelButton = function () {
Mscrm.Utilities.setReturnValue({ "dialog": window, "click": "CANCEL" });
}
return {
OkButton: okButton,
CancelButton: cancelButton,
};
} ();
Über die Mscrm.Utilities.setReturnValue Funktion wird später eine Callback Funktion aufgerufen, in der wir den Dialog auswerten können. Dazu übergeben wir der setReturnValue Funktion die entsprechenden Werte in Form eines JSON Objekts. Wichtig ist hierbei, dass auch das window Objekt übergeben wird, damit der Dialog im Callback geschlossen werden kann.
Mit diesen Web-Ressourcen können wir nun den Dialog mit Hilfe der oben genannten Funktionen erzeugen. Dazu erzeugen wir zunächst mittels Mscrm.CrmUri das URI Objekt, welches auf das HTML Formular verweist:
var dialogUrl = Mscrm.CrmUri.create(Xrm.Page.context.getClientUrl() + "/webresources/g4_resource/HelloWorld.html");
Mit dem URI Objekt können wir nun den Dialog erzeugen. Dabei geben wir dem Konstruktor die Ausdehnung des Dialogs und das Parent-Objekt mit:
var dialogWindow = new parent.Mscrm.CrmDialog(dialogUrl, this, 420, 200);
Damit der Dialog weiß, was er beim Klick auf den OK oder Cancel Button zu tun hat, hinterlegen wir eine Callback-Funktion. Diese wird vom Dialog über die Mscrm.Utilities.setReturnValue Funktion aufgerufen (siehe oben).
dialogWindow.setCallbackReference(function (result) {
result.dialog.closeCurrentWindow();
if (result.click === "OK") {
alert("OK clicked.");
}
});
Nun müssen wir noch mit einem kleinen Kunstgriff dafür sorgen, dass der Dialog vom CRM wirklich als Web-Ressource behandelt wird:
if (!dialogUrl.get_isWebResource()) {
dialogUrl.get_isWebResource = function () { return true; }
}
Hier ist anzumerken, dass dieser Code problemlos funktioniert, jedoch unsupported ist.
Damit ist alles vorbereitet und der modale CRM Dialog kann geöffnet werden:
dialogWindow.show();
Kategorien: Dynamics CRM, Erklärt, Technical
Schlagwörter: CRM, Dynamics CRM, HowTo, Modaler Dialog
Haben Sie Fragen zu diesem Artikel oder brauchen Sie Unterstützung?
Nehmen Sie mit uns Kontakt auf!
Wir unterstützen Sie gerne bei Ihren CRM-Vorhaben!
