How to dynamically populate questions with answers using an external API

In Qonfi, you can dynamically populate questions with answers using an external API.  This is especially powerful when you have dependencies in your flow on large datasets.

Example

Let's, for example, say you sell cars and you have a large list of car brands and models. Manually adding each brand as an answer to your flow and creating a separate question for each brand with all available models would be a lot of work.

To avoid manually adding each answer and dynamically load the from an API, follow these steps:

1. Enable "Dynamic answers" in the settings

Go to "Settings -> Configure -> Questions" and enable the "Enable dynamic answers" checkbox.

2. Add the "Brand" step

Add a new Single select or Dropdown select step to the flow, go to the tab Dynamic answers and enter the API url where you want to get the car brands from into the Request URL field.

The following options are available when configuring your API request:

• Request Type
  You can choose a request type that matches your API (GET, POST JSON, POST FORM).
• Request URL
  Your API endpoint URL. You can also use variables in the request URL. When we add the "model" step in this example we'll show you how you can do this.
• Request headers
  Request headers to send along with the request. This can be useful for when you need to authenticate the user or have an API that is protected with some form of authentication.
• Request body (only when using the POST request type)
  When using the POST request type, you can use the "Request body" to send additional data.
• Source path
  Most of the times you can leave this empty. In our request we get a response where "brands" is a field in the response, so we want to enter "brand" here:

Configuring the dynamic answer fields

Dynamic questions only need one answer. That single answer will be used as a template for the dynamic answers that are retrieved from the API. To get the dynamic values from the API, we can use the "{dynamic.field}" format. 

In the screenshot below you can see that we use {dynamic.name} for the "answer" field and {dynamic.thumbnail} for the "Image" field for example.

Dynamic answer variables

Next, we want to save the id of selected brand, so we can use this later in the API request for the "Car model" step and only retrieve models for the selected brand.

Just as you would configure the answer fields, you can also use the {dynamic.field} format to save data to a variable.

3. Add the "Model" step

When we add the Car model step, we can configure the API request to retrieve the models instead of the brands. 

As you can see in the screenshot below, we now use the previously set "selected_brand_id" variable as a query parameter in the request. This way we only retrieve the models that are relevant to the brand we selected.

Lastly, we'll need to configure the answer for this dynamic question just like we did with the Brand question. In our example we have added the Model step as a "Dropdown select" so we'll only have to configure the "Answer" field.