Add Local Weather Web Part to SharePoint/MOSS


Adding the Weather to a web part in MOSS is not tricky, but making it look good takes some effort.  So I decided to do all the hard work for you. Actually I just bundled up many other ideas from other users and made it simple for you to add images and weather to a web part in SharePoint that looks like this:

Like I said I have packaged everything to make it really easy.  Just follow all these steps and you are in business.

 

So here are 5 simple steps to get the weather web part of your SharePoint site

 


Step 1

We need a place to store the images (You will download the images in a minute) so we need to create a folder in our style library.  I am assuming you are using a publishing portal for this.  If you are not using this template you will have to edit the XSL.  If you follow this you will not have to edit anything.

 

So, create a folder named weather.com_images in this location – /style library/Images See below.


Step 2
Download the zip with the images
Once you have downloaded and unziped the file you will have 3 folders of images.  Copy these three folders to your new folder you created in your images folder.  Here is the easiest way:
Open the images folder in Explorer View and drag and drop the folders in there.

Now the images are in place and we will create our web part.

Step 3
Now to create our web part we will use a built in web part called the XML Web Part.  Add this wherever you wish on your page.

Step 4
Now we need to edit this web part and paste the correct code into it.
Just copy and paste the following into the XML Link section.  Be sure to change the zip code after local to the zip code of your choice.

Step 5

We now need to paste some XSL to format the link and add references to our images.  If you used the directory above for your images then all you need to do is copy and paste the below XSLT into the XSL Editor and save it.  Make no changes unless the images are in another location.

 <?xml version=”1.0″ encoding=”ISO-8859-1″ ?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform“>
<xsl:output method=”html” indent=”yes” encoding=”iso-8859-1″ />
<xsl:template match=”/weather”>
<xsl:variable name=”med-img-dir”>/Style Library/Images/Weather.com_Images/61×61</xsl:variable>
<table width=”100%”>
<tr>
<td align=”center” colspan=”2″>
<xsl:variable name=”zipcode”>
<xsl:value-of select=”loc/@id”/>
</xsl:variable>
<b><a href=”http://www.weather.com/weather/local/{$zipcode}”><xsl:value-of select=”loc/dnam”></xsl:value-of></a></b>
</td>
</tr>
<tr>
<!– Weather Channel Logo –>
<td valign=”bottom”>
<a href=”http://www.weather.com” target=”_none”>
<img src=”/Style%20Library/Images/Weather.com_Images/logos/TWClogo_61px.png” alt=”Weather Channel Logo” border=”0″ />
        </a>
</td>
        <!– Current Weather Conditions –>
<td valign=”top”>
<table width=”100%”>
<tr>
<td valign=”middle”>
<table width=”80%”>
<tr>
<td>
<!– Weather Conditions Icon –>
<xsl:variable name=”img-ext”>png</xsl:variable>
<xsl:variable name=”iconnumber”>
<xsl:value-of select=”cc/icon”></xsl:value-of>
</xsl:variable>
<img src=”{$med-img-dir}/{$iconnumber}.{$img-ext}”  alt=”{$iconnumber}.{$img-ext}” width=”61″ height=”61″ />
</td>
<!– Current Temp –>
<td valign=”middle”>
<span style=”font-size:20px;font-weight:bold;”><xsl:value-of select=”cc/tmp”></xsl:value-of>�F</span><br/>
<xsl:value-of select=”cc/t”></xsl:value-of>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Feels Like: <xsl:value-of select=”cc/flik”></xsl:value-of>�F<br/>
Humidity: <xsl:value-of select=”cc/hmid”></xsl:value-of>%<br/>
Wind:  <xsl:value-of select=”cc/wind/t”></xsl:value-of> at <xsl:value-of select=”cc/wind/s”></xsl:value-of> mph<br/>
<input TYPE=”TEXT” SIZE=”20″ VALUE=”Enter city/zip” STYLE=”font-size:10;” name=”where” onFocus=”this.value=”;” />
<input TYPE=”image” src=”{$med-img-dir}/transparent_orange_go.gif” alt=”transparent_orange_go.gif” onClick=”window.open(‘http://www.weather.com/outlook/travel/local/&#8217; + document.getElementById(‘where’).value);”  ALIGN=”ABSMIDDLE” width=”28″ height=”19″ />
</td>
</tr>
</table>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>

That is it.  You should now have everything you need to display weather in a web part on your page.

Advertisements
This entry was posted in MOSS Tips and Tricks. Bookmark the permalink.

13 Responses to Add Local Weather Web Part to SharePoint/MOSS

  1. mahmood says:

    cool code, how I can change the tempreture from F to C

  2. Unknown says:

    i notice in your screenshot and in when deployed the degree symbol doesn\’t display. any idea on that?

  3. Matt says:

    To get the degree symbol to work, in the stylesheet you need to replace square with ° this will render the symbol appropriately.

  4. Matt says:

    … you also have to change the encoding to UTF-8. This change should be done on line 4 for the XSL:output element…<xsl:output method="html" indent="yes" encoding="iso-8859-1" /> = <xsl:output method="html" indent="yes" encoding="UTF-8" />

  5. and says:

    @mahmood:replace <xsl:value-of select="cc/tmp"></xsl:value-of> with <xsl:value-of select="round((5 div 9)*(cc/tmp – 32))"></xsl:value-of>likewise for cc/flik

  6. javajunkiee says:

    any way to add code to bypass corporate firewall with generic id and password?

  7. Maria Fitzsimons says:

    I just found this blog post and it looks like it just what we need for our site. I tried to download the images from the skydrive but it stated the location or the items expired. Can you send the images to me?

  8. donpistulka says:

    @Maria Thank you I have updated the link.

    • Azfar says:

      I am having issues in downloading the images. It takes to skdrive site with no download links. Can you provide me a link where I can easily download the images ?

  9. Beth says:

    The windows live link doesn’t work. Can you republish?

  10. Khoi Nguyen says:

    I tried the link to download the images and it is not working. Thank you.

  11. donpistulka says:

    As of now there wil be no weather Channel post. I will post using a different service shortly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s