while working on a specific project, i stumbled upon the need to create a way for folks to enter their choice(s), but of course in a way that could easily be quantified i.e. the input for the same/similar option had to be uniform across the board and for 'em to be able to even choose the right options (say, avoid typos).
this led me to explore the autocomplete module of materializecss and the two formats with which we could achieve this viz. the chips & select components.
the easy part was to gather data from spreadsheet, which anyway happens as part of an array structure; however, the
select components of materialize framework accepts two very different form of values (albeit, they're the object type) as input for dynamic options.
the overall structure can be broken down into 3 essentials parts -
- fetch data from spreadsheet: if it's a single column, use the default methodology (as shown in the code below) and if specific columns are to be chosen for input, then create an array structure to accept values from only those columns.
- return them as an array to the functions being invoked form the client side (i.e. the <script> inside the html file)
- process the array on the client side to the required format
so far, this should seem like the standard approach; however, while there is a specific "option" that has been defined for chips - autocompleteOptions - along with the object structure that it accepts, it is still not clear to me on how is the same to be processed for the select component, even though it too has a parameter for dropdownOptions (i'm assuming this is to accommodate dynamic values, which in turn needs to be passed as an object but for clarity, i've opened a github request here).
in the meantime, thanks to a colleague from work (and of course - this stackoverflow solution), we bask in the workaround with jquery!
you can access the entire script on my github repository here.
code.gs part of it is pretty simple:
a huge chunk of code rather goes behind accepting the right format of values to initialise dynamic options for the individual components.
here's for the chips module:
and this is the select module: