Microsoft Dynamics CRM 2011 | jQuery.dataTables

Heute möchte ich Euch mit einem weiteren Beispiel des sinnvollen Zusammenspiels von jQuery und Microsoft Dynamics CRM vertraut machen. Diesmal habe ich ein Plug-In ausgewählt, mit dem Ihr Fremd- oder auch eigene CRM Daten in einer Tabelle auf einer Form integrieren könnt – DataTables.

Dank der großen Flexibilität und einer eigenen API, habt Ihr sehr viele Möglichkeiten Eure Tabellen und Daten zu gestalten. Einige Beispiele findet Ihr direkt auf der verlinkten Seite.

DataTable_AccountForm

Doch kommen wir nun zu unserem Praxisbeispiel. Eine Tabelle mit Musterdaten, die sich aus einer im CRM hinterlegten Webressource laden.

Die einzelnen Zeilen sind selektierbar und die ausgewählten Daten einer Zeile können beim Doppelklick z.B. in CRM Formular-Felder übernommen werden.

DataTable_SolutionOverview

Betrachten wir die Lösung im Detail, so entdecken wir zunächst eine ganze Reihe an JScript-Dateien, ein paar .css Style-Sheets für die Formatierungen und einer Reihe von Bildern, da die Tabelle uns das Sortieren einzelner Spalten ebenso ermöglicht, wie die Aufteilung auf mehrere Blätter.

Umfangreiche Daten lassen sich somit platzsparend auf einer CRM Form darstellen, ohne dabei einen Bedienkomfort einzubüßen.

DataTable_Use_WebResourceManager

Darüber hinaus werden die beiden Grunddateien JSON2 und jQuery (in letzter Version) benötigt. Diese lade ich in der verkleinerten Version als Webressource in mein CRM System. Als Arbeitserleichterung empfehle ich hier den WebResource Manager von meinem MVP Kollegen Tanguy. Das Tool findet sich auf codeplex und ist eine echte Hilfe, wenn man zahlreiche Dateien als Webressource hochladen möchte.

Die eigentliche Steuerung erfolgt dann aus einer HTML-Webressource heraus, deren Code ich Euch im Nachfolgenden näher vorstellen möchte.

Da wäre zunächst einmal die Einbindung der erforderlichen Script-Dateien und Style-Sheets:

<HTML><HEAD><TITLE>Order Data</TITLE>
<META content=“text/html; charset=utf-8″ http-equiv=content-type>
<SCRIPT type=text/javascript src=“../../ClientGlobalContext.js.aspx“></SCRIPT>

<SCRIPT type=text/javascript charset=utf-8 src=“../JS/jQuery.js“></SCRIPT>

<SCRIPT type=text/javascript charset=utf-8 src=“../JS/json2.js“></SCRIPT>

<SCRIPT type=text/javascript charset=utf-8 src=“../JS/jQuery.dataTables.js“></SCRIPT>

<SCRIPT type=text/javascript charset=utf-8 src=“../JS/ZeroClipboard.js“></SCRIPT>

<SCRIPT type=text/javascript charset=utf-8 src=“../JS/TableTools.js“></SCRIPT>
<LINK rel=stylesheet type=text/css href=“../CSS/crmTable.css“><LINK rel=stylesheet type=text/css href=“../CSS/crmForm.css“>

Als nächstes folgt JavaScript Code, mit dem ich zunächst die User-Sprache bzw. Org-Sprache ermittle. Dies könnt Ihr in einer einsprachigen Umgebung weglassen. In mehrsprachigen Systemen, wende ich dies an, um die Spaltenüberschriften und Bezeichner der Tabellen-Steuerungselemente in der jeweiligen Nutzer-Sprache auszugeben.

<SCRIPT type=text/javascript charset=utf-8>
       
        var oTable;
        var giRedraw = false;
        var oLanguage;
        var lUrl;
        var context = GetGlobalContext();
        var aoColumnTitles;
       
        var userLcid = Xrm.Page.context.getUserLcid();
        if (!IsNull(userLcid)) {
            oLanguage = „../LCID/“ + userLcid + „.js“;
            lUrl = „../LCID/“ + userLcid + „_gridcolumns.js“;
        }
        else {
        var orgLcid = Xrm.Page.context.getOrgLcid();
            oLanguage = „../LCID/“ + orgLcid + „.js“;
            lUrl = „../LCID/“ + orgLcid + „_gridcolumns.js“;
        }

Danach folgt die eigentliche Initialisierung der Datentabelle:

$(document).ready(function() {
            // Load Column Headers
                $.ajax({
                dataType: ‚json‘,
                success: function(data) {
                    aoColumnTitles = data ;
                    /* Init the table */
                    if(aoColumnTitles.length > 0) {
                    oTable = $(‚#demoTable‘).dataTable( {
                            „iDisplayLength“: 6,
                            //“sScrollY“: „200px“,
                            //“sPaginationType“: „full_numbers“,
                            „bPaginate“: true,
                            „bLengthChange“: false,
                            „aaSorting“: [[ 1, „asc“ ]],
                            „bProcessing“: true,
                            „bFilter“: false,
                            „bInfo“: true,
                            „bAutoWidth“: true,
                            „bDestroy“: true,
                            „oLanguage“: {
                                „sUrl“: oLanguage
                            },
                            „bServerSide“: false,
                            „aoColumns“: aoColumnTitles,
                            „sAjaxSource“: „../JS/demodata.js“,
                            „fnServerData“: function ( sSource, aoData, fnCallback, oSettings ) {
                              oSettings.jqXHR = $.ajax( {
                                „dataType“: ‚json‘,
                                „type“: „GET“,
                                „url“: sSource,
                                „data“: aoData,
                                „success“: fnCallback
                              } );
                            },
                           „oTableTools“: {
                                „sRowSelect“: „single“
                            }
                        }
                    );
                    }
                },
                url: lUrl
                });

Über die einzelnen Steuerungsparameter der DataTables, solltet Ihr Euch in den Beispielen oder direkt in der API Beschreibung anschauen.

Im letzten Teil folgen dann noch zwei Funktionen, mit denen die Selektion und der Doppelklick ermöglicht werden, sowie der Abschluss eines ordentlich formatierten HTML Dokuments.

/* Add a click handler to the rows – this could be used as a callback */
                $(„#demoTable“).click(function(event) {
                    $(oTable.fnSettings().aoData).each(function (){
                        $(this.nTr).removeClass(‚row_selected‘);
                    });
                    $(event.target.parentNode).addClass(‚row_selected‘);
                });
                               
                /* Add a click handler for the selected row */
                $(‚#demoTable‘).dblclick( function() {
                    var anSelected = fnGetSelected( oTable );
                    var anSelectedData = oTable.fnGetData( anSelected[0] );
                    var selectedRowData = anSelectedData;
                    if (selectedRowData.length < 7) {
                        alert(selectedRowData);
                    }
                });
            });

        /* Get the rows which are currently selected */
        function fnGetSelected( oTableLocal )
        {
            var aReturn = new Array();
            var aTrs = oTableLocal.fnGetNodes();
           
            for ( var i=0 ; i<aTrs.length ; i++ )
            {
                if ( $(aTrs[i]).hasClass(‚row_selected‘) )
                {
                    aReturn.push( aTrs[i] );
                }
            }
            return aReturn;
        }
               
       
</SCRIPT>
</HEAD>
<BODY
id=dt_example contentEditable=true>
<DIV
id=container>
<DIV
class=“full_width big“></DIV>
<DIV id=grid>
<TABLE
id=demoTable class=display border=0 cellSpacing=0 cellPadding=0>
<THEAD></THEAD>
<TBODY></TBODY>
<TFOOT>
<TR>

<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
</TR></TFOOT></TABLE></DIV></DIV></BODY></HTML>

Damit haben wir alle Bausteine zusammen. Und damit Ihr das Beispiel in der Praxis leichter nachvollziehen könnt, habe ich Euch eine verwaltete Lösung auf meinem SkyDrive zur Verfügung gestellt.

So, nun wünsche ich viel Spaß mit der Lösung oder auch der Verwirklichung Eurer eigenen Anforderungen an eine Datentabelle.

 

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