Please read Part 1 and Part 2 of this series before continuing with this article.


So far we have created an HTTP Connector and a function that will get weather data from

In the third and final part of this series we will use our new function in a Tulip App. Refer to Tulip App Design 101 for more details on building apps in Tulip.

Create a New App with a Form Step

To start, create a Form Step with a "Dropdown" form widget. Then create a variable called city and assign it to the "Dropdown" widget.

Create a step for showing the weather data

This will be a basic step where we show two variables using Variable text:

  • msg_temp_city - for displaying a header such as 'Current Temp in Boston'

  • current_temp_f - for displaying the temperature with units such as Fahrenheit

NOTE: Feel free to experiment with the design of your app!

Here's what this step might look like with two example of Variable text:

Call the function we created in Part 2.

Create a new Step Trigger for When Step is Opened and add a new action. 

  • Choose Run Connector Function and choose the Weather Connector that we created in Part 1 then select the Get Weather Data By City function that we created in Part 2.

  • Use the city variable for the input of the function

  • Save the result as a new variable, the name is your choice. In this example we are using weather_data.

  • Save the trigger

Convert the temperature to Fahrenheit using the Expression Editor

The temperature value that is returned from the API is in Kelvin. We would like to display this in a more common unit such as Fahrenheit. To do this we will us the Expression Editor.

Create another trigger that runs when step is opened

Add an action and use an expression to concatenate the city variable with text. Store the result in the variable we created earlier, msg_temp_city.

  • "Data Manipulation" "Store" data: "Static Value" "text" "Current temp in"

Add another action and use an expression to convert the temperature from Kelvin to Fahrenheit and concatenate with ' F' for the units. Store this in current_temp_f.

  • "Data Manipulation" "Store" data: "Expression" "ROUND(1.8*PARSEFLOAT(@variable.weather_data.current_temp) - 273)) + 32, 0) + 'F'

Then save the trigger.

That's it! Run your app in the Tulip Player to see the results

Your app should now allow you to change the city and see the temperature.

Did this answer your question?