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. Ashutosh SinghNovember 16, 2017 at 12:51 AM

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

    ReplyDelete
    Replies
    1. Sumit KanchanNovember 16, 2017 at 7:35 PM

      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. EmmaMJuly 18, 2019 at 3:48 PM

    Can this be updated for the new Yahoo API?

    ReplyDelete
    Replies
    1. Sumit KanchanAugust 1, 2019 at 4:19 PM

      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. UnknownMarch 11, 2020 at 4:24 PM

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

    ReplyDelete
    Replies
    1. Sumit KanchanMay 21, 2020 at 5:39 PM

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

      Delete
  4. NapsterJuly 5, 2024 at 11:58 PM

    Is this still working?

    ReplyDelete

Post a Comment

Popular posts from this blog

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

Image
Hi Friends, Today blog is about renaming the folder in the document library using the MS FLOW or MS Power Automate. When I started working on this it seems to be an easy job, but if you look into the connectors you'll find it really difficult as there is no straight forwards connector to do the job. Issues encountered If you try using the " Get Folder Metadata " connector, you'll not be able to get the ID of the folder as it is returning as the negative value. If you get the ID somehow and try to update the folder name using the " Update File Properties " connector, you'll end up renaming only the title of the folder, but it will still have the old name as the display name which in case is again a failure. There is no other connector which can be utilized to achieve the task of renaming the folder in a document library directly. Solution The solution is a simple three-step (at least in this example). Step 1: Initialize variables In case you are computing...
Read more

Power Automate: Rename file in SharePoint Online

Image
  We often get to change the name of the file, so in this article, I will explain how to rename the file in SharePoint Online using Microsoft Power Automate. Below is the file which I will be renaming. Step 1: Get the file properties We only need to have the SharePoint item id, for which we want to rename the file Step 2: Update the File Name Add the "Send an HTTP request to SharePoint" connector, and update the following properties Method : POST Uri : _api/web/lists/GetByTitle(' <LIBRARY TITLE> ')/items( <ITEM ID> )/ValidateUpdateListItem Body: {     "formValues" :[         {             "FieldName" : "FileLeafRef" ,             "FieldValue" : "<New File Name>"         }     ] } Execute the flow, and the file will be renamed Happy Automating..!! #PowerAutomate #SharePointWidgets #Microsoft
Read more

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

Image
  Q. How to add "New Line", while adding the text to the SharePoint multiline text field?  A . In order to add the new line while adding a text to the multiline SharePoint field, I will demonstrate the simplest approach. Although you can find multiple approaches, but this one seems to be very easy and quick. You need to append the below expression to the text to make it to the new line: decodeUriComponent('%0A') If you are adding any array, then join the array using this expression or if you are building this string, then append this expression to the string. Step 1:  Add a variable and add the below expression (Write the code under the Expression tab) STEP 2: This is how your variable will look like      STEP 3: Output of the Address columns which is of Type Multiline text field Happy Coding..!! #Microsft #SharePointWidgets #PowerAutomate
Read more