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
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
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

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

Web app - add project


  1. Loving the web app posts.
    I'm currently playing around with integrating web apps into google sites pages using insert "embed". Wondering what your thought are on how complex these systems can become and what are you thought on load time for such things, finding the valuesForList function is taking a few seconds to load in the data. That's on top of the few seconds the web app itself takes to load on the Pages preview.

    1. Hi

      Thank you for your comment.

      I'm afraid I've not done a huge amount more with Web Apps since these initial posts, hence I cannot give effective feedback for you. I have a colleague who typically works on building the HTML, etc all within the Web App (rather than embedding it as you mention). He seems to find it works ok and performs as required (but it does mean a lot more HTML coding).

      Kind regards