Share via

Creating a weather app using PowerApps

  • Article

One of the great things about PowerApps is that every month it gets better and better with more capabilities in the platform as well as new connectors that provide more flexibility connecting to SaaS services. Last month one of such connectors was the MSN Weather that gives you the ability to read the current weather on a specific location, or even the forecast for tomorrow and others.

 

MSN Weather API

While I don’t think you want to build the next Weather App (there are plenty out there), having the capability of incorporating weather information to your application and correlate to any other data on it is very powerful, whether for planning purposes, delivery, travel plans, or scheduling, or others it can save your users from having to go to multiple places. In addition, with Microsoft Flow you could setup some automated tasks that trigger when the weather changes, and such.

 

MSN Weather Connector actions supported in PowerApps
MSN-Weather-API Current-Weather-Properties

 

What we will be building

For this quick sample we will be creating the following application using PowerApps that allow you to enter a location in the Input box and will provide you the weather, conditions, pressure, and other information. It also allows you to use the current location to get the weather for it. We currently do not have a reverse geocoding API but the MSN Weather API allows you to provide the Location in coordinates. Of course like all other PowerApps, this application will run in iOS (iPhone, iPad), Android, Windows Phone, Web, and Windows Desktop which makes it extremely powerful and all of this in less than five minutes.

weather-app

Building the Weather App

At a high level the strategy we will use since we want to have the user click the “Search button” as an explicit action, we’ll store the result of calling MSNWeather.CurrentWeather in the OnSelect of the Search button into a context variable that then we’ll use to display in all the other controls. We’ll add another icon to set the current location coordinates. That’s it… nothing else needed.

 

  1. In Windows, launch PowerApps
  2. We’ll initialize the default location when first launching the app, for that: on the Screen set the following properties:
    1. OnVisible = UpdateContext({LastLocation: "Redmond, WA"})
  3. We’ll add the “set the current location” button, for that: Add an Icon (I used the “Map”) icon for simplicity and set the following properties:
    1. OnSelect = UpdateContext({LastLocation: Location.Latitude & ", " & Location.Longitude})
  4. We’ll load the last location as a default for the textbox: Add a new Text Input control and set the following properties
    1. Default = LastLocation
    2. HintText = "Enter location"
  5. Add the “Units” radio group, for that add a Radio control with the following properties:
    1. Items = ["Imperial", "Metric"]
    2. Default = "Imperial"
  6. We’ll add the Search button, for that:
    1. OnSelect = UpdateContext({Weather: MSNWeather.CurrentWeather(TextInput1.Text, Radio1.Selected.Value)})
  7. Finally add all the controls to visualize the data, I used the following:
    1. Temperature: Weather.responses.weather.current.temp & " " & Weather.units.temperature
    2. Conditions: Weather.responses.weather.current.cap
    3. Pressure: Weather.responses.weather.current.baro & " " & Weather.units.pressure
    4. UV Index: Weather.responses.weather.current.uv & " " & Weather.responses.weather.current.uvDesc
    5. Dew Point: Weather.responses.weather.current.dewPt & " o"
    6. Humidity: Weather.responses.weather.current.rh & " %"
    7. Sky: Weather.responses.weather.current.sky
    8. Wind: Weather.responses.weather.current.windSpd & " " & Weather.units.speed
    9. Visibility: Weather.responses.weather.current.vis
    10. Last Updated: Text(DateTimeValue(Weather.responses.weather.current.created), DateTimeFormat.ShortDateTime)
    11. Coordinates: Weather.responses.source.coordinates.lat & ", " & Weather.responses.source.coordinates.lon
    12. Open in Browser: Launch(Launch(Weather.responses.source.clickThrough))

 

Anyway, hopefully this shows how easy it is to add a data source to PowerApps. If you need to learn more about which APIs are available and the properties on each you can go to: https://blogs.msdn.microsoft.com/carlosag/2016/11/22/the-unofficial-powerapps-connectors-reference-draft/

 

Download a copy of the app here

Comments

  • Anonymous
    April 15, 2017
    Hi Carlos, Thanks for the example but I get an error unauthorized -- the request URL does not match any API runtime URL
  • Anonymous
    May 01, 2017
    All is Good but in my view, But one thing that every Weather app lacking: either Weather apps display a lot of unrequited alerts for weather changes (talking about google app) but i never seen even a single alert when it should be. So, i have faith in MS and i think this app will gonna overcome this issue. Now, i am upto using this app.