Configuring an API – Basic Example

Business Background

This guide demonstrates how to integrate OpenWeatherMap’s Current Weather API with Titan Web, allowing users to enter their city name and instantly retrieve local weather information (e.g., temperature, description).

Prerequisites

• A free OpenWeatherMap account. 
• A valid API key from your OpenWeatherMap dashboard.
  (If newly created, wait 5–10 minutes for activation.)

Flow Setup

You’ll first create a Flow that connects to the Weather API, sends the city name entered by the user, and receives the weather data in return. This Flow acts as the bridge between your Web Project and the external API. The goal is to display live weather data for the city entered by the user in a Web project.

PART 1: Build the API in Titan Flow

Create Flow Variables

1. Create the following variables in the Flow project using the Static Variables window. Click Apply. 
   • cityname – Stores the city name entered by the user in the Web project. The value will be sent to the API. 
   • temperature – Stores the specific temperature value extracted from the API response. 

Configure the API Hub Node

1. Open the API Hub Call node.
2. Set the Request Type to GET.
3. Add the following Parameters:
   • q – field – GV/cityname
   • units- static – metric 
   • api – static – Paste in your real OpenWeatherMap key

Titan will automatically build a URL like this: 
https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=YOUR_API_KEY

For this example, no Authorization, Headers, or Body is required. 

4. In the Output tab, select JSON as the output format.
5. Click Add Mapping Path and configure: 
   • String – main.temp – GV/temperature
     This ensures you only store parts of the JSON and display the temperature only. 

6. Add a Finish node and connect it to the API Hub Node. This ensures the Flow returns the mapped variables to the Web project.
7. Save and Publish the Flow so a Web Project can trigger it.

PART 2: Build the Web Project

Once the Flow is published, you’ll create a Web Project to capture the user’s input and display the city temperature. 

Create your Titan Web Variables

1. Create the following variables in the Flow project using the Static Variables window. Click Apply. 
   • temperature

Add Elements to your Titan Project

In your Web project:

1. Add a Text Box called ‘City Name’. This is where the user will input a city name.
2. Add a Text Box called ‘Temperature’. The temperature for the city will populate this field.  
3. Add a Button labeled Get Temperature.

Configure On-Click Action Button

This button will: capture what city the user types, pass it to the flow, and display the temperature results. 

1. Navigate to the Get Temperature On Click Actions window.
2. Click the Start + icon, choose Launch Flow node, and click Next. 
3. Choose your configured Flow (the one that includes your OpenWeatherMap API Hub call) and click Configure Parameters. 

4. Under Parameters, for cityname select Field and choose the city name input field. This sends the user’s city name from the Web project to the Flow so the API knows which city to query. Click Apply.

5. Click Return Parameters. For temperature, select ‘Field’ and choose ‘temperature’. This returns the temperature value from the Flow to the Web project. Click Apply.

6. Save the node once the mapping is complete.
7. From the After Finish connector of the Launch Flow node, add an Affected Element node.
8. Select the textbox that will display the temperature, choose Set Value From in the dropdown, and GV/temperature as the Value. Click Next and apply the configuration. This node updates the text box with the temperature value returned from the Flow.

9. From the Affected Elements node, add a Show Toast node. Enter a short message to confirm that the API call was completed successfully. Apply the configuration.

Review your completed action flow. It should follow this sequence:

Result

When a user types a city name and clicks “Get Temperature,” the input is sent to the Flow. The Flow then runs and retrieves live weather data from OpenWeatherMap. Once the API call completes, the returned temperature is populated in the designated textbox, and a success toast message appears to confirm that the process has finished. All of this happens seamlessly within the same On Click Action window, forming one continuous workflow from user input to final output, exactly as shown in the example screenshot.