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.
Comments
1 comment
Hello,
I tried to link HTTP post to iFormbuider table JSON format, HTTP element is fetching data but I can't pass data to the text area.
this part not working:
Please sign in to leave a comment.