Microsoft Dynamics CRM 2011 | jQuery & jQueryUI (Part II)

Nachdem ich im 1. Teil auf die Basis-(Vor-)Arbeiten eingegangen bin, stelle ich Euch heute im Praxisbeispiel die Autovervollständigung vor.

Autocomplete_WebResources

Kontrollieren wir noch einmal, dass wir alle Webressourcen im System vorfinden, um damit das Projekt starten zu können.

Wir benötigen nunmehr in unserer Lösung noch eine Entität (z.B. Firma) und hierfür ebenfalls eine Bibliothek. In einem solchen Fall empfehle ich eine Form-Bibliothek anzulegen, in dem Ihr alle Scripte hinterlegt.

Autocomplete_Formula_Properties

Fügen wir unserer Entität also zunächst die beiden Bibliotheken jQuery.js und jQueryUI.js hinzu.

Achtet auf die Reihenfolge, damit beim Laden der Entität die Bibliotheken korrekt initiiert werden können.

Und fügt anschließend noch Eure individuelle Form-Bibliothek hinzu. Ich habe mich für

<präfix_>/JS/<Entität>_FormLibrary.js entschieden.

Und nun kommen wir zum Programmcode. Scheuen wir uns die onLoad-Funktion genauer an.

   onLoad: function() {
     var FORM_TYPE_CREATE = 1;
     var FORM_TYPE_UPDATE = 2;
     var FORM_TYPE_READ_ONLY = 3;
     var FORM_TYPE_DISABLED = 4;
     var FORM_TYPE_QUICK_CREATE = 5;
     var FORM_TYPE_BULK_EDIT = 6;
     var FORM_TYPE_READ_OPTIMIZED = 11;
     var formType = Xrm.Page.ui.getFormType();

 

Zunächst müssen wir ein Problem lösen, welches aus der CRM GUI heraus nicht möglich ist. Wir konnten in unseren Formular-Eigenschaften zwar die erforderlichen JS-Bibliotheken hinzufügen, nicht jedoch unser .css (StyleSheet).

Auf dieser Basis setzt jQueryUI jedoch auf. Wie können wir also unser .css-StyleSheet in unsere Form zur Laufzeit integrieren.

Hierbei hilft uns die Verwendung der jQuery-Bibliothek.

 // load stylesheets to head
var link = $(„<link>“);
link.attr({
    type: ‚text/css‘,
    rel: ’stylesheet‘,
    href: ‚../WebResources/<präfix_>_/css/jQueryUI_Redmond.css‘
});
$(„head“).append(link);

 

 

Wir binden unser StyleSheet einfach an den Kopf der HTML-Definition. Ersetzt dabei <präfix> durch das von Euch verwendete Präfix. Sofern Ihr Euch nicht an die vorherigen virtuellen Pfade gehalten habt, müsst Ihr ggfs. die Pfadangabe entsprechend korrigieren.

Mit diesem kleinen “Trick” konnten wir CRM davon überzeugen, unsere .css-Definition nachzuladen.

Kommen wir nunmehr zum Beispiel der Autovervollständigung. Schauen wir uns dazu zunächst die API-Dokumentation an. Wir stellen fest, dass wir das Widget an ein Element binden können. Hierzu müssen wir jedoch die ID des Elementes ermitteln.

Autocomplete_FeldID_ermittelnHierbei helfen uns die Entwicklertools des Internet-Explorers. Wir öffnen unser Firmenformular und wählen unser Element aus. In der Attributs-Definition sehen wir dann die ID. Im Fotoausschnitt (Bild) seht Ihr “address1_name”, in meinem Beispiel verwende ich “address1_line1”.

Des Weiteren konnten wir der API entnehmen, dass wir dem Feld eine Quelle (source) mitgeben können. In meinem Beispiel verwende ich einen statischen String-Array.

In der Praxis könnte man hier mit dem XrmSvcToolkit, welches ich Euch bereits zuvor näher gebracht hatte, ein Array dynamisch aus den bereits eingegebenen Adressen nachladen.

Eine weitere Möglichkeit wäre es, eine JS-Webressource als JSON-Datei zu laden. Diese Webressource würde bei Eingabe einer neuen Adresse automatisch mit dem neuen Wert aktualisiert werden. Ihr könntet auch eine externe Quelle nutzen.

Schauen wir uns die weiteren Code-Zeilen an:

 //Autocomplete
 var availableTags = [
        „Chertsey Road“,
        „One Microsoft Way“,
        „Dienstagsplatz 778“,
        „Musterweg 224“,
        „Mittwochsallee 334“,
        „Donnerstagsallee 334“,
        „Random House“,
        „Dienstagsplatz 112“,
        „Donnerstagsgasse 245“,
        „Beispielstraße 778“,
        „Montagsallee 778“,
        „Dienstagsweg 223“,
        „Beispielstraße 223“,
        „Beispielweg 556“,
        „Mittwochsallee 778“,
        „Musterallee 445“,
        „Dienstagsweg 778“
    ];
    $( „#address1_line1“ ).autocomplete({
        minLength: 2,
        source: availableTags
    });

mit der Angabe minLength gebe ich vor, dass erst bei der Eingabe von wenigstens 2 Zeichen ein Vorschlag erstellt werden soll.

Autocomplete_Begin

Ich beginne in mein Feld also Buchstaben einzugeben und erhalte nach Eingabe von 2 Zeichen eine Vorschlagsliste direkt unterhalb des Feldes.

Autocomplete_SelectRecord

Aus dieser Vorschlagsliste kann ich per Maus oder auch mit den Pfeiltasten (hoch, runter) einen Eintrag auswählen. Der Wert wird anschließend direkt in das Feld übernommen.

Autocomplete_AnotherSample

Hier seht Ihr ein weiteres Beispiel aus dem hervorgeht, dass die eingegebenen Zeichen auch innerhalb einer Vorgabe vorkommen können. Dieser Eintrag “Random House” wird dann ebenfalls vorgeschlagen.

Ihr seht auch, dass Groß-/Kleinschreibung ignoriert wird.

Ich hoffe, Euch mit diesem einfachen Beispiel aufgezeigt zu haben, dass man mit Hilfe von jQuery und jQueryUI die Benutzeroberfläche von Microsoft Dynamics CRM sinnvoll ergänzen kann und damit auch die Datenqualität steigern kann.

Abgesehen von einer schnelleren Dateneingabe, sorgt man auch für eine bessere Datenqualität.

Viel Spass in der Umsetzung.

Technorati Tags:

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s