Pages

Friday, 4 October 2019

Web app - capture information and add an apps script dropdown

Continuing with the web app project from here there are now some further additions that have been introduced:
  • More fields for capturing information - dropdown list, textarea;
  • A dropdown list populated via Google Apps Script which links to items in a spreadsheet.
Screenshot of webpage with input fields
Screenshot of webpage with input fields
valuesForList.gs
This Apps Script function accesses another Google Sheet, gets a list of values from it and defines them in a named-range. This list is then used to populate the sub-project dropdown in the index.html.
Screenshot of dropdown list with options
Screenshot of dropdown list with options
onListSuccess(list)
This function in the index.html <head></head> acquires the list of items from the above Apps Script. It looks for the element in the html webpage that has the id of subprojects (which is one of the dropdown items). It then creates a set of options that are appended to form the dropdown list itself.
// create an 'option' element for the dropdown list
var opt = document.createElement("option");

       
// add the newly created 'option' to the dropdown list
dropdown.options.add(opt);

       
// set the wording and corresponding value
opt.text = list[i][0];
opt.value = list[i][0];

Web app - add project details.gs

No comments:

Post a comment