SharePoint Framework Weather webpart

Hi Friends,

I have come up with a weather webpart, to let you know about the weather outside event when you are working inside. Weather webpart is the most common webpart many of the user love to have them on their site.

So, I have created a weather webpart which fetches its data from yahoo and displays in a very beautiful format.

SharePoint Framework Weather Webpart -

Webpart Features

Weather webpart displays the following information
  • High Temperature
  • Low Temperature
  • Wind speed
  • Humidity
  • Sunrise
  • Sunset
  • Condition Image
  • Forecast for upto 10 days
  • Day and date display for easy readability

You can configure the webpart with just few clicks

  • Enter any City name and see the results right away
  • Option to select between the Celsius and Fahrenheit
  • Select how many days to be displayed in the forecast. Easy to use slider to select the days
  • Show the information when the information was last updated
  • Option to display only the header with the temperature information - compact and informative.

SharePoint Framework Weather Webpart -


For deployment follow the below steps
  • Clone the repository
  • Open the code in Visual Code or in any other IDE
  • Change the 'cdnBasePath' url inside the Config/write-manifest.json
  • Create the package
    • Run the following commands
    • gulp
    • gulp bundle--ship
    • gulp package-solution --ship
    • Now upload the weather .sppkg file from SharePoint/solution folder
    • Upload the files inside temp/deploy to the cdnBasePath url
  • Now add the webpart to the page

Since I am using the Yahoo API which has restricted to the number of hits per day, so by default new data will be processed after 30 minutes (does not auto refresh but, gets data if the last updated is more that 30 min and page is refreshed manually). If you are having more than that please get the yahoo key and need to make changes in the query.

Do comment on how you feel about the webpart and if there is anymore functionality that is missed and you would like to have.

Happy Coding

Sumit Kanchan


  1. I would recommend to go ahead a step further to find the location of user and then show weather predictions :)

    1. Thanks Ashutosh for the suggestion, but if you take a closer look into the webpart settings I have already included the option to take the location of the user, I am working on it and soon will release the new version.

      -Sumit Kanchan

  2. Can this be updated for the new Yahoo API?

    1. I have requested for the keys from Yahoo with their new API's , but still did not received the approval. I am chasing and will update the solution once I receive keys from them.

  3. I tried till the last step, but I'm getting an error while configuring the web-part,
    "Webpart not configured.."

    1. Yahoo has updated the API for accessing the weather info, due to which the webpart is currently not working.


Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Power Automate: Rename file in SharePoint Online