form builder elements

---

Table of Contents

In the below article, we'll cover the following items:

• What is the HTTP Request element?
• How do I use the HTTP Request element?
• How do I add the HTTP Request element to my form?
• How do I use the HTTP Request element in my form?

---

What is the HTTP Request element?

With the HTTP Request element, you are able to pull external data into your form by performing on demand requests to web-accessible APIs. This allows users to pull updated data into their forms in real-time.

This is iForm's first online-only feature and requires an active Internet connection to successfully perform queries with the element.

Common use cases are:

• Scan Data for Lookup
• Current Weather Query
• View Site History
• Check for Unique Values
• Lookup Previously Submitted Records

Note to form designers:

{
  statusCode: (int),
  response (JSON formatted data)
}

---

How do I use the HTTP Request element?

In the initial phases of the HTTP Request element, you will need to use a public API endpoint found from an external resource that you want the iForm application to call.

This is not something we host and the example seen below is from the https://www.weather.gov/ website.

The API call using the HTTP Request element is returning data in JSON. There are response codes that will return if the call is successful or not. In Webforms currently, the status and HTTP Response is available to view as seen in the example below.

PLEASE NOTE: On the device, the successful status is indicated by a green checkmark or a pop-up error message.

• Status Code 200 (Green Checkmark) = Successful response

Example of a response and details of the request in Webforms:

If your response is unsuccessful, you may receive one of the following error messages:

• Request URL is invalid.
  • Please check that the URL you are using in the form builder (Step 3 below) is correct.
• An internet connection is needed in order to use the HTTP Request element. Please connect your device.
  • Your device must be connected or the element will not work.
• Please enable the User Header API setting to activate HTTP Request element.
  • On the device, the User Header API must be enabled in order to use the element.

---

How do I add the HTTP Request element to my form?

To add the HTTP Request element to your form, please follow the instructions below.

STEP 1. From inside the Form Builder, click the HTTP Request element icon from the left-hand menu. You'll see it populate the device view.

STEP 2. On the right-hand side, you'll see the element properties. Enter the name of your element.  

PLEASE NOTE: If you check the Based on Label option, it will create a data column based on the Label on the element.

STEP 3. Scroll down on the right-hand side to Dynamic Attributes. Enter in the API url in the Request URL field. Here is an example for you to try: https://jsonplaceholder.typicode.com/posts/1/comments

STEP 4. Save your form.

---

How do I use the HTTP Request element in my form?

In this example, we will be getting the current weather information based on your user's location and then parsing out some of that information into other fields. Also, this example is using U.S. weather information which is only available in the U.S.

PLEASE NOTE: The form name in the example below is: http_demo_get_weather_dynamic

STEP 1. From inside the form builder, add a Location element. The name of the element should be: select_location

STEP 2. Add your HTTP Request element. The name of the element should be: get_weather_dynamic

Scroll down to the Dynamic Attributes section and in the Request URL field, put the following URL: 

https://forecast.weather.gov/MapClick.php?lat=${form_name.location_element_name.latitude}&lon=${form_name.location_element_name.longitude}&FcstType=json

You need to replace the bolded fields with your own form name and location element name. In this specific example, the Request URL will be:

https://forecast.weather.gov/MapClick.php?lat=${http_demo_get_weather_dynamic.select_location.latitude}&lon=${http_demo_get_weather_dynamic.select_location.longitude}&FcstType=json

PLEASE NOTE: The ${} syntax being used in the example above is to dynamically populate URLs.

STEP 3. Add a Text Area element to the form. This Text Area field is going to populate the API URL response objects. You will be using one of the objects in this response to parse into the Text element field in the next step.

The name of the element should be: weather_response

In the Dynamic Value of the Text Area element, enter in the following javascript method replacing the values with your form and HTTP request element name:

JSON.stringify(form_name.http_element_name.response.object_name)

In this specific example, the Dynamic Value will be:

JSON.stringify(http_demo_get_weather_dynamic.get_weather_dynamic.
response.currentobservation)

We recommend hiding this field on the device by using a false condition value.

Where currentobservation is from the API URL response that will be populated in the Text Area element in the app or webform. The data populated in this object is what we are parsing into the Text element field.

STEP 4. Add a Text element to your form. The name of the element should be: current_location

In the dynamic value of the Text element, enter in the following javascript method:

http_demo_get_weather_dynamic.get_weather_dynamic.response.
currentobservation.name

This will pull the name of the location based on your API response.

STEP 5. Add a Text element to your form. The name of the element should be: current_temperature

In the dynamic value of the Text element, enter in the following javascript method:

http_demo_get_weather_dynamic.get_weather_dynamic.response.
currentobservation.Temp

This will pull the current temp of the location based on your API response.

STEP 6. Add a Text element to your form. The name of the element should be: current_conditions

http_demo_get_weather_dynamic.get_weather_dynamic.response.
currentobservation.Weather

This will pull the current conditions of the location based on your API response.

STEP 7. Save your form.

STEP 8. Test it out on your device.

Click the Select Location element to populate your location.

Click on the HTTP Request element to make your API call.

The response should come back as successful (green checkmark) and the data will be parse into the corresponding fields.