Google Apps脚本创建包含文件上传的表单

时间:2013-03-07 01:05:27

标签: javascript google-apps-script google-apps

我正在创建一个基本表单,通过文本框和下拉列表获取用户输入,提交后将登录到电子表格。到目前为止这个工作正常。我想要添加到表单中的是“文件上传”功能,允许某人选择文件,并在提交表单时上传文件,因为文本框中的数据值和下拉列表都会记录到电子表格中。我已经查看了以下链接https://developers.google.com/apps-script/class_fileupload,但我很难将示例插入/添加到现有的doGet函数中。任何人都可以提供帮助或提供建议吗?这是目前为止的Google App脚本代码。

* 使用以下链接将表单基于:https://sites.google.com/site/appsscripttutorial/advanced-examples/insert-data-in-sheet-using-ui-forms

// Script-as-app template.
 var submissionSSKey = 'Spreadsheet Key goes Here';

 function doGet() {
   var app = UiApp.createApplication().setTitle('Loan Registration Processing');
   var panel = app.createVerticalPanel();
   var grid = app.createGrid(8,2).setId('loanGrid');
   var loanTypeLabel = app.createLabel('Loan Type');
   var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
   loanList.addItem('Select Option');    
   loanList.addItem('FHA');
  loanList.addItem('Convential');  
  loanList.addItem('VA');
  loanList.addItem('Reverse');
  loanList.addItem('HELOC');
   var borrowerNameLabel = app.createLabel("Borrower's Name");
   var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
   var loanAmountLabel = app.createLabel('Loan Amount');
   var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
   var appDateLabel = app.createLabel('Loan Date');
   var appDateTextbox = app.createTextBox().setWidth('150px').setName('date');
   var lienPostition = app.createLabel('Lien Position');
   var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
  lienPos.addItem('Select Option');     
  lienPos.addItem('1st');
  lienPos.addItem('2nd');
   var propertyType = app.createLabel('Property Type');
   var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
  propType.addItem('Select Option');
  propType.addItem('1-4');
  propType.addItem('Manufactured');
   var submitButton = app.createButton('Submit'); 

   //Grid layout of items on form
   grid.setWidget(0, 0, loanTypeLabel)
  .setWidget(0, 1, loanList)
  .setWidget(1, 0, borrowerNameLabel)
  .setWidget(1, 1, borrowerTextbox)
  .setWidget(2, 0, loanAmountLabel)
  .setWidget(2, 1, loanAmountTextbox)
  .setWidget(3, 0, appDateLabel)
  .setWidget(3, 1, appDateTextbox)
  .setWidget(4, 0, lienPostition)
  .setWidget(4, 1, lienPos)
  .setWidget(5, 0, propertyType)
  .setWidget(5, 1, propType)
  .setWidget(6, 0, submitButton)

   //Event Handler
   var handler = app.createServerClickHandler('insertInSS');
   handler.addCallbackElement(panel);
   submitButton.addClickHandler(handler);  
   panel.add(grid);
   app.add(panel);
   return app;

 }
 //Function to insert data in the sheet on clicking the submit button
 function insertInSS(e){
   var app = UiApp.getActiveApplication();
   var LoanType = e.parameter.LoanType;
   var borrower = e.parameter.borrower;
   var amount = e.parameter.amount;
   var date = e.parameter.date;
   var LienPosition = e.parameter.LienPosition;
   var PropertyType = e.parameter.PropertyType;
   //app.getElementById('info').setVisible(true).setStyleAttribute('color','red');

   var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
   var lastRow = sheet.getLastRow();
   var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
   return app;
 }

3 个答案:

答案 0 :(得分:5)

这里是正确格式化的代码:

// Script-as-app template.
var submissionSSKey = '*************';

function doGet(e) {
  var app = UiApp.createApplication().setTitle('Loan Registration Processing');
  var panel = app.createFormPanel();
  var grid = app.createGrid(8,2).setId('loanGrid');
  var loanTypeLabel = app.createLabel('Loan Type');
  var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
      loanList.addItem('Select Option');    
      loanList.addItem('FHA');
      loanList.addItem('Convential');  
      loanList.addItem('VA');
      loanList.addItem('Reverse');
      loanList.addItem('HELOC');
  var borrowerNameLabel = app.createLabel("Borrower's Name");
  var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
  var loanAmountLabel = app.createLabel('Loan Amount');
  var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
  var appDateLabel = app.createLabel('Loan Date');
  var appDateTextbox = app.createDateBox().setWidth('150px').setName('date');
  var lienPostition = app.createLabel('Lien Position');
  var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
      lienPos.addItem('Select Option');     
      lienPos.addItem('1st');
      lienPos.addItem('2nd');
  var propertyType = app.createLabel('Property Type');
  var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
      propType.addItem('Select Option');
      propType.addItem('1-4');
      propType.addItem('Manufactured');
  var submitButton = app.createSubmitButton('<B>Submit</B>'); 
  var warning = app.createHTML('<B>PLEASE WAIT WHILE DATA IS UPLOADING<B>').setStyleAttribute('background','yellow').setVisible(false)
  //file upload
  var upLoadTypeLabel = app.createLabel('File Upload');
  var upLoad = (app.createFileUpload().setName('thefile'));

  //Grid layout of items on form
  grid.setWidget(0, 0, loanTypeLabel)
      .setWidget(0, 1, loanList)
      .setWidget(1, 0, borrowerNameLabel)
      .setWidget(1, 1, borrowerTextbox)
      .setWidget(2, 0, loanAmountLabel)
      .setWidget(2, 1, loanAmountTextbox)
      .setWidget(3, 0, appDateLabel)
      .setWidget(3, 1, appDateTextbox)
      .setWidget(4, 0, lienPostition)
      .setWidget(4, 1, lienPos)
      .setWidget(5, 0, propertyType)
      .setWidget(5, 1, propType)
      .setWidget(6, 0, upLoadTypeLabel)
      .setWidget(6, 1, upLoad)
      .setWidget(7, 0, submitButton)
      .setWidget(7, 1, warning)

  var cliHandler = app.createClientHandler().forTargets(warning).setVisible(true)
  submitButton.addClickHandler(cliHandler);  
  panel.add(grid);
  app.add(panel);
  return app;

}

 function doPost(e) {
  var app = UiApp.getActiveApplication();
  var LoanType = e.parameter.LoanType;
  var borrower = e.parameter.borrower;
  var amount = e.parameter.amount;
  var date = e.parameter.date;
  var LienPosition = e.parameter.LienPosition;
  var PropertyType = e.parameter.PropertyType;
  //app.getElementById('info').setVisible(true).setStyleAttribute('color','red');

  var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
   // data returned is a blob for FileUpload widget
   var fileBlob = e.parameter.thefile;
   var doc = DocsList.createFile(fileBlob);
   return app
 }

答案 1 :(得分:2)

您必须将面板放入formPanel,使用submitButton并在单个doPost函数中获取所有结果。无需在此上下文中定义处理程序或任何callbackElement,因此您应该删除它们以避免冲突。

如果你看一下你作为参考展示的简单例子,你会看到必须采用表格提交的结构。我知道它的工作方式也是如此,但不适用于文件上传......

以下是您正在使用的代码:我做了一些更改...... testable here

  1. 将日期的textBox更改为dateBox
  2. 添加了一个客户端处理程序,以便在文件上传时显示警告,因为如果文件很大,这可能需要一段时间; - )
  3. 抱歉,系统有问题,我无法正确格式化代码,我会另外回答......

答案 2 :(得分:0)

我已经弄清楚如何将文件上传附加到网格并显示,允许文件选择并将数据值提交到电子表格。它不会将选择文件上传到我的驱动器。

我在下面发布了更新的代码。有关为什么不将文件发布到我的驱动器的任何想法?

// Script-as-app template.
var submissionSSKey = 'Spreadsheet Key';

function doGet(e) {
  var app = UiApp.createApp ication().setTitle('Loan Registration Processing');
  var panel = app.createVerticalPanel();
  var grid = app.createGrid(8,2).setId('loanGrid');
  var loanTypeLabel = app.createLabel('Loan Type');
  var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
      loanList.addItem('Select Option');    
      loanList.addItem('FHA');
      loanList.addItem('Convential');  
      loanList.addItem('VA');
      loanList.addItem('Reverse');
      loanList.addItem('HELOC');
  var borrowerNameLabel = app.createLabel("Borrower's Name");
  var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
  var loanAmountLabel = app.createLabel('Loan Amount');
  var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
  var appDateLabel = app.createLabel('Loan Date');
  var appDateTextbox = app.createTextBox().setWidth('150px').setName('date');
  var lienPostition = app.createLabel('Lien Position');
  var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
      lienPos.addItem('Select Option');     
      lienPos.addItem('1st');
      lienPos.addItem('2nd');
  var propertyType = app.createLabel('Property Type');
  var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
      propType.addItem('Select Option');
      propType.addItem('1-4');
      propType.addItem('Manufactured');
  var submitButton = app.createButton('Submit'); 

  //file upload
  var upLoadTypeLabel = app.createLabel('File Upload');
  var upLoad = (app.createFileUpload().setName('thefile'));

  //Grid layout of items on form
  grid.setWidget(0, 0, loanTypeLabel)
      .setWidget(0, 1, loanList)
      .setWidget(1, 0, borrowerNameLabel)
      .setWidget(1, 1, borrowerTextbox)
      .setWidget(2, 0, loanAmountLabel)
      .setWidget(2, 1, loanAmountTextbox)
      .setWidget(3, 0, appDateLabel)
      .setWidget(3, 1, appDateTextbox)
      .setWidget(4, 0, lienPostition)
      .setWidget(4, 1, lienPos)
      .setWidget(5, 0, propertyType)
      .setWidget(5, 1, propType)
      .setWidget(6, 0, upLoadTypeLabel)
      .setWidget(6, 1, upLoad)
      .setWidget(7, 0, submitButton)

  //Event Handler
  var handler = app.createServerClickHandler('insertInSS');
  handler.addCallbackElement(panel);
  submitButton.addClickHandler(handler);  
  panel.add(grid);
  app.add(panel);
  return app;

}
//Function to insert data in the sheet on clicking the submit button
function insertInSS(e){
  var app = UiApp.getActiveApplication();
  var LoanType = e.parameter.LoanType;
  var borrower = e.parameter.borrower;
  var amount = e.parameter.amount;
  var date = e.parameter.date;
  var LienPosition = e.parameter.LienPosition;
  var PropertyType = e.parameter.PropertyType;
  //app.getElementById('info').setVisible(true).setStyleAttribute('color','red');

  var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
  return app;
}

 function doPost(e) {
   // data returned is a blob for FileUpload widget
   var fileBlob = e.parameter.thefile;
   var doc = DocsList.createFile(fileBlob);
 }