Wer einen Wetter-Webpart im eigenen SharePoint bereitstellen will, kann das heute so schnell tun, dass man darüber kaum mehr nachdenken muss. Hier liefere ich eine kurze Anleitung zum Ziel:
Folgende Werkzeuge werden benötigt:
- Standard XML-Viewer Webpart
- Wetter-API
- Ansprechende Wetter-Icons
Und so geht’s:
Um Wetterdaten anzeigen zu können, muss eine API mit entsprechenden Informationen zur Verfügung stehen. Wetter-APIs werden von vielen Anbietern bereitgestellt. Ruft man eine API über einen Browser auf, sind die darin befindlichen Daten im Detail ersichtlich. Dies ist vor allem dazu notwendig, um später die XSL-Struktur nach eigenen Wünschen beschreiben zu können.
Die zur Verfügung stehenden Wetterdaten meiner API-Schnittstelle sehen wie folgt aus:
[code language=“css“]
<current>
<city id="2950159" name="Berlin">
<coord lon="13.41" lat="52.52"/>
<country>DE</country>
<sun rise="2014-02-19T06:13:11" set="2014-02-19T16:27:04"/>
</city>
<temperature value="5.27" min="4" max="6.3" unit="celsius"/>
<humidity value="63" unit="%"/>
<pressure value="1010.2" unit="hPa"/>
<wind>
<speed value="2.9" name="Light breeze"/>
<direction value="230" code="SW" name="Southwest"/>
</wind>
<clouds value="64" name="broken clouds"/>
<precipitation mode="no"/>
<weather number="500" value="leichter Regen" icon="10d"/>
<lastupdate value="2014-02-19T08:44:55"/>
</current>
[/code]
Jeder Knoten liefert verschiede Informationen, welche auch ineinander geschachtelt sein können. Mein Wetter-Webpart soll in einer bereits festgelegten Ansicht dargestellt werden:
Die Informationen, welche ich also für die Anzeige meines Wetter-Webparts benötige sind folgende:
- „icon“ aus dem Knoten „weather“ (hier mit dem Wert „10d“)
- „name“ aus dem Knoten „city“ (hier mit dem Wert „Berlin“)
- „value“ aus dem Knoten „temperature“ (hier mit dem Wert „5.27“)
- „value“ aus dem Knoten „weather“ (hier mit dem Wert „leichter Regen“)
Diese Informationen muss ich nun in meine XSL-Struktur verpacken, damit später mein gewünschtes Ergebnis zu sehen ist.
Mein XSL hat folgende Struktur:
[code language=“css“]
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
<xsl:output method="html" indent="yes" encoding="utf-8" />
<xsl:template match="/">
<html>
<body>
<table class="WeatherWP" cellpadding="0" cellspacing="0">
<tr>
<td>
<xsl:call-template name="weatherIcon"/>
</td>
<td>
<xsl:apply-templates/>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template name="weatherIcon">
<xsl:variable name="weather">
<xsl:value-of select="@value"></xsl:value-of>
</xsl:variable>
<xsl:variable name="icon">
<xsl:value-of select="//current/weather/@icon"></xsl:value-of>
</xsl:variable>
<div class="icon{$icon}">
<img src="/_layouts/15/images/blank.gif" alt="{$weather}" title="{$weather}" />
</div>
</xsl:template>
<xsl:template match="city">
<div class="City">
<xsl:value-of select="@name"/>
</div>
</xsl:template>
<xsl:template match="temperature ">
<div class="Temperature">
<xsl:value-of select=’format-number(@value, "0")’/>
<xsl:text>℃</xsl:text>
</div>
</xsl:template>
<xsl:template match="weather">
<div class="Weather">
<xsl:value-of select="@value"/>
</div>
</xsl:template>
</xsl:stylesheet>
[/code]
Im oberen Bereich der Tabelle übergebe ich im ersten TD das XSL-Template mit dem Namen „weatherIcon“, im zweiten TD alle anderen Templates. Wenn man sich das XSL und die in der API bereitstehenden Knoten in Ruhe anschaut, erklärt sich die Zusammensetzung fast von selbst. Wenn hierzu weitere Informationen benötigt werden, gehe ich nach einem entsprechenden Hinweis gern noch einmal im Detail darauf ein.
Die daraus entstehende HTML-Struktur, welche mir im Browser angezeigt wird, sieht wie folgt aus:
[code language=“css“]</pre>
<table class="WeatherWP" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div class="icon10d">
<img title="" alt="" src="/_layouts/15/images/blank.gif" />
</div>
</td>
<td>
<div class="City">Berlin</div>
<div class="Temperature">5℃</div>
<div class="Weather">leichter Regen</div>
</td>
</tr>
</tbody>
</table>
[/code]
CSS-Anpassungen können dann beliebig vorgenommen werden. Ich übergebe für jedes Icon ein entsprechendes Bild per CSS, welches sich an einer Klasse orientiert, die aus dem Begriff „icon“ und dem jeweilig gelieferten Wert aus der API zusammengesetzt ist und verschiebe die Informationen an die von mir gewünschten Stellen.
Um schließlich alles im SharePoint anzeigen lassen zu können, muss im ersten Schritt der Standard XML-Viewer Webpart einer beliebigen Webpartzone hinzugefügt werden. Dann auf „Webpart bearbeiten“ klicken und in die Konfiguration des Webparts übergehen. Im Feld „XML-Verknüpfung“ wird nun die API-URL eingefügt. Sie dient an dieser Stelle als Lieferant der entsprechenden Daten und verknüpft den Webpart mit diesen.
Über den Button „XSL-Editor“ öffnet sich ein kleines Fenster, in welches nun die XSL-Struktur übertragen wird. Auf „übernehmen“ und anschließend auf „OK“ klicken und schon ist der Wetter-Webpart wie gewünscht sichtbar.
