How to populate the answer options dynamically

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:

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 that populates the options from the google sheet mentioned in this solution:

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"}
        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)
            }
    )
}

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 Make it public (open your Google Sheet > Share > accessible by everyone)

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 response with this option either in the option’s setting or in the Advanced condition, and apply needed jump logic or chat texts

How how do I provide optional subtext and images for the dynamic options?#

To do so, the code for the dynamic options will be slightly different:

function (input, getVariableValue, callback) {
  var q = new quriobot.URL(
    "https://docs.google.com/a/google.com/spreadsheets/d/1hrq2l7fT9ui8JctdjEiAtHKDdggDGARYUFXVc44rD0k/gviz/tq",
    true
  );
  q.query = {
    tqx: "out:csv",
    gid: "0",
    tq: "select A, C",
  };
  quriobot.ajax(q.toString(), function (responseText) {
    var response = responseText
      .split("\n")
      .slice(1)
      .filter(Boolean)
      .map(function (item) {
        return JSON.parse("[" + item + "]");
      });
    var options = response
      .map(function (item, index) {
        return { value: index + 1, label: item[0], image: item[1] };
      })
      .filter(function (option) {
        return option.label;
      });
    callback(options);
  });
}

Note that we select both columns A and C and use them for the label and image of the returned options. To provide subtext, you can use the description attribute of the option.

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:

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:

Edit this page