This solution requires development knowledge, please use with respect.



Sometimes having static set of the options for step types like multiple select, images select, autocomplete is just not enough. What if you have an API endpoint which provides a list of options? Yes, you can use that, just follow the steps:


Step 1. In the step settings, enable dynamic population:Step 2: Implement an async JS function which will populate the options. Functions has such parameters:

  1. input, optional, String - user input for the filtering of the options (used for autocomplete step type)
  2. getVariableValue, Function(name, callback) - function to get an existing variable value, for example - getVariableValue('variableName', function(value){console.log(value)})
  3. callback, Function(options) - callback function to call with the result options. Options have such properties:
    • value - integer value which is unique among all the options
    • label - option text displayed in the select
    • image (optional) - image url to display as the option
    • description (optional) - option subtext displayed in the select (used in the multiple images step)   


Example for the Multiple Choice Step types:

For implementing a function which populates the options from the google sheet mentioned in this solution:

function (input, getVariableValue, callback) {
  quriobot.ajax(
    "https://spreadsheets.google.com/feeds/list/1H21kAictlHcU4CA-pn2P75WYw4-FwxRnQ7UmqDW4Vwg/od6/public/values?alt=json",
    function(responseText) {
      var response = JSON.parse(responseText);
      var options = response.feed.entry.map(function(item, index) {
        return {value: index + 1, label: item.gsx$test.$t}
      }).filter(function(option){return option.label})
      callback(options)
    }
  )
}

Please note that we're using index +1  as the option value here, notice the way the Google Sheets URL is used and don't forget to Publish your sheet to the web (open your Google Sheet > File > publish to the web) 

When shown, the step will populate the options:

Example for the Multiple Choice Step types:

For implementing a function which populates the options from the google sheet mentioned in this solution:

function (input, getVariableValue, callback) {
  quriobot.ajax(
    "https://spreadsheets.google.com/feeds/list/1H21kAictlHcU4CA-pn2P75WYw4-FwxRnQ7UmqDW4Vwg/od6/public/values?alt=json",
    function(responseText) {
      var response = JSON.parse(responseText);<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
      var options = response.feed.entry.map(function(item, index) {
        return {value: index + 1, label: item.gsx$test.$t}
      }).filter(function(option){return option.label})
      callback(options)
    }
  )
}

Please note that we're using index +1  as the option value here, notice the way the Google Sheets URL is used and don't forget to Publish your sheet to the web (open your Google Sheet > File > publish to the web) 

When shown, the step will populate the options:


Example for the Autocomplete Step: For this step, the following function can be used:

function (input, getVariableValue, callback) {
    var q = new quriobot.URL("https://docs.google.com/a/google.com/spreadsheets/d/1H21kAictlHcU4CA-pn2P75WYw4-FwxRnQ7UmqDW4Vwg/gviz/tq", true)
    q.query = {tqx: "out:csv", tq: "select A where lower(A) like '%" + input.toLowerCase() + "%'"}
        quriobot.ajax(
            q.toString(),
            function(responseText) {
                var response = responseText.split("\n").filter(Boolean).map(JSON.parse)
                var options = response.map(function(item, index) {
                    return {value: index + 1, label: item}
                }).filter(function(option){return option.label})
                callback(options)
            }
    )
}



Step 3.  (Optional) If you want to create option-specific responses to have a jump logic and/or custom responses and you populate them dynamically, it's possible:

    1. Create an standard answers option, but customise it's value so that it's the same as of the dynamically populated one:

2. Create a response with this option either in the option setting or in the Advanced condition, and apply needed jump logic or chat texts




Need more help or looking for inspiration? Join the Quriobot community!

Quriobot
Friendly & Fun
Interact & Convert