1-866-447-0088 info@netrixllc.com

How to Get Live Weather Information into SharePoint Online

by Apr 19, 2018Collaboration, Custom Application Development0 comments

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.

office 365

(Figure 1) The current look of our site before the weather is added.

Step 1) Create JavaScript File

Create a JavaScript file that has your zip code and data you want to display. In this example, we put the zip code (Macomb, MI in the example, but any zip code will do) in the location (line 4). Line 8 (Figure 2) is where the data we want to get is gathered. In this example, we are adding the current temperature and current conditions.

 JavaScript File Code Screenshot

(Figure 2) – JavaScript File Code Screenshot

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

Open your custom master page in SharePoint Designer and search for the word “siteIcon”. In this example, it is found on line # 296 of the master page (Figure 3). Under the closing </div> tag, we must add 4 lines. On the first (line 303) line, add a new div tag with the id that is named in your JavaScript file that you uploaded to the Site Assets Library. In our example, it is “weather”, but it could be any name as long as they both match. Next, add a line to get the jQuery library file and then a line to get the simpleWeather library file. In this example, we are using the Content Delivery Network (CDN) for both, but you could also download each file and put it in the Site Assets Library and reference them at that location. Both were tested and they work the same. The final line is to reference our JavaScript file that we made in Step #1 (line #306).

That’s it. Save the master page and make sure to check it back in.

site

(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.

SharePoint Weather Update

(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

Related Articles

Netrix Recapitalized by OceanSound Partners

CHICAGO & NEW YORK - August 6, 2020 – Netrix, LLC today announced that an affiliate of OceanSound Partners, LP has recapitalized the company. OceanSound is a growth-focused, middle-market private equity firm investing in technology and technology-enabled services...

read more
A

Searching for our upcoming events? Click here to get the latest updates and registrations for all of our events scheduled in 2020! 

Stay Up to Date with the Latest News

Follow us on social media so that you won't miss any important updates!