This article demonstrates how to populate a field with values that come from an API.
(Note: An alternative to this is to populate a field with values that come from a Google Sheet.)
In this example scenario below we will have two drop lists on the form which will be populated with data coming from an API:
- "University Campus", and
- "Course of Interest"
We want to automatically list only "University Campuses" that are in our external database, and for the "Course of Interest" drop list we want this to automatically list only courses that exist under the "University Campus" that has been selected.
Pre-Conditions needed for this API example to work
- Your I.T department (or the external system which has the data you want to show in the form) has made the data you need publicly available via a URL (AKA "Web Service") which you know the URL of.
- Your I.T department (or the external system which has the data you want to show in the form), is not blocking www.globalpatron.com from accessing the URLs content. (Sometimes URLs are intentionally set to only be allowed to be called from certain locations)
- The data being output by the URL is in "JSON" format, in "label"/"value" pairs, one level deep, exactly like the example below:
"label": "University of Sydney",
"label": "University of New South Wales",
Let's get started!
- Go to your "My Forms" screen and click on the edit icon of the form you wish to edit. The icon looks like this:
- Add two select lists to your form by clicking on the "Select List" icon in the list of available form fields on the left of the screen, (or drag it to a particular location on the form). The field icon for a select list looks like this:
The select list will have some example entries in it by default, you can delete these.
- After you've done this you should see two select lists on your form preview canvas
- Note: In this example we're adding two select lists so we can demonstrate a "relationship" between the two drop lists but one select list is also fine and would still work.
- Now that you have added a select list, please click on the "Dynamic Data Fields" module on the right of the screen. It looks like this
- Clicking on this will open up a popup asking you to specify which fields on your form are "Dynamic Data Fields". Here you can specify what "URL" will be supplying the data for which select list.
- After you have specified your source URL for each field, click "Save Changes"
- In the example above you'll notice that for the "Course of Interest" we have listed the "University Campus" field as a "Parent" field. What this means is that the "Course" drop list depends on the "University Campus" drop list.
- So unless a "University Campus" is selected, the "Course of Interest" field will be disabled
- When a "University Campus" is selected or changed by the user, this will automatically trigger a call to the "Course of Interest" webservice, with the details of which "University" is currently selected specified in the URL as a query parameter (e.g. ?universityFieldName=UNSW) , so that the code in your web service knows what University to return courses for.