By 
In this article, we will learn about how to develop a weather web part using Power Automate and list view formatting in SharePoint Online.
In SharePoint Online, we have the out-of-the box weather web part, which we can add to any page and configure the location, but this is not user-friendly or very customizable; only we can display temperature in Fahrenheit or Celsius; other than this, we cannot configure anything. So, I thought of developing a custom web part using Power Automate and SharePoint Online list view formatting techniques. Below is the example of out of the box weather web part in SharePoint Online.
Now let’s see out-of-the box weather web parts and custom weather web parts developed using Power Automate flow and list view formatting together.
The above dynamic weather web part is developed using the Power Automate flow and SharePoint Online list view formatting; here in this demo, I will show how it is developed.
How to Develop a Weather Web Part Using Power Automate for SharePoint Online
In this demo, I will explain each step of the weather web part. Before getting into this demo, I recommend you go through this article on how weather forecast reports work in Power Automate.
Step 1: Create weather report custom list in SharePoint Online
Create a weather report custom list, and create the below columns:
- Title: Use the existing Title column; it will store the location data, and here you can enter your location name.
- CurrentCondition: Single line of text type, it will store the current weather condition.
- CurrentTemperature: Single line of text type, it will store the current temperature.
- TodayWeatherCondition: Single line of text type, it will store today’s weather condition.
- TomorrowWeatherCondition: Single line of text type, it will store tomorrow’s weather condition.
- BackgroundLocationImage: Image type; it will store the location image thumbnail.
Create custom list in SharePoint OnlineYour list data should look like below:
In the above list, there are two parts: static data and dynamic data. The “Title” and “BackgroundLocationImage” column values are static, while the rest of the columns are dynamic and get updated automatically using the Power Automate flow on a scheduler basis every hour or so, as per your scheduler configuration.
Now, we have added four cities to the above list. If you want to add more cities, you can add them here. You don’t need to change anything in the flow; the Power Automate flow will dynamically read this list as many cities as you want to add them here, and the flow will update their weather details in this list. So, it is a more dynamic, robust, and scalable solution.
Step 2: Create a weather report scheduler flow in Power Automate
Create a scheduler recurrence flow in Power Automate and configure the scheduler as per your needs. Here, I have configured my flow to run every hour.
Add six initialize variable actions to create the below variables:
- varStrTodayHigh: This is a string-type variable that will store today’s high temperature.
- varStrTodayLow: This is a string-type variable that will store today’s low temperature.
- varStrTodayWeatherConditions: This is a string-type variable that will store today’s weather condition or summary.
- varStrTomorrowHigh: This is a string-type variable that will store tomorrow’s high temperature.
- varStrTomorrowLow: This is a string-type variable that will store tomorrow’s low temperature.
- varStrTomorrowWeatherConditions: This is a string-type variable that will store tomorrow’s weather condition or summary.
Add a “Get items” action to read your weather forecast report custom list from the SharePoint Online site.
Add an apply to each control to loop through all locations where in the “Select an output from previous steps” pass the “value” from the “Get Items” action, or directly, you can copy and paste the below text:
@{outputs('Get_items')?['body/value']}
Then add the below MSN Weather actions one by one and pass the “Title” column from the “Get Items” action for all three actions:
- Get current weather
- Get a forecast for today.
- Get the forecast for tomorrow.
Add an Apply to each control to loop through all locations.
You can select the units as “Imperial (Fahrenheit)” or “Metric (degree Celsius).”
Now, let’s continue with flow development. Whatever variable we have declared at the top, now we need to set those variables dynamically inside the for each loop one by one, like below:
varStrTodayHigh:
@{outputs('Get_forecast_for_today')?['body/responses/daily/tempHi']}
varStrTodayLow:
@{outputs('Get_forecast_for_today')?['body/responses/daily/tempLo']}
varStrTodayWeatherConditions:
@{outputs('Get_forecast_for_today')?['body/responses/daily/pvdrCap']}
varStrTomorrowHigh:
@{outputs('Get_the_forecast_for_tomorrow')?['body/responses/daily/tempHi']}
varStrTomorrowLow:
@{outputs('Get_the_forecast_for_tomorrow')?['body/responses/daily/tempLo']}
varStrTomorrowWeatherConditions:
@{outputs('Get_the_forecast_for_tomorrow')?['body/responses/daily/pvdrCap']}
By now, we have set values for all six variables we have defined above. Now let’s update the same “WeatherForecastReport” list in SharePoint Online. For that, let’s add an “Update Item” action inside the “Apply to each control” at the end.
Pass the below parameters in the above update item action:
Select your site and weather forecast report list.
ID:
@{items('Apply_to_each')?['ID']}
CurrentCondition:
@{outputs('Get_current_weather')?['body/responses/weather/current/cap']}
CurrentTemperature:
@{outputs('Get_current_weather')?['body/responses/weather/current/temp']}@{outputs('Get_current_weather')?['body/units/temperature']}
TodayWeatherCondition:
@{concat('(',variables('varStrTodayHigh'),outputs('Get_forecast_for_today')?['body/units/temperature'],'-',variables('varStrTodayLow'),outputs('Get_forecast_for_today')?['body/units/temperature'],')',' ',variables('varStrTodayWeatherConditions'))}
TomorrowWeatherCondition:
@{concat('(',variables('varStrTomorrowHigh'),outputs('Get_the_forecast_for_tomorrow')?['body/units/temperature'],'-',variables('varStrTomorrowLow'),outputs('Get_the_forecast_for_tomorrow')?['body/units/temperature'],')',' ',variables('varStrTomorrowWeatherConditions'))}
That’s it; we are done with the flow development.
Step 3: Format list view using JSON
Create a new gallery view type and make this view public and the default view.
Then format the gallery view.
Inside the JSON box, add the below JSON code:
{
"$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": "[$BackgroundLocationImage.serverRelativeUrl]"
},
"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": "=[$CurrentTemperature]"
},
{
"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": "[$CurrentCondition]",
"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": "[$TodayWeatherCondition]",
"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": "[$TomorrowWeatherCondition]",
"style": {
"color": "#fff",
"margin-left": "10px",
"width": "250px",
"top": "0",
"font-size": "14px",
"line-height": "14px",
"margin-top": "5px"
}
}
]
}
]
}
]
}
]
}
}
Then, click on the “Save” button. That’s it; we are done with the JSON formatting of the list view. Once we save the JSON, we can see the weather forecast report in tile format with the location background thumbnail image.
Step 4: Optional – Create a custom page to display the list view web part
Then, we can create a custom page as shown below and add a list view web part to display the weather forecast report as a web part on a page.
Summary: SharePoint Weather Webpart (Weather Web Part Using Power Automate for SharePoint Online)
Thus, in this article, we have learned how to build a custom weather web part using Power Automate flow for SharePoint Online, and we have learned how to customize the gallery view in the SharePoint Online list using JSON formatting. We also learned how to use the MSN weather connector in Power Automate.
See Also: Power Platform Articles
You may also visit the Power Platform article hub, where you will see a bunch of articles focusing on Power Platform, like Power Automate, Power Apps, etc. All the articles are written with real-time project scenarios and troubleshooting techniques.
If you found this article helpful and enjoyed it, please consider sharing it with your friends and colleagues. Please don’t forget to subscribe to our site to receive our latest articles directly in your inbox. 🙂
About Post Author
