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.



https://www.sharepointwidgets.com



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


SharePoint Framework Weather Webpart - SharePointWidgets.blogspot.com



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 - SharePointWidgets.blogspot.com


Deployment

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

Comments

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

    ReplyDelete
    Replies
    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

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

    ReplyDelete
    Replies
    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.

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

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

      Delete

Post a Comment

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

Checking user permission in SharePoint Framework (SPFx) webpart

SharePoint Image Gallery