SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Display Location Weather Details

This sample utilizes sub properties of a Location column to build an image that pulls weather from WeatherForYou.com

Get this format View on GitHub

Shared by Chris Kent
Updated Sep 16, 2021

Display Location Weather Details formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField && (@currentField.Address.CountryOrRegion == 'US' || @currentField.Address.CountryOrRegion == 'United States'), 'flex', 'none')",
    "align-items": "flex-start",
    "width": "175px",
    "height": "74px",
    "overflow": "hidden",
    "margin-bottom": "8px"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "='https://www.weatherforyou.net/fcgi-bin/hw3/hw3.cgi?config=png&forecast=hourly&alt=hwihourly&place=' + @currentField.Address.City + '&state=' + @currentField.Address.State + '&country=us' + '&hwvbg=transparent&hwvtc=black&hwvdisplay=' + @currentField.DisplayName"
      }
    }
  ]
}
View sourceLink to this definitionlocation-weather.json

From the contributor

How to use this sample

Summary

This sample utilizes sub properties of a Location column to build an image src that pulls weather from WeatherForYou.com.

screenshot of the sample

[!NOTE] The WeatherForYou weather snapshots do NOT require an API key and is completely free to use. However, it is limited to locations within the United States only. Locations outside of the US will not show the format.

Prerequisites

This sample uses external images. These images are displayed only if their domains are explicitly allowed.

If your site allows only specific domains, add www.weatherforyou.net to the list of allowed domains in the HTML Field Security settings.

For more information, see: Allow or restrict the ability to embed content on SharePoint pages

View requirements

  • This format can be applied to a location column (to reference a location column instead you can switch the calls from @currentField to the column reference format. For example, @currentField.Address.City to [$INTERNALNAME.Address.City])

Sample

Solution Author(s)
location-weather.json Chris Kent

Version history

Version Date Comments
1.0 September 16, 2021 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.