---
title: "Add Weather Data to Your Flight List Screens – Airport CX"
slug: "weather-data-air"
description: "Add weather and temperature widgets to a flight list row so each flight shows its destination's conditions."
updated: 2026-08-26T09:56:30Z
published: 2026-08-26T09:56:30Z
canonical: "docs.simpleway.cloud/weather-data-air"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.simpleway.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Weather data on your screens

Weather and temperature widgets let you add location-specific weather information to your flight lists or other templates, in just a few clicks, pulled automatically from weather providers for each flight or location.

In this tutorial, we'll add weather information to the previously created FLIGHT LIST template by modifying the row element in the subdesigner.

> [!NOTE]
> Topics covered:
> 
> Templates tab:
> 
> - Weather widget
> - Display bank wizard

**Sample screen:**

![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide1(105).JPG)

---

**TUTORIAL STEPS:**

| A) Open your previously created **FLIGHT LIST** template on the **Templates tab**. See [**Create a FLIGHT LIST**](/v1/docs/create-list-flights) tutorial if required. |
| --- |
| B) **Edit the *list* element** 1. Click the *Elements* button. 2. Select the *list* element. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide3(204).JPG) |
| C) Click the button to edit the row template of the selected list. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide4(173).JPG) |
| D) **Edit the row** Click three dots of the row template item and select the *Edit* option. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide5(141).JPG) |
| E) **Row template design mode - Weather widget selection** 1. Make sure the right *data source* is selected, since it supplies the rows of our list with the appropriate flight and weather data, and therefore, will affect the *Weather* and *Temperature* widgets. 2. Click on the *Widgets* button and select the *Weather* widget. 3. Click the canvas in order to place the selected *Weather* widget. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide6(171).JPG) |
| F) **Configure the Weather widget** 1. Change the *size* and *position* of the *Weather* widget to suit your needs. 2. Select the *Weather data source*, *Icons type* and set the *Location type* to *Dynamic*. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide7(150).JPG) *Location type* drop-box offers the following options: - *Static* - Dynamic *Static* option provides weather information for the manually selected location from the drop down menu. *Dynamic* location includes a data source editor where the user can select the flight stop(location) for which the weather information will be provided. For the flight list template, you must select the *Dynamic* location type, so that for each row of the list the weather icon would correspond to the stopping places of a particular flight. |
| G) **Data source editor** 1. Click the *Data source editor* button. 2. In a new *Data source edito*r window, select the appropriate code for your case from the 3 available options. Since in this tutorial we are working with a list of departing flights, we chose the *Destination Code* option. 3. Click the *Save* button. **Destination code** - displays the weather at the final (last) point of the trip. **Origin code** - displays the weather at the starting (first) point of the trip. **Via code** - displays the weather at the intermediate leg of the trip in case of leg flights. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide8(142).JPG) |
| H) **Row template design mode - Temperature widget selection** 1. Click the *Widgets* button and select the *Temperature* widget. 2. Click the canvas in order to place the selected *Temperature* widget. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide9(94).JPG) |
| I) **Configure your temperature widget** 1. Change the *size* and *position* of the *Temperature* widget to suit your needs. 2. Select the *Weather data source*, *Location type* and *Temperature* scale. 3. Click the *Save* button. **Note**: You can also edit the font color of your widget's text if the default font color does not match the background color of the canvas. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide10(85).JPG) |
| J) **Data source editor** 1. Click the *Data source editor* button. 2. In the new *Data Source Editor* window, select the appropriate code. Similar to the *weather* widget, we selected the *Destination Code* option. 3. Click the *Save* button to confirm the settings. 4. Click the *Save* button when you are finished with row template design. **Destination code** - displays the weather temperature at the final (last) point of the trip. **Origin code** - displays the weather temperature at the starting (first) point of the trip. **Via code** - displays the weather temperature at the intermediate leg of the trip in case of leg flights. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide11(48).JPG) |
| K) Click the row template item to select it for your flight list. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide12(38).JPG) |
| L) **Click the *Save & publish*** button. Now you can assign and show the template on your display. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide13(14).JPG) |