Create A Weather Web Part for SharePoint

UPDATE: June 2, 2011
I made some adjustments to the XSLT. If you've had problems getting this to work previously, you might want to try it again.

I wanted to add weather information to a SharePoint site (a "My Site" to be exact), but I wanted something relatively simple.  Using the Page Viewer or Content Editor web parts was not really giving me what I wanted since that involved including snippets of markup and javascript which might also require signing up for the privilege.  I also wasn't keen on including all of their branding.  Just tell me what I'm missing outside when I'm stuck inside.

So I did some messing around with the RSS Viewer web part and got something working.  I then found that the RSS Viewer has a 30-minute cache restriction that cannot be changed.  I don't want to know how warm it was 29 minutes ago, I want to be able to refresh and know what the temperature is now.  So I switched to the XML web part which is what I should have used to start with.

This was the result:


And here are the steps to that end:
  • Add an XML Web Part to your page.
  • Modify the Shared Web Part.
  • In the "XML Link" field enter the URL to the appropriate Yahoo! Weather RSS Feed.  (For Kevil, KY the url would be "http://weather.yahooapis.com/forecastrss?u=f&w=2432010".)
  • Click the "XSL Editor..." button and paste the following into the text area:
    <!--?xml version="1.0" encoding="ISO-8859-1"?-->
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
      <xsl:output method="html" indent="yes" />
      <xsl:template match="/">
    
        <style type="text/css">
          #tywpMain {position:relative;padding:0;margin:0;height:80px;}
          #tywpLocation {font-family:"Arial Black";font-size:16pt;color:#fff;background-color:#f0f0f0;padding:10px;}
          #tywpTemperature {position:absolute;top:25px;left:80px;font-family:Arial Narrow;font-size:32pt;font-weight:bolder;color:#000;display:block;width:80px;text-align:center;z-index:10;}
          #tywpTemperatureHigh {position:absolute;top:40px;left:170px;font-family:Arial Narrow;font-size:8pt;font-weight:bolder;color:#800000;}
          #tywpTemperatureLow {position:absolute;top:50px;left:170px;font-family:Arial Narrow;font-size:8pt;font-weight:bolder;color:#000080;}
          #tywpConditionImage {position:absolute;top:25px;left:0;right:80px;display:block;width:80px;text-align:center;}
          #tywpCondition {position:absolute;top:67px;left:0px;right:80px;font-family:Arial;font-size:8pt;font-weight:bolder;color:#c0c0c0;display:block;width:80px;text-align:center;}
        </style>
    
        <xsl:variable name="Scale">
          <xsl:value-of select="rss/channel/yweather:units/@temperature" />
        </xsl:variable>
        <xsl:variable name="ConditionImage" select="rss/channel/item/yweather:condition/@code" />
    
        <div id="tywpMain">
          <div id="tywpLocation">
            <xsl:value-of select="rss/channel/yweather:location/@city" />,
            <xsl:value-of select="rss/channel/yweather:location/@region" />
          </div>
          <span id="tywpTemperature">
            <xsl:value-of select="rss/channel/item/yweather:condition/@temp" />
            <xsl:text>°</xsl:text>
            <xsl:copy-of select="$Scale" />
          </span>
          <span id="tywpTemperatureHigh">
            High <xsl:value-of select="rss/channel/item/yweather:forecast/@high" /><xsl:text>°</xsl:text>
          </span>
          <span id="tywpTemperatureLow">
            Low <xsl:value-of select="rss/channel/item/yweather:forecast/@low" /><xsl:text>°</xsl:text>
          </span>
          <span id="tywpConditionImage">
            <img src="http://us.i1.yimg.com/us.yimg.com/i/us/we/52/{$ConditionImage}.gif" />
          </span>
          <span id="tywpCondition">
            <xsl:value-of select="rss/channel/item/yweather:condition/@text" />
          </span>
        </div>
      </xsl:template>
    </xsl:stylesheet>
    

And that's it!

Obviously you would change the WOEID to match your own target city.  More information on how to determine that can be found on the Yahoo! Developer Network page relating to the Yahoo! Weather RSS Feed.

This was just a quick'n'dirty option using out of the box components.  No SharePoint Designer.  No Visual Studio.  No jQuery.  Not that those things are bad.  Not at all.  They just are not reasonable starting positions for Joe (or Jane) Average SharePoint User.

So that said, I am sure there are plenty of ways to improve on the results.  If this was helpful and/or you have a different/better approach, I'd love to hear about it!

Comments

  1. I am getting a error "Failed to apply XSLT to the content."

    Can yolu help in this

    ReplyDelete
  2. I've gone through the steps here and everything seems to work fine for me. I even copied the XSL straight off the page and pasted it into the SharePoint XSL editor to make sure that Blogger hadn't introduced any strangeness in terms of stray carriage returns and whatnot.

    Have you modified either the original link or the XSL in any way?

    ReplyDelete
  3. How do do I get the forecasts for the next day to show up to the right? I'm not that great with XSLT and I haven't had any luck at all trying to figure it out.

    Any help would be awesome!

    ReplyDelete
  4. Sorry for the delay, Noel. Hopefully this helps.

    http://blog.thomasgehrke.com/2011/12/sharepoint-weather-webpart-tomorrow.html

    ReplyDelete

Post a Comment