Aggregierte Kacheln im XsltListViewWebPart mit Hilfe von XSL

Der XsltListViewWebPart kann mit Hilfe eines XSL-Scripts eine Zusammenfassung der Listenelemente bereitstellen und per HTML/CSS auf dem Webpart rendern u.a. in Kacheln. Das Aussehen und das Format der Kacheln werden durch CSS definiert und können somit individuell leicht angepasst werden.

(siehe Beispiel in Abbildung 1).

 

bild

 Abbildung 1: Beispiel

 

Webpart konfigurieren

Die XSL-Datei muss im EditorPart eines XsltListViewWebParts unter Verschiedene/ XSL-Link angegeben werden. Diese Datei kann fest im Hive z.B. unter TEMPLATE\LAYOUTS\XSL oder in einer DocumentLibrary z.B. Style Library, für jeden User mit entsprechenden Berechtigungen änderbar, hinterlegt werden. Im Beispiel verweist der XSL-Link auf „/_layouts/xsl/ControlsAllBySiteTilesFindings.xsl“.

Da das XSL-Skript sich auf die ausgewählte View (EditorPart unter Listenansichten/Ausgewählte Ansicht) und deren QueryResponse inkl. RowLimit bezieht, ist es bei Statistiken mit mehr Datensätzen als das RowLimit (Default 30) der aktuellen View ratsam, eine eigene separate View dafür zu erstellen und zu nutzen. In der View sollte das RowLimit entsprechend erhöht werden und die auszuwertenden Felder angezeigt werden. Je nach Bedarf kann auch ein Filter definiert werden, damit nur die relevanten Datensätze in der Statistik berücksichtigt werden.

 

XSL Verarbeitung

Das XSL-Skript wird in unserem Beispiel auf der QueryResponse der View angewendet. Die QueryResponse einer View ist das XML, welches vom Server für die View zur Verfügung gestellt wird. Es ist sehr hilfreich bei der Arbeit mit dem XSL und der QueryResponse die XML Struktur der QueryResponse der ausgewählten View zu kennen. Mit dem folgenden XSL-Snippet wird das XML der View im Webpart ausgegeben:

<?xmlversion="1.0"encoding="utf-8"?>

<xsl:stylesheetversion="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   <xsl:outputmethod="xml"version="1.0"encoding="UTF-8"indent="yes"/>

   <xsl:templatematch="/">

       <xmp>

           <xsl:copy-ofselect="*"/>

       </xmp>

   </xsl:template>

</xsl:stylesheet>

Code 1: XslDebug.xsl

 

Dieses XML kann man als Datei speichern und im Visual Studio zu Testzwecke verwenden. Dazu muss man das XSL in Visual Studio öffnen und im Menü „XML“ auf „Start XSLT Debugging“ oder „Start XSLT Without Debugging“ klicken. Dann wählt man die XML Datei aus und erhält dann das Ergebnis zu dem XML. Das ist eine sehr gute Möglichkeit das XSL zu entwickeln und zu debuggen.

 

Aufbau der XSL für die Kacheln

Die XSL-Datei (siehe Code 2) besteht aus dem XML Header und dem XSL Stylesheet Tag. Im Stylesheet Tag werden die wichtigsten Namespaces definiert, um diese später zu verwenden. Im folgenden xsl:output Tag wird das Ausgabeformat bestimmt, in unserem Fall wollen wir HTML/CSS generieren. Dann wird am Anfang (match „/“) das Template für die dsQueryResponse angewendet und dann wird für das Xml-Tag „dsQueryResponse“ HTML/CSS Code generiert. Dazu gehört der Style im text/css Format und der oberste Div Container (class=sitestiles) mit einer Überschrift. Im sitestiles Div werden die Daten entsprechend dem Kachel-Design angeordnet und durch das CSS formatiert. Die Kacheln enthalten die Anzahl der zutreffenden Elemente und den Text des Filters. Die Anzahl wird jeweils mit xsl:value-of select="$<variable name>" im HTML eingesetzt.

Die xsl-Variablen werden durch das XML mit XPATH ermittelt. Bei unserem Beispiel werden aus allen Datensätzen (/dsQueryResponse/Rows/Row) jeweils diejenigen verwendet, bei denen das Feld LintraAmFiStatusFind einen bestimmten Wert besitzt (Row[@LintraAmFiStatusFind='Open']). Diese werden dann mit Count gezählt und in der Variablen gespeichert. Bei dem Attribut/-Feldnamen handelt es sich um den InternalName des Feldes, notfalls muss man im XML nach dem gewünschten Attribut suchen.

 

<?xmlversion="1.0"encoding="utf-8"?>

<!-- Stylesheet initialisieren und Namespaces definieren -->

<xsl:stylesheetversion="1.0"

               exclude-result-prefixes="xsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"              

ddwrt:ghost="show_all">

  

   <!-- Ausgabe als HTML -->

   <xsl:outputencoding="UTF-8"

             method="html"

             indent="no"/>

 

   <!-- Includes -->

   <xsl:includehref="/_layouts/xsl/main.xsl"/>

   <xsl:includehref="/_layouts/xsl/internal.xsl"/>

 

   <!-- Die View bzw. die QueryResponse fängt mit '/' an und es wird der XML Knoten dsQueryResponse als Anker für das HTML/CSS verwendet. -->

   <xsl:templatematch="/">

       <xsl:apply-templatesselect="/dsQueryResponse"/>

   </xsl:template>

   <xsl:templatematch="dsQueryResponse"

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">

       <!-- CSS Definitionen im HTML Style Tag -->

       <styletype="text/css">

.numTiles .tile {

   width:110px;

   height:110px;

   display:inline-block;

   padding:1ex;

   margin:0 0.5ex;

}

 

.numTiles .tile:hover {

   text-decoration: none;

}

 

.numTiles .tile .num {

   color:white;

   font-family:'Segoe UI Light', 'Segoe UI', Tahoma, Arial, Verdana;

   font-size:400%;

   text-align:center;

   display:block;

   text-shadow:black 0px 0px 8px;

}

 

.numTiles .tile .title {

   color:white;

   font-family:'Segoe UI Light', 'Segoe UI', Tahoma, Arial, Verdana;

   text-align:right;

   display:block;

   text-align:center;

   text-shadow:black 0px 0px 8px;

}

 

.numTiles .open {

   background-color: #e60000;

}

 

.numTiles .inprocess {

   background-color: #FFC000;

}

 

.numTiles .done {

   background-color: #8BBC07;

}

 

.numTiles .cancelled {

   background-color: #00008b;

}

h3 {

color: rgba(139, 139, 131, 1);

font-weight: bold;

margin-top: 1em;

margin-bottom: 1ex;

}

.numTiles .total {

/*   background-color: #8b8b83;*/

   background-color: rgba(139, 139, 131, 1);

}

 

.sitestiles {

margin-bottom: 4em;

}

       </style>

       <!-- Xsl Variablen -->

       <xsl:variablename="open"select="count(/dsQueryResponse/Rows/Row[@LintraAmFiStatusFind='Open'])"/>

       <xsl:variablename="inProcess"select="count(/dsQueryResponse/Rows/Row[@LintraAmFiStatusFind='In Process'])"/>

       <xsl:variablename="done"select="count(/dsQueryResponse/Rows/Row[@LintraAmFiStatusFind='Done'])"/>

       <xsl:variablename="cancelled"select="count(/dsQueryResponse/Rows/Row[@LintraAmFiStatusFind='Cancelled'])"/>

       <xsl:variablename="all"select="count(/dsQueryResponse/Rows/Row)"/>

       <!-- HTML Struktur bzw. Kacheln -->

       <h3>Status Overview of all Findings</h3>

       <divclass="sitestiles">

           <divclass="numTiles">

               <aclass="tile open"href="FindingsOpen.aspx">

                   <spanclass="num">

                       <xsl:value-ofselect="$open"/>

                   </span>

                   <spanclass="title">Open</span>

               </a>

               <aclass="tile inprocess"href="FindingsinProcess.aspx">

                   <spanclass="num">

                       <xsl:value-ofselect="$inProcess"/>

                   </span>

                   <spanclass="title">In Process</span>

               </a>

               <aclass="tile done"href="FindingsDone.aspx">

                   <spanclass="num">

                       <xsl:value-ofselect="$done"/>

                   </span>

                   <spanclass="title">Done</span>

               </a>

               <aclass="tile cancelled"href="FindingsCancelled.aspx">

                   <spanclass="num">

                       <xsl:value-ofselect="$cancelled"/>

                   </span>

                   <spanclass="title">Cancelled</span>

               </a>

               <aclass="tile total"href="AllFindings.aspx">

                   <spanclass="num">

                       <xsl:value-ofselect="$all"/>

                   </span>

                   <spanclass="title">All</span>

               </a>

           </div>

       </div>    

   </xsl:template>

</xsl:stylesheet>

Code 2: ControlsAllBySiteTilesFindings.xsl

 

Quellen:

LINTRA QUAM mit Audit Management

https://paylord.wordpress.com/2012/05/05/xslt-dashboard/

https://msdn.microsoft.com/en-us/library/ff602042.aspx

http://tomvangaever.be/blogv2/2011/07/custom-sharepoint-xsl-webpart/