SharePointCommunity
Die deutschsprachige Community für SharePoint, Office 365 und mit Azure

Visuelle Verbesserung der Datenansicht

Hallo zusammen,

wie versprochen erläutere ich heute wie man den relativ langweiligen optischen Look eines Dataview Webparts verbessern kann.

Dafür arbeite ich mit XSLT. XSLT bietet mir die Möglichkeit die Daten die via XML bezogen werden zu formatieren. Weitergehende Hilfe dazu bekommt man über die SPD Hilfe oder über folgenden Link: XSL Transformations (XSLT) Version 2.0

Ausgangslage in diversen Sharepoint Anfragen ist oft eine recht umfangreiche Liste die komfortabel und parametrisierbar über einen Dataview dargestellt werden soll, die Übersichtlichkeit lässt hier oft zu wünschen übrig da alle Informationen rein textuell dargestellt werde. Daher habe ich es mir zur Gewohnheit gemacht, ein- zwei Spalten (Je nach Umfang und Sinnhaftigkeit) nicht textuell sondern mit einem verständlichen und Begriffsbezogenen Icon darzustellen.

Es sollte unbedingt drauf geachtet werden das das zu verwendende Icon auch einen Bezug zu dem Begriff den es repräsentieren soll darstellt. Wer nicht weiß wo es entsprechende Icons gibt dem sei folgender Blog Eintrag ans Herz gelegt: The Best High Quality FREE ICONS.

Als Basis für meine Erläuterung verwende ich den letzte Woche erstellten Dataview. Zur Erinnerung: Der Dataview Webpart zeigt Messen an die binnen der nächsten 30 Tage starten. Ich erweitere diesen jetzt noch um eine Spalte wo das jeweilige Land hinterlegt werden kann. Als Beispiel verwende ich die Länder Spanien, Deutschland und die USA.

Sharepoint-008

Als nächstes begebe ich mich wieder in den Sharepoint Designer und ergänze den Dataview um die gerade erstellte Spalte.

Sharepoint-009

Sharepoint-010

Das Ergebnis sieht dann folgendermaßen aus:

Sharepoint-011

Wie versprochen, noch recht unschön. Also fangen wir an:

Im Dataview interessiert mich die Start- und End Uhrzeit der Messen nicht, daher blende ich diese folgendermaßen aus:

1. Linksklick auf die Spalte die ich verändern möchte dann auf den Pfeil und Auswahl DataTime Fomatting Options

Sharepoint-012

2. Bei Show Time den Haken entfernen, OK drücken und das gleiche für die Endzeit wiederholen. Fertig!

So sieht dann das Ergebnis aus:

Sharepoint-013

Über diese Methode lassen sich übrigens alle Felder formatieren, dies ist besonders bei Multitextspalten sehr wichtig. Diese sind per Default nicht formatiert und der Inhalt wird als HTML angezeigt!

In nächsten Schritt geht es darum ein paar visuelle Aspekte zu setzen. Zukünftig sollen uns, anstatt des ausgeschriebenen Landes, die entsprechenden Länderflaggen entgegen wehen!

1. Flaggen Icons beziehen -> Klick mich
2. Flaggen Icons in eine Dokumenten- oder Bilderbibliothek hochladen
3. SplitView im SPD aktivieren

Sharepoint-014

4. Linksklick auf die Country Spalte
5. Im Quelltext Bereich den jetzt markieren Text (<xsl:value-of select="@Country" />) mit dem folgenden ersetzen:

<span>
<xsl:if test="contains(@Country, 'Germany')"><img src="http://litwaredemo/test/Shared%20Documents/de.gif" style="margin-right:5;" alt="Germany" /></xsl:if>
<xsl:if test="contains(@Country, 'Spain')"><img src="http://litwaredemo/test/Shared%20Documents/es.gif" style="margin-right:5;" alt="Spain" /></xsl:if>
<xsl:if test="contains(@Country, 'USA')"><img src="http://litwaredemo/test/Shared%20Documents/us.gif" style="margin-right:5;" alt="USA" /></xsl:if>
</span>

Erläuterung:
Ich verwende im Gegensatz zu vielen anderen die Contains Variante, damit lässt sich dieses Verfahren sogar für Spalten mit Mehrfachauswahl benutzen.Sharepoint-015

6. Speichern! Wir sind fertig, das Ergebnis sollte dann so aussehen:

 Sharepoint-016

Es fehlt noch der Beweis das es auch mit Mehrfachauswahl funktioniert, here we go:

Sharepoint-017

Mein Beispiel bezieht sich jetzt zwar auf die Länder, lässt aber eurer Kreativität noch viel Spielraum. Wir verwenden bspw. in unserer Abwesenheitsliste Icons zur Darstellung der Abwesenheits Art, Arzt für Krank, Palme für Urlaub, usw..

Beim nächsten mal widme ich mich dann noch mal dem Feintuning des Dataview, danach steige ich in die höhere Kunst des BDC ein, bzw. versuche einem BDC Neuling die ersten Schritte zum Prototypen zu erläutern.

Danke fürs Lesen!

Viele Grüße
Daniel


Bereitgestellt 25 Jan 2009 21:18 von Daniel Drinhausen

Kommentare

TrackBack geschrieben SharePoint Kaffeetasse 108
on 18 Mrz 2009 14:06

SharePoint Kaffeetasse 108