Während ich mich gerade mit der x-Browser Kompatibilität beschäftige, stelle ich Euch heute die Möglichkeit der Integration von jQuery & jQueryUI in Microsoft Dynamics CRM 2011 am Beispiel der Autovervollständigung von Feldern vor.
Im 1. Teil zeige ich Euch, welche Vorbereitungen es zu treffen gilt, um die jQuery- und jQueryUI-Bibliotheken im CRM System nutzen zu können.
Im 2. Teil gehe ich dann konkret auf das Beispiel der Autovervollständigung ein.
Beginnen wir also zunächst mit den Vorbereitungen. Zunächst laden wir uns die jQueryUI-Bibliothek in angepasster Form herunter. Dazu wählen wir von der Seite ein paar Dinge aus, die wir für unser Beispiel benötigen.
Selbstverständlich könnt Ihr Euch auch die komplette Bibliothek laden und damit Eure eigenen Szenarien entwickeln. Ich empfehle aus Performance-Gründen jedoch die Auswahl nur der Elemente, die Ihr auch wirklich benötigt.
Für unser Beispiel wähle ich den kompletten “UI Kern” (Core), alle “Interaktionen”, von den Widgets “Autocomplete” (woraufhin dann auch automatisch “Menu” ausgewählt wird) und von den Effekten den “Kern” (Effects Core), “Explode” und “Fade”.
Als Theme wähle ich “Redmond” (und erspare mir damit die Erstellung einer eigenen .CSS-Datei.
Die .CSS-Datei kann ich mit dem Style Guide aus dem SDK dem CRM-Farbspektrum hin noch genauer anpassen.
Nachdem die Datei als .ZIP-Archiv auf dem Rechner gespeichert ist, entpacken wir diese.
Wir haben mit der index.html – Datei ein Beispiel-Dokument, welches im Browser geöffnet, die ausgewählten Funktionen und Effekte visualisiert.
Doch zurück zu den Vorbereitungen. Wir öffnen den css\redmond\images-Ordner und finden hier die von der Bibliothek verwendeten Grafiken.
Erfreulicherweise sind alle Bilder im PNG-Format, ein Format, welches in CRM-Webressourcen verwendet werden darf.
Doch schauen wir uns die verwendeten Namen an, so stellen wir fest, das wir im Namen einen “-“ finden.
Versuchen wir diesen Namen im CRM als Webressourcennamen zu verwenden, erhalten wir eine Fehlermeldung.
Wir müssen den Bindestring daher durch ein gültiges Zeichen ersetzen. Ich verwende “_” hierfür.
Im Anschluss beginnt die Fleißarbeit. Jedes Bild wird einzeln als Webressource hochgeladen, im Bildnamen dabei der Bindestrich durch den Unterstrich ersetzt.
Ich empfehle vorweg des Bildnamens die Pseudo-Ordnerstruktur zu übernehmen. In meinem Fall habe ich mich für <präfix_>/css/images/<Bildname> entschieden.
Nachdem dieser 1. Schritt getan ist, müssen wir die Verweise auf die Bilder aktualisieren. Diese Verweise befinden sich in der .CSS-Datei.
Öffnet die Datei in einem Editor Eurer Wahl. Als Beispiel habe ich Euch einen Screenshot der in Notepad++ geöffneten Datei bereitgestellt. Hier könnt Ihr über eine Suche nach “url” die einzelnen Verweise finden und hier den Bindestrich durch den Unterstrich ersetzen.
Hinweis: Ich empfehle die .min-Datei zu bearbeiten, da wir diese in unser CRM hochladen werden. Diese Datei ist optimiert und bietet damit im Ladeverhalten der Form eine bessere Performance.
Nachdem die Datei bearbeitet ist, wird auch diese als Webressource in CRM hochgeladen. Hierzu verwende ich <präfix_>/css/jQueryUI_Redmond.css.
Damit habe ich für spätere Zugriffe über den Namen gleich eine Referenz. Und zum Schluss müssen noch die beiden Bibliotheken aus dem js-Ordner als CRM Webressourcen hochgeladen werden.
<präfix_>/JS/jQuery_182.js bzw. <präfix_>/JS/jQueryUI.js verwende ich in meinem Beispiel hierfür.
Hinweis: Obwohl man die Versionsnummer an den Namen binden kann (_182), würde ich in der Praxis eher davon abraten, denn sobald es eine neue Version gäbe, müsste man diese Hochladen und sämtliche Referenzen über den Dateinamen aktualisieren. Das kann mitunter sehr zeitintensiv sein.
jQuery.js und jQueryUI.js sind also ausreichend. Und wer mag, kann über die Beschreibung einen Verweis auf die verwendete Version geben.
Während Ihr für jQueryUI.js eine .min-Version im Download findet, werdet Ihr für die jQuery-Bibliothek nur die Vollversion finden.
Auch hier solltet Ihr auf die .min-Version setzen. Diese findet Ihr im Download unter http://jquery.com/
Soweit die Vorarbeiten und im morgigen 2. Teil dann die Integration anhand eines Praxisbeispiels.
Technorati Tags:Microsoft– Dynamics– CRM– 2011– jQuery– jQueryUI– Anpassungen– Tipps & Tricks
Einsortiert unter:Anpassungen, CRM 2011, CRM 2011 Online, Tipps & Tricks
