In Google App Maker, how do you cause a Multi Select Widget to select all options by default?

77 views Asked by At

Background

Google App Maker has a Multi Select Widget which allows the user to select several options from a list.

Multi Select Widget with 'Suppliers' heading

Current State

By default, all options are unselected and the user must manually select all desired options.

Desired State

I would like to programatically cause all options to be selected so that the user can manually deselect all undesired options.

What I've Tried

App Maker Documentation:

The Multi Select Widget documentation provides information about how to bind options and values, but does not provide an option for pre-selecting these options.

Javascript onAttach Event and onDataLoad Event:

I attempted to run Javascript to programatically select the options but think this is where I'm coming undone.

The options in my Multi Select Widget are bound to @datasources.Suppliers.items..Supplier_Name and all options are displayed in the widget correctly.

I can successfully hard-code the options to be programatically selected, e.g.:

var optionsToBeProgramaticallySelected = ["Option1", "Option2", "Option3"];
widget.values = optionsToBeProgramaticallySelected;

... however, I do not want to hard-code the values to be selected because these will change over time. Therefore, I attempted to programatically create an array of all options and use that as the list of options to be programatically selected. However, I was not able to successfully return the array for use. The code I used to attempt this is:

var listOfAllPossibleOptions = app.datasources.Suppliers.items.concat();
widget.values = listOfAllPossibleOptions;

Question

How can I cause my Multi Select Widget to select all options?

1

There are 1 answers

0
FSperoni On

Perhaps try querying the Suppliers datasource (on the server side), getting the results into an array.

Your client side function (multi select widget is passed on as parameter):

function querySuppliers(MultiSelectWidget){
    google.script.run
      .withFailureHandler(function() {
      alert("Unable to query suppliers");
  })
    .withSuccessHandler(function(result) {//this is the return value from server side
      MultiSelectWidget.values = result;
       })
     .querySuppliers();
} 

Your server side function:

function querySuppliers(){
  var suppliersDS = app.models.Suppliers.newQuery();//new query to datasource
  var suppliers = suppliersDS.run();//run the query
  var returnArray = [];//array to store suppliers
  for (i=0; i<suppliers.length; i++) {//traverse through suppliers to grab names
    returnArray.push(suppliers[i].Supplier_Name);
  }
  return returnArray;
}