Friday, February 09, 2007

How to use Weather.com to replace the MSNBC weather web part

As most Sharepoint 2003 administrators know, Microsoft discontinued support for their MSNBC Web Parts on February 6, 2007 (KB 929197). Here are some directions for replacing the MSNBC Weather web part by using data provided by Weather.com.

If you look around the Weather.com website, you'll see a link for getting weather on your website using a "Weather Magnet." Unfortunately the weather.com "Weather Magnet" does not work in Sharepoint because of the built-in FORM tags. If you try to follow their directions to insert the script into a content-editor web part, the result is that none of the Sharepoint web part pane buttons will work.

Fortunately, Weather.com provides another means of getting data to your Sharepoint users via an XML file. Therefore you can use the built-in Microsoft XML Web Part to display this data. Here are some quick directions:

1. Sign up for the Weather Channel XML: http://www.weather.com/services/xmloap.html. As part of this process you will get a KEY to use when downloading the XML file from Weather.com.

2. Download the SDK. Unzip the images from the SDK into a folder. I saved mine to my sharepoint server's wpresources directory in a folder called weather. Example: c:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\weather\64x64
(I believe that this directory is available on any default sharepoint server via http://server/_wpresources/).

The XSL file expects to find the images in /_wpresources/weather, so if you place the images somewhere else, you should update the XSL source.

3. Add a Microsoft XML web part to your sharepoint page. Set the XML link to (text-wrapped):

http://xoap.weather.com/weather/local/28246?cc=*&link=
xoap&prod=xoap&par=yourpartnerid&key=yourkey

(substitute your weather.com key, partnerid and your zip code)

4. Download my XSL file for weather.com from below, then click on the "XSL editor" button on the web part properties page and paste in the code from the attachment.

You do NOT need to edit the XSL file. It uses variables from the XML file. For example, the variable {$zipcode} in the XSL file is replaced with the zip code in the XML file you receive from weather.com.


Here's a preview of what it looks like. Note that the blue around the image is a result of the Internet Explorer PNG transparency bug. The blue will not appear when using IE 7.0+ or Firefox. If this is a problem for you, you can convert all the images from PNG format to GIF format and simply adjust the XSL.


Download XSL Template* (last updated 5/14/2006)

*Please do not link your sharepoint sites directly to this file. Instead, cut and paste the contents into your web part settings by clicking on the "XSL Editor" button.

The XSL file and these directions are licensed under the Creative Commons Attribution 2.5 License.
To view a copy of this license, visit http://creativecommons.org/licenses/by/2.5/
or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco,
California, 94105, USA.

The services provided by Weather.com may be changed at any time. I am not associated with Weather.com in any way and I have no idea as to the legality of your use of this code with respect to downloading data from the Weather.com website. Please refer to Weather.com for any applicable copyright or usage information.

Finally
If you find this helpful, please leave a comment here.

6 comments:

debhollander said...

I have been trying to incorporate your weather web part into my intranet site; we are running a single instance of SPS2003 on two servers. Right now I am working on my dev box. I have followed your instructions to the letter, but am getting the following message:

The XSL specified by the XSL property or XSL Link property is not valid, or the XSL file cannot be accessed. Make sure you have specified a valid XSL style sheet for this Web Part, or if the XSL file is linked that it can be accessed by the server. For assistance, contact your site administrator.

I have placed the xml web part both on the .aspx page, using FrontPage (this is where the MSNBC web parts were originally placed) and dropped in into a zone; same error.

Hope you can help shed some light for me. Thanks or your help.

Scott said...

If downloading the file and linking to it doesn't work, you can try cutting and pasting the text into the XSL Editor (inside the web part properties, click on the XSL Editor button and paste in the contents of the XSL file).

Some others have also had success by simply importing this web part file:

http://www.flakshack.com/blog/Weather.dwp

Also, the web part references a file that is not part of the SDK, you can download that image here:

http://image.weather.com/web/common/icons/transparent_orange_go.gif

debhollander said...

Thanks Scott, I've tried the cut and paste you mentioned so I will give the .dwp file a shot.

Thanks for your help!

Dude said...

Scott: you da man!! I followed your instructions and now have a working weather report on our SP site. And thanks also for the "missing" orange_go button link.

divvymyride said...

Great Page Scott,
I finally got everything to work.
Figuring out where to keep the image files is the trickiest. Here are some tips.
On sharepoint, click “Shared document” -->Actions --> Open with Windows Explorer
This will take the user to his windows folder.
If the images are not loading, a simple right click on the missing images shows the path that IE is using for the images, and the images should be moved to that folder instead of
/_wpresources/

Just a few things that you might want to update.
Weather.com sdk now calls the images 01, 02 03 etc and the image folder is 61x61 and not 64x64.
(I guess people have to be smart as these file/folder names change and thing won’t work out of the box every time )
I couldn't get the degree symbol (Unicode ° ) to show in IE8, google search point to some style sheet issue.
Also if folks are interested in local time, that can been seen by adding the line
Local Time:


Many thanks again
carpool[for] divvymyride.com

ReasonableMan said...

Excellent tutorial Scott. Was able to put a nice little Weather Web-Part into Sharepoint 2010 intranet site collection with no problems at all.

Fahrenheit to Celsius ( for those like myself in Australia ) is simply find the line with the span containing cc/tmp and change to the following xsl:value-of select="round((cc/tmp - 32) div 1.8)" . Then change the hard-coded "F" to "C". Same again for the 'Feels Like' temperature and job done.

I agree with divvymyride, had to remove the degree but not necessary visually.

Thanks again, Mike - Brisbane, Australia


Cheers, Mike - Brisbane