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.
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.
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.
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>
<METAcontent=”text/html; charset=utf-8″ http-equiv=content-type>
<SCRIPTtype=text/javascript src=”../../ClientGlobalContext.js.aspx”></SCRIPT><SCRIPTtype=text/javascript charset=utf-8 src=”../JS/jQuery.js”></SCRIPT>
<SCRIPTtype=text/javascript charset=utf-8 src=”../JS/json2.js”></SCRIPT>
<SCRIPTtype=text/javascript charset=utf-8 src=”../JS/jQuery.dataTables.js”></SCRIPT>
<SCRIPTtype=text/javascript charset=utf-8 src=”../JS/ZeroClipboard.js”></SCRIPT>
<SCRIPTtype=text/javascript charset=utf-8 src=”../JS/TableTools.js”></SCRIPT>
<LINKrel=stylesheet type=text/css href=”../CSS/crmTable.css”><LINKrel=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.
<SCRIPTtype=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 > ) {
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= ; i<aTrs.length ; i++ )
{
if ( $(aTrs[i]).hasClass(‘row_selected’) )
{
aReturn.push( aTrs[i] );
}
}
return aReturn;
}
</SCRIPT>
</HEAD>
<BODYid=dt_example contentEditable=true>
<DIVid=container>
<DIV class=”full_width big”></DIV>
<DIVid=grid>
<TABLEid=demoTable class=display border=0 cellSpacing=0 cellPadding=>
<THEAD></THEAD>
<TBODY></TBODY>
<TFOOT>
<TR>
<TH> </TH>
<TH> </TH>
<TH> </TH>
<TH> </TH>
<TH> </TH>
<TH> </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:Microsoft– Dynamics– CRM– 2011– DataTables– jQuery– Anpassungen– Tipps & Tricks
Einsortiert unter:Anpassungen, CRM 2011, CRM 2011 Online, Tipps & Tricks
