Display Today's Weather

Learn how to display current weather in your PandaSuite application by retrieving data from a weather API (OpenWeather). For example, you can display the current temperature, weather conditions (sunny, cloudy, rainy), and other real-time weather information.

Download the free template related to this tutorial:

Obtain The API Key

Create A Free OpenWeather Account

OpenWeather is a free online service providing weather forecasts for a city. It offers different APIs to obtain weather data for a specific location.

Create a free account on OpenWeather.

Retrieve The API URL

OpenWeather offers different APIs to get weather data for a location. We’ll use the Current Weather API to get today’s weather, and the Daily Forecast API to display the forecast for the coming days.

• Log in to your account.
• Go to the API section.
• Choose Current Weather Data and click on the API doc button to access the technical documentation.

• Copy your API key from the https: until just before the ?. The rest corresponds to query strings that will be specified in the HTTP component properties.

https://api.openweathermap.org/data/2.5/weather

Generate Your Personal API Key

To generate your API key (app ID / API Key), go to your Account, section API keys.

Set Up The API In Your PandaSuite Project

The connection to an API is made using the HTTP component.

Insert The HTTP Component

• Open your project.
• Click on Components and insert an HTTP component.

Configure The HTTP Component

Define the properties of your HTTP component:

• URL: Paste the API URL.
• Method: Choose the GET method to request data from the API.
• Query string: OpenWeather provides Query strings to assign values to parameters in your API request:
  • q: The city (e.g., Paris,fr).
  • appid: Your personal API key generated from the OpenWeather interface.
  • units: The unit of measurement (e.g., metric).
  • lang: The language (e.g., en).

Test The Request

Click the Edit button on the HTTP component (or double-click the visible HTTP component field).

Click the Test Request button.

View your request results: If the raw data corresponds to your expectation, the API has been correctly configured.

Creating A Custom Display In PandaSuite

• Select the text block indicating the temperature.
• Go to Properties and specifically the Content to add data binding.
• Choose From a data source > HTTP component > main > temp. Use the FormatNumber function to display the temperature correctly.