How to build a weather web part for SharePoint using a list view formatting

By João Ferreira Feb 7, 2021 Development, SharePoint 4 Comments

Modern SharePoint has a built-in weather web part but unfortunately it does not allow customizations displaying just the weather in black and white.

I was looking for a solution with a bit more color and similar with the weather tile from Windows, so I decided to build my own using a custom SharePoint list, a custom view formatting, Power Automate and the out of the box lists web part.

In this article you will find the detailed instructions to implement your own weather web part similar to the one shown in the image below.

Create the SharePoint list

To host the temperature for each one of the locations you will need to create a SharePoint list with the following columns:

• Title – Used to store the name of the city
• Condition – Used to store the current condition
• Temperature – Used to store the current temperature
• Today – Used to store the max and min temperature and condition for the current day
• Tomorrow – Used to store the max and min temperature for the next day
• Background – Background image to be used in the tile

Once you get the list created, go to the list settings and edit the All Items view to make the ID column visible, this will be needed in flow definition in the Power Automate.

Add all the cities from where you want to get the weather by defining the name and the background image for the tile, once you end this process your list will look like the image below.

Create a Flow to get the Weather for each one of the cities

The magic behind this web part happens in a flow defined in Power Automate that is executed every hour to get the current temperature and conditions for each city.

To create the follow, you must do the following:

1. Open Power Automate and create a new Scheduled automated flow
2. Provide a name for the Flow, define the starting hour and define the recurrence for one hour
3. Click the Create
   
   
4. Add all the available actions for the MSN Weather
   1. Get current weather
   2. Get forecast for today
   3. Get forecast for tomorrow
5. Define the city from where you want to get the weather
6. Create 6 variable to store the information from the MSN weather actions
   1. Today High
   2. Today Low
   3. Today Conditions
   4. Tomorrow High
   5. Tomorrow Low
   6. Tomorrow Conditions
7. Add the action Update Item from SharePoint, decided to use the update item as I’m not interested in keeping the history of the weather
8. Provide the details for the site collection where your weather list is stored
9. Provide the list name
10. Provide the item id you want to update, with the modified view this ID should be visible now in your list
11. Type the name of the City in the Title column
12. Select conditions and temperature for the columns with the same names
13. For today and tomorrow use a concat formula to concatenate the values for Today and Tomorrow as shown in the following example

    concat(variables('todayHigh'),'º/',variables('todayLow'),'º ',variables('todayConditions'))

14. Click Save

In the image below you can see the flow with all the actions definitions, repeat the process for each one of the cities you want to get in the web part.

Format the SharePoint list view

In order to see the information in the list as a tile format you must format the List view to be displayed as tiles, to do it do the following:

1. Open the view selector menu and click on Create new view
   
2. Provide a view name, select gallery, and check the option to make this a public view
   
3. Open the view selector and click on Format current view
4. At the bottom of the format view pane click on Advanced mode
5. Paste the following JSON in the source box

   {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
     "hideSelection": true,
     "width": "250",
     "height": "250",
     "formatter": {
       "elmType": "div",
       "children": [
         {
           "elmType": "div",
           "style": {
             "display": "inline-block",
             "min-width": "250px",
             "min-height": "250px",
             "margin-right": "10px",
             "box-shadow": "2px 2px 4px darkgrey"
           },
           "children": [
             {
               "elmType": "img",
               "attributes": {
                 "src": "[$Background]"
               },
               "style": {
                 "height": "250px",
                 "max-width": "250px"
               }
             },
             {
               "elmType": "div",
               "style": {
                 "position": "absolute",
                 "margin-top": "10px",
                 "height": "250px",
                 "width": "250px",
                 "bottom": "0",
                 "padding-top": "10px",
                 "background-color": "rgba(0,0,0,0.5)"
               },
               "children": [
                 {
                   "elmType": "div",
                   "style": {
                     "text-align": "left"
                   },
                   "children": [
                     {
                       "elmType": "div",
                       "style": {
                         "color": "#fff",
                         "margin-top": "10px",
                         "margin-left": "10px",
                         "width": "250px",
                         "top": "0",
                         "font-size": "55px",
                         "line-height": "55px"
                       },
                       "txtContent": "=[$Temperature]+'º'"
                     },
                     {
                       "elmType": "div",
                       "txtContent": "[$Title]",
                       "style": {
                         "color": "#fff",
                         "margin-left": "10px",
                         "margin-top": "10px",
                         "width": "250px",
                         "top": "0",
                         "font-size": "25px",
                         "line-height": "25px"
                       }
                     },
                     {
                       "elmType": "div",
                       "txtContent": "[$Condition]",
                       "style": {
                         "color": "#fff",
                         "margin-left": "10px",
                         "width": "250px",
                         "top": "0",
                         "font-size": "20px",
                         "line-height": "20px"
                       }
                     },
                     {
                       "elmType": "div",
                       "txtContent": "Today",
                       "style": {
                         "color": "#fff",
                         "margin-left": "10px",
                         "margin-top": "20px",
                         "width": "250px",
                         "top": "0",
                         "font-size": "14px",
                         "line-height": "14px"
                       }
                     },
                     {
                       "elmType": "div",
                       "txtContent": "[$Today]",
                       "style": {
                         "color": "#fff",
                         "margin-left": "10px",
                         "width": "250px",
                         "top": "0",
                         "font-size": "14px",
                         "line-height": "14px",
                         "margin-top": "5px"
                       }
                     },
                     {
                       "elmType": "div",
                       "txtContent": "Tomorrow",
                       "style": {
                         "color": "#fff",
                         "margin-left": "10px",
                         "margin-top": "20px",
                         "width": "250px",
                         "top": "0",
                         "font-size": "14px",
                         "line-height": "14px"
                       }
                     },
                     {
                       "elmType": "div",
                       "txtContent": "[$Tomorrow]",
                       "style": {
                         "color": "#fff",
                         "margin-left": "10px",
                         "width": "250px",
                         "top": "0",
                         "font-size": "14px",
                         "line-height": "14px",
                         "margin-top": "5px"
                       }
                     }
                   ]
                 }
               ]
             }
           ]
         }
       ]
     }
   }
   

6. Click Preview to make sure the formatting is properly applied and then click Save
   
7. Go to the view selector one more time and click on Set current view as default

Add the web part to a SharePoint page

The last thing you need to do is add your new list to a SharePoint page so all your users can see the new weather web part.

1. Edit the page where you want to display the weather
2. Add the List web part to the page
   
3. On the web part select your weather list
4. By default the List web part shows the list command bar, to remove it click in the edit properties button
5. From the property pane toggle the option to Hide command bar
   
6. Click on Apply and Republish your page

Your new weather web part is ready to be consumed by all the users and will be updated every hour, if you want to be more creative, I challenge you to modify the background image for the tile according to the weather conditions. 😊