MOSS XSLT weather webpart

Article
03/13/2010

One of my Colleagues happen to ask me how do we show the weather web-part on our Sharepoint Portal. The Solution was pretty simple and thought I should share this with you all. Following are the steps:

1. Add the RSS web-part on your sharepoint portal (MOSS, Sharepoint 2007) site.

2. Give the RSS feed as: https://weather.yahooapis.com/forecastrss?p=08810 (p is the Parameter for your zip code)

3. Now the most important part, open the XSL editor of your RSS web-part and remove everything from there and then just paste one of the XSL codes (show below) into that. Thats it you are done, your weather web-part is ready now. So all that is important here is XSL.

Following are the views that you can have from the XSL

So the XSL (first variation)is:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="https://www.w3.org/1999/XSL/Transform" xmlns:yweather="https://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="https://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output method="html" indent="yes"/>

<xsl:template match="/">

<xsl:variable name="scale">
<xsl:value-of select="rss/channel/yweather:units/@temperature"/>
</xsl:variable>

<table width="100%" border="0" cellspacing="0" cellpadding="3" class="Normal">
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>Weather Report - <xsl:value-of select="rss/channel/item/title"/></strong></td>
</tr>
<tr>
<td><strong>Currently <font size="4"><xsl:value-of select="rss/channel/item/yweather:condition/@temp"/><xsl:text>°</xsl:text><xsl:copy-of select="$scale" /></font></strong><br/>
High <xsl:value-of select="rss/channel/item/yweather:forecast/@high"/> <xsl:text>°</xsl:text><xsl:copy-of select="$scale" /> <br/>
Low <xsl:value-of select="rss/channel/item/yweather:forecast/@low"/> <xsl:text>°</xsl:text><xsl:copy-of select="$scale" /> </td>
<td>
<xsl:text disable-output-escaping="yes"><img src="https://us.i1.yimg.com/us.yimg.com/i/us/we/52/</xsl:text>
<xsl:value-of select="rss/channel/item/yweather:condition/@code"/>
<xsl:text disable-output-escaping="yes">.gif"/></xsl:text>
<br/>
<xsl:value-of select="rss/channel/item/yweather:condition/@text"/></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>2 Day Forecast</strong></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="3" class="Normal">
<xsl:for-each select="(rss/channel/item/yweather:forecast)[position() < 3]">
<tr>
<td><xsl:value-of select="@day"/></td>
<td>
<xsl:text disable-output-escaping="yes"><img src="https://us.i1.yimg.com/us.yimg.com/i/us/we/52/</xsl:text>
<xsl:value-of select="@code"/>
<xsl:text disable-output-escaping="yes">.gif"/></xsl:text>
</td>
<td><xsl:value-of select="@text"/><br/>High: <xsl:value-of select="@high"/>
<xsl:text>°</xsl:text><xsl:copy-of select="$scale" />
Low: <xsl:value-of select="@low"/><xsl:text>°</xsl:text><xsl:copy-of select="$scale" />
</td>
</tr>
</xsl:for-each>
</table></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>More Current Condition Details</strong></td>
</tr>
<tr>
<td colspan="2"><table border="0" cellspacing="0" cellpadding="3" class="Normal">
<tr>
<td>High </td>
<td><xsl:value-of select="rss/channel/item/yweather:forecast/@high"/> <xsl:text>°</xsl:text><xsl:copy-of select="$scale" /></td>
</tr>
<tr>
<td>Low </td>
<td><xsl:value-of select="rss/channel/item/yweather:forecast/@low"/> <xsl:text>°</xsl:text><xsl:copy-of select="$scale" /></td>
</tr>
<tr>
<td>Wind Chill </td>
<td><xsl:value-of select="rss/channel/yweather:wind/@chill"/> <xsl:text>°</xsl:text><xsl:copy-of select="$scale" /></td>
</tr>
<tr>
<td>Wind Speed </td>
<td>
<xsl:value-of select="rss/channel/yweather:wind/@speed"/>
<xsl:text> </xsl:text>
<xsl:value-of select="rss/channel/yweather:units/@speed"/>
</td>
</tr>
<tr>
<td>Wind Direction </td>
<td>
<xsl:value-of select="rss/channel/yweather:wind/@direction"/>
</td>
</tr>
<tr>
<td>Sunrise </td>
<td>
<xsl:value-of select="rss/channel/yweather:astronomy/@sunrise"/>
</td>
</tr>
<tr>
<td>Sunset </td>
<td>
<xsl:value-of select="rss/channel/yweather:astronomy/@sunset"/>
</td>
</tr>
<tr>
<td>Latitude </td>
<td><xsl:value-of select="rss/channel/item/geo:lat"/></td>
</tr>
<tr>
<td>Longitude </td>
<td><xsl:value-of select="rss/channel/item/geo:long"/></td>
</tr>
<tr>
<td>
<p><xsl:text> </xsl:text></p>
<p>
<a href="https://weather.yahoo.com" target="_blank"></a>
</p>
</td>
</tr>
</table></td>
</tr>
</table>

</xsl:template>

</xsl:stylesheet>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Second Alternative (second variation):

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:template match="/">

<xsl:variable name="scale">
<xsl:value-of select="rss/channel/yweather:units/@temperature"/>
</xsl:variable>

</xsl:template>

</xsl:stylesheet>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

XSL Number:- 3

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="https://www.w3.org/1999/XSL/Transform" xmlns:yweather="https://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="https://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output method="html" indent="yes"/>

<xsl:template match="/">
<style type="text/css">
.location {
width: 100%;
text-align: left;
font-family: Tahoma;
font-size: 10pt;
background: #ffffff;
color: #075199;
border-collapse:collapse;
border-color: #ace #ebf3fb #ace;
}

.location a:link, a:visited { text-decoration: none; }
.location a:hover { text-decoration: underline;}

.weather-condition {
padding: 0px; 0px; 0px; 0px;
width: 80px;
min-width: 80px;
max-width: 100px;
text-align: center;
font-family: Tahoma;
font-size: 8.4pt;
bacground: #ffffff;
color: #666;
}

.temprature {
width: 50px;
max-width: 70px;
padding: 3px 6px 3px 6px;
text-align: center;
font-family: Tahoma;
font-size: 10.5pt;
border-collapse:collapse;
border-color: #ace #ebf3fb #ace;
color: #333333;
font_weight: 700;
}

.high-low-text {
padding-right: 3px;
text-align: left;
font-family: Tahoma;
font-size: 8.4pt;
font-weight: 700;
color: #666;
}
.high-low-value {
text-align: left;
font-family: Tahoma;
font-size: 8.4pt;
font-weight: 400;
color: #075199;
color: #333333;
}
</style>
<table align="center">
<tr>
<td class="location" colspan="3">
<a class="location" href="{rss/channel/item/link}">
<xsl:value-of select='rss/channel/yweather:location/@city'/>
<xsl:choose>
<xsl:when test="rss/channel/yweather:location/@country='US'">
, <xsl:value-of select='rss/channel/yweather:location/@region'/>
</xsl:when>
<xsl:otherwise>
, <xsl:value-of select='rss/channel/yweather:location/@country'/>
</xsl:otherwise>
</xsl:choose>
</a>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="weather-condition" >
<img src="https://us.i1.yimg.com/us.yimg.com/i/us/we/52/{rss/channel/item/yweather:condition/@code}.gif" />
</td>
</tr>
<tr>
<td class="weather-condition" >
<xsl:value-of select='rss/channel/item/yweather:condition/@text'/>
</td>
</tr>
</table>
</td>
<td class="temprature" >
<xsl:value-of select='rss/channel/item/yweather:condition/@temp'/>
<xsl:text>°</xsl:text>
</td>
<td>
<table>
<tr>
<td class="high-low-text">High:</td>
<td class="high-low-value">
<xsl:value-of select="rss/channel/item/yweather:forecast/@high"/>
<xsl:text>°</xsl:text>
</td>
</tr>
<tr>
<td class="high-low-text">Low:</td>
<td class="high-low-value">
<xsl:value-of select="rss/channel/item/yweather:forecast/@low"/>
<xsl:text>°</xsl:text>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr style="color:#C0C0C0; height:1px; padding: 0px 0px 0px 0px"/>
</xsl:template>
</xsl:stylesheet>

MOSS XSLT weather webpart

Additional resources