This solution requires development knowledge, please use it with respect.



Sometimes having a static set of options for step types like multiple select, images select, autocomplete is just not enough. What if you have an API endpoint that 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 a standard answers option, but customize its value so that it's the same as of the dynamically populated one:

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


What if the response needs to be dynamic as well, depending on the selected option?


You can then use this technique:


Step 1. Create step variable, with the previously created step selected, name it, for example, select:



Step 2. Create script variable (learn more here), name it, for example, response:


function (callback, variables) {
  var q = new quriobot.URL("https://docs.google.com/a/google.com/spreadsheets/d/ID/gviz/tq", true)
    q.query = {tqx: "out:csv", tq: "select B where A = '" + variables.select.text + "'"}
        quriobot.ajax(
            q.toString(),
            function(responseText) {
                var response = responseText.split("\n").filter(Boolean).map(JSON.parse)
                var options = response.filter(Boolean);
                callback(options[0])
            }
    )
}

Note that here we select column B by looking up the row by column A.


We're done!

You can now use this variable in the chat text messages, response and response actions like:

 



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

Quriobot
Friendly & Fun
Interact & Convert