In just a few simple steps, you can insert weather information under the site icon in the master page. I recommend using the custom master page location because it is easy to find the site logo on the master page. You can place the code just about anywhere on the page such as the Content Editor Web Part or Code Snippet Web Part. In this example, we will be placing the code in the master page.
Start by using the simpleWeather jQuery plugin. There are lots of features and configurations to this plugin. You can check out all the parameters and demos at the simpleWeather site here. In this example, we are going to put in a zip code and get two data points: current temperature and current conditions. These are just two of several data points that the service can receive.
Two simple steps:
- Add weather location script to SharePoint
- Add 4 lines of code to master page
The first thing that needs to be done is to create a copy of the current master page. We don’t want to add code or alter the default master page(s). For this example, we used the seattle.master, but it can be applied to either seattle.master or oslo.master.
(Figure 1) The current look of our site before the weather is added.
Now we need to save this file and upload it to the SharePoint Site Assets library located at <siteURL>/SiteAssets. For this example, we saved the file and named it index.js, but you can name it anything you want as long as it is referenced in the master page. We also created a folder “JS” in our Site Assets Library to easily access our page, but this is not necessary.
Step 2) Open Master Page
That’s it. Save the master page and make sure to check it back in.
(Figure 3) – Site Icon
Your Weather Update is Available
Now when you go to your site, you should have the weather under the site logo (Figure 4). As previously stated, you can pass more or different data points. Show the weather in just about any area on the page and style it anyway you want. This is just a quick example of how we can get it in a SharePoint Online master page.
(Figure 4) – SharePoint Weather Update
This solution was tested on SharePoint 2010 and SharePoint 2013 on premise and it works as expected. We did not test SharePoint 2007 or SharePoint 2016, but it should work on those also.
Attached is the zip file for your code. In the index.js, simply change the location to your desired location and in the MasterPageCode.html change the location for the index.js to the location you placed it and you should be up and running.
Written by Michael Luttenberger – SharePoint Solution Architect