[Google Apps Script] 自訂 Google Form Drop Down Menu 資料來源

於Google Form 中, Drop down menu 選項都須要手動填寫, 然而若果有多個drop down menu 都是同樣的內容, 雖然可以duplicate, 以copy & paste 的型式實現, 但也太費時失事. 若果將資料來源放到sheet 中再作存取, 當sheet 修改後, 其他對應的item 也會更新. 方法如下:

1. 建立Sheet 作資料來源, 開啟Script Editor, 建立Project 並輸入以下代碼.

   function updateForm() {
     // Spreadsheet content property.
     var spreadSheetContentTopRow=2;
     var spreadSheetContentTopColumn=1;
     
     // Datasource row index.
     var dataSourceCourseIDRowIndex=0;
     var dataSourceCourseNameRowIndex=1;
     var dataSourceCourseIsVisible=4;
     
     // Get Google Form by ID.
     var targetForm=FormApp.openById(PropertiesService.getScriptProperties().getProperty("COURSE_APP_FORM_ID"));
     
     // Get course drop down by ID and split to array for multiple values.
     var courseDropDownIDs=PropertiesService.getScriptProperties().getProperty("COURSE_APP_FORM_DROP_DOWN_ID").split(",");
     var courseDropDown=[];
     for(var i=0; i<courseDropDownIDs.length; i++)
     {
       courseDropDown.push(targetForm.getItemById(courseDropDownIDs[i]).asListItem())
     }
     
     // Set data source information.
     var dataSourceSpreadSheet=SpreadsheetApp.getActive();
     var dataSourceSheet=dataSourceSpreadSheet.getSheetByName(PropertiesService.getScriptProperties().getProperty("COURSE_APP_COURSE_INFO_SHEET_NAME"));
     var dataSource=dataSourceSheet.getRange(spreadSheetContentTopRow, spreadSheetContentTopColumn, dataSourceSheet.getLastRow(), dataSourceSheet.getLastColumn()).getValues();
     
     // Generate display text.
     var courseDisplayName=[];
     for(var row=0; row<dataSource.length; row++)
     {
       if((dataSource[row][dataSourceCourseIDRowIndex]!=null) && (dataSource[row][dataSourceCourseNameRowIndex]!=null) && (dataSource[row][dataSourceCourseIsVisible]!=null))
       {
         if(dataSource[row][dataSourceCourseIsVisible]==true)
         {
           courseDisplayName.push(dataSource[row][dataSourceCourseIDRowIndex] +" - "+dataSource[row][dataSourceCourseNameRowIndex]);
         }
       }
     }
     
     // Set display text to drop down menu.
     for(var i=0; i<courseDropDownIDs.length; i++)
     {
       courseDropDown[i].setChoiceValues(courseDisplayName);
     }
   }

2. 獲得Google Form ID.
   開啟Google Form, 在URL 中找出”/d/[[Form_ID]]/edit”.
   
3. 獲得 Drop down menu ID.
   在Google Form 中啟動Development tools, 選取drop down, 於HTML tag 中選取property data-item-id 的值.
   
4. 建立Constant.
   在Script Editor 中, 選取File > Project Property, 選取Script Property, 並按Add Row, 輸入如下數值:

   Property	Value
   COURSE_APP_COURSE_INFO_SHEET_NAME	<<Sheet_Name>>
   COURSE_APP_FORM_ID	<<Form_ID>>
   COURSE_APP_FORM_DROP_DOWN_ID	<<DropDownID_1>>,<<DropDownID_2>>,<<DropDownID_3>>…

   

5. 測試程式.
   按 Debug 後開啟 Google Form, 順利的話, 相對應的資料會顯示出來.