validation - Google Apps 脚本文件上传状态指示器 clickhandler

Question

从其他几个示例中获取组件。我拼凑了以下脚本（可以在这里运行）：

var submissionSSKey = '0AhpMXVz35LNCdG1Qa0c2V1hHRnhOUU00SjQ0SEdlRVE';
var Panelstyle = {'background':'#dddddd','padding':'40px','borderStyle':'solid','borderWidth':'10PX','borderColor':'#bbbbbb'}

function doGet() {

  var app = UiApp.createApplication().setTitle('PQOT File Upload').setStyleAttribute('padding','50PX');
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var title = app.createHTML('<B>File Upload</B>').setStyleAttribute('color','grey').setStyleAttribute('fontSize','25PX');
  var grid = app.createGrid(8,4).setId('grid');
  var RequestID = app.createTextBox().setWidth('250px').setName('reqID');
  var unix = app.createTextBox().setWidth('250px').setName('unix');
  var upLoad = app.createFileUpload().setName('uploadedFile');
  var submitButton = app.createSubmitButton('<B>Upload</B>'); 
  var warning = app.createHTML('Please fill in all fields')
      .setStyleAttribute('background','#ff6262')
      .setStyleAttribute('fontSize','18px');
  var uploadtracker = app.createTextBox().setVisible(false);

  var cliHandler2 = app.createClientHandler()
      .validateLength(RequestID, 5, 5)
      .validateInteger(RequestID)
      .validateLength(unix, 1, 12)
      .validateMatches(uploadtracker, 'selected')
      .forTargets(submitButton).setEnabled(true)
      .forTargets(warning).setHTML('File upload ready')
      .setStyleAttribute('background','#99FF99')
      .setStyleAttribute('fontSize','18px');

  var cliHandler3 = app.createClientHandler()
      .forTargets(uploadtracker)
      .setText('selected')

  grid.setWidget(0, 1, title)
      .setText(1, 0, 'PQOT Request # (5 digits):')
      .setWidget(1, 1, RequestID.addKeyUpHandler(cliHandler2))
      .setText(2, 0, 'Enter Unix ID:')
      .setWidget(2, 1, unix.addKeyUpHandler(cliHandler2))
      .setText(3, 0, 'Select File:')
      .setWidget(3, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
      .setText(5, 0, 'Completion Check:')
      .setWidget(5, 1, warning)
      .setWidget(6, 3, submitButton)
      .setWidget(7,0,uploadtracker).addClickHandler(cliHandler2);


  var cliHandler = app.createClientHandler()
      .forTargets(warning).setHTML('FILE UPLOADING...')
      .setStyleAttribute('background','#FEFE22')
      .setStyleAttribute('fontSize','18px')
      .setVisible(true);

  submitButton.addMouseUpHandler(cliHandler)
      .setEnabled(false);  



   panel.add(grid);
   app.add(panel);
   return app;
}



function doPost(e) {
  var app = UiApp.getActiveApplication();
  var reqID = e.parameter.reqID;
  var unix = e.parameter.unix;
  var fileBlob = e.parameter.uploadedFile;
  var doc = DocsList.createFile(fileBlob);
  var timestamp = Utilities.formatDate(new Date(), "PST", "MM-dd-yyyy HH:mm:ss"); 
  var description = 'Requestor Unix: '+ unix + '  PQOT Request ID: ' + reqID + ' Timestamp: ' + timestamp
  doc.setDescription(description)
  var folder = DocsList.getFolder ('PQOT Upload')
  doc.addToFolder(folder);
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 3).setValues([[reqID,unix,doc.getUrl()]]);
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var label = app.createLabel('Thank you!  Your file was uploaded successfully.  To submit another, please refresh your browser: (windows - F5, mac - ⌘ + r). ');


   label.setStyleAttribute("color", "green")
        .setStyleAttribute("fontSize", "large");
        label.setStyleAttribute("text-align","left");
        label.setSize(300,200);

  panel.add(label);
  app.add(panel)      
   return app;
}

一切都很好，但是我注意到中间消息“文件上传...”没有显示。本节：

  var cliHandler = app.createClientHandler()
      .forTargets(warning).setHTML('FILE UPLOADING...')
      .setStyleAttribute('background','#FEFE22')
      .setStyleAttribute('fontSize','18px')
      .setVisible(true);

我验证了该错误也发生在类似的脚本中。我认为这与第三次点击处理程序的引入有关。无论如何，这部分代码似乎没有运行，或者由于某种原因小部件不可见。

score 0 · Accepted Answer

这是您的代码的工作版本，我做了很少的更改，但我仍然有几个问题：

uploadtracker 小部件有什么用？我删除了这个（不可见）小部件上的处理程序，它开始工作......它完全是目标和源......不是一个好主意;-)
在 doPost 中，您使用 formPanel 来放置“谢谢”标签……它在您的测试中有效吗？在我的测试中它导致了一个错误，所以我用一个verticalPanel替换它并修复了错误。你有什么想法吗？

现在代码：

function doGet() {
  var app = UiApp.createApplication().setTitle('PQOT File Upload').setStyleAttribute('padding','50PX');
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var title = app.createHTML('<B>File Upload</B>').setStyleAttribute('color','grey').setStyleAttribute('fontSize','25PX');
  var grid = app.createGrid(8,4).setId('grid');
  var RequestID = app.createTextBox().setWidth('250px').setName('reqID');
  var unix = app.createTextBox().setWidth('250px').setName('unix');
  var upLoad = app.createFileUpload().setName('uploadedFile');
  var submitButton = app.createSubmitButton('<B>Upload</B>').setEnabled(false); 
  var warning = app.createHTML('Please fill in all fields')
  .setStyleAttribute('background','#ff6262')
  .setStyleAttribute('fontSize','18px');
  var uploadtracker = app.createTextBox().setVisible(false);

  var cliHandler1 = app.createClientHandler()
  .forTargets(warning).setHTML('FILE UPLOADING...')
  .setStyleAttribute('background','#FEFE22')
  .setStyleAttribute('fontSize','18px')
  .setVisible(true);

  var cliHandler2 = app.createClientHandler()
  .validateLength(RequestID, 5, 5)
  .validateInteger(RequestID)
  .validateLength(unix, 1, 12)
  .validateMatches(uploadtracker, 'selected')
  .forTargets(submitButton).setEnabled(true)
  .forTargets(warning).setHTML('File upload ready')
  .setStyleAttribute('background','#99FF99')
  .setStyleAttribute('fontSize','18px');

  var cliHandler3 = app.createClientHandler()
  .forTargets(uploadtracker)
  .setText('selected');;

  grid.setWidget(0, 1, title)
      .setText(1, 0, 'PQOT Request # (5 digits):')
      .setWidget(1, 1, RequestID.addKeyUpHandler(cliHandler2))
      .setText(2, 0, 'Enter Unix ID:')
      .setWidget(2, 1, unix.addKeyUpHandler(cliHandler2))
      .setText(3, 0, 'Select File:')
      .setWidget(3, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
      .setText(5, 0, 'Completion Check:')
      .setWidget(5, 1, warning)
      .setWidget(6, 3, submitButton)
      .setWidget(7,0,uploadtracker);



  submitButton.addClickHandler(cliHandler1);  



   panel.add(grid);
   app.add(panel);
   return app;
}



function doPost(e) {
  var app = UiApp.getActiveApplication();
  var reqID = e.parameter.reqID;
  var unix = e.parameter.unix;
  var fileBlob = e.parameter.uploadedFile;
  var doc = DocsList.createFile(fileBlob);
  var timestamp = Utilities.formatDate(new Date(), "PST", "MM-dd-yyyy HH:mm:ss"); 
  var description = 'Requestor Unix: '+ unix + '  PQOT Request ID: ' + reqID + ' Timestamp: ' + timestamp
  doc.setDescription(description)
  var folder = DocsList.getFolder ('PQOT Upload')
  doc.addToFolder(folder);
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 3).setValues([[reqID,unix,doc.getUrl()]]);
  var panel = app.createVerticalPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var label = app.createLabel('Thank you!  Your file was uploaded successfully.  To submit another, please refresh your browser: (windows - F5, mac - ⌘ + r). ');


   label.setStyleAttribute("color", "green")
        .setStyleAttribute("fontSize", "large");
        label.setStyleAttribute("text-align","left");
        label.setSize(300,200);

  panel.add(label);
  app.add(panel)      
   return app;
}

编辑：注意

即使使用“选定”技巧，它也不会阻止用户返回并删除某些字段的情况，对于文件上传来说，如果删除文件它不会更新按钮的验证。恐怕这是在服务器处理程序（doPost）中处理以捕获所有错误并重新提交表单的工作。Mogsdad 最近有一篇关于多步骤表单的有趣帖子：链接

validation - Google Apps 脚本文件上传状态指示器 clickhandler

1 回答 1

Related

Reference