3

テキスト入力と添付ファイルのファイルアップロードを含むフォームで検証/必須フィールドを実行しようとしています。

スクリプトは入力を受け取り、ユーザーがファイルを添付できるようにします。送信すると、入力フィールドがスプレッドシートに追加され、ファイルがドライブにアップロードされます。私がやりたいことは、テキスト入力とドロップダウンリストに回答を強制し、ファイルの添付を要求することです。

「サンプル検証」の例のこのリンクを見つけましたが、コードのクリック ハンドラーにこれを追加しようとすると問題が発生します。誰かが正しい方向を指すのを助けることができますか?

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

function doGet(e) {
  var app = UiApp.createApplication().setTitle('Loan Registration Processing');
  var panel = app.createFormPanel();
  var grid = app.createGrid(10,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 Units');
      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('Point File');
  var upLoad = (app.createFileUpload().setName('thefile'));
  var upLoadTypeLabel2 = app.createLabel('Credit Report');
  var upLoad2 = (app.createFileUpload().setName('thefile2'));

  //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, upLoadTypeLabel2)
      .setWidget(7, 1, upLoad2)
      .setWidget(8, 0, submitButton)
      .setWidget(9, 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;

   //Spreadsheet to load form values to
   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 fileBlob2 = e.parameter.thefile2;
   //Grabs the folder to send upload files
   var folder = DocsList.getFolderById('0B8PHKnfhErK-T2IzRW9ZWjcwRmc');
   //Creates the upload file in root
   var doc = DocsList.createFile(fileBlob);
   var doc2 = DocsList.createFile(fileBlob2);
   //moves created files in root to specific folder
   doc.addToFolder(folder);
   doc2.addToFolder(folder);
   //Remove the copy left in the root, leaving only the version in the specific folder
   doc.removeFromFolder(DocsList.getRootFolder());       
   doc2.removeFromFolder(DocsList.getRootFolder());   
   //Message to user after submit of form

   var uplabel = app.createHTML('<B>Thank you for your Loan Registation Subumission. Press F5 on your keyboard to enter another Loan Registration.</B>');

//Send email to group
   var emailAddress = 'email@email.com';
   var folderURL = 'Folder URL';
   var ssURL = 'SS URL';

   var message = "<HTML><BODY>"
   + "<P>" + " A new Loan Registration has been submitted."
   + '<P>You can access the Loan Submitted documents <A HREF="' + folderURL + '">here</A>.'
   + '<P>You can access the submitted Loan Registration Spreadsheet <A HREF="' + ssURL + '">here</A>.'
   + "</HTML></BODY>";
   MailApp.sendEmail(emailAddress, "New Loan Registrtion Submittal Posted!", "", {htmlBody: message}); 
   app.add(uplabel);   
   return app;   
 }

編集 - 2 番目のファイルのアップロードで追加され、送信が有効にならない

戻ってスクリプトを編集し、基本的に以前と同じ機能を実行するように少し変更しましたが、これには 2 つのファイルをアップロードする必要があります。私は同じコードに従っていますが、テストした後、送信ボタンが有効になりません..更新されたコードは次のとおりです。

//Create the Labels, TextBoxes, and Drop downs
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var Lender = app.createTextBox().setWidth('150px').setName('lender');
var correspondentBroker = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('correspondentbroker');
    correspondentBroker.addItem('Select Option');
    correspondentBroker.addItem('Correspondent');
    correspondentBroker.addItem('Broker');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var loanprogram = app.createTextBox().setWidth('150px').setName('program');
var rate = app.createTextBox().setWidth('150px').setName('rate');
var ysp = app.createTextBox().setWidth('150px').setName('ysp');
var closingcostcredit = app.createTextBox().setWidth('150px').setName('credit');
var ltv = app.createTextBox().setWidth('150px').setName('ltv');
var impound = app.createListBox().setName('impounds').setWidth('120px').setName('impounds');
    impound.addItem('Select Option');
    impound.addItem('Yes');
    impound.addItem('No');
var mortgageIns = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('mortgageinsurance');
    mortgageIns.addItem('Select Option');
    mortgageIns.addItem('MI');
    mortgageIns.addItem('PMI Borrower Paid');
    mortgageIns.addItem('PMI Lender Paid');
var upLoad = app.createFileUpload().setName('thefile');
var upLoad2 = app.createFileUpload().setName('thefile2');
var uploadtracker = app.createTextBox().setVisible(false);
var uploadtracker2 = app.createTextBox().setVisible(false);
var submitButton = app.createSubmitButton('<B>Submit</B>');  
var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#FFcc99').setStyleAttribute('fontSize','20px');


//Click Handlers are set
var cliHandler2 = app.createClientHandler()
.validateLength(borrowerTextbox, 1, 40)
.validateLength(Lender, 1, 40)
.validateNotMatches(correspondentBroker,'Select Option')
.validateLength(loanAmountTextbox, 1, 40)
.validateLength(loanprogram, 1, 40)
.validateNotMatches(mortgageIns,'Select Option')
.validateLength(rate, 1, 40)
.validateLength(ysp, 1, 40)
.validateLength(closingcostcredit, 1, 40)
.validateLength(ltv, 1, 40)
.validateNotMatches(impound, 'Select Option')
.validateMatches(uploadtracker, 'selected')
.validateMatches(uploadtracker2, 'selected')
.forTargets(submitButton).setEnabled(true)
.forTargets(warning)
.setHTML('Now you can submit your form')
.setStyleAttribute('background','#99FF99')
.setStyleAttribute('fontSize','12px');

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

//Grid layout of items on form
grid.setText(0, 0, 'Borrower Name')
  .setWidget(0, 1, borrowerTextbox)
  .setText(1, 0, "Lender")
  .setWidget(1, 1, Lender)
  .setText(2, 0, 'Correspondent or Broker')
  .setWidget(2, 1, correspondentBroker)
  .setText(3, 0, 'Loan Amount')
  .setWidget(3, 1, loanAmountTextbox)
  .setText(4, 0, 'Loan Program')
  .setWidget(4, 1, loanprogram)  
  .setText(5, 0, 'Rate')
  .setWidget(5, 1, rate)  
  .setText(6, 0, 'YSP')
  .setWidget(6, 1,ysp)
  .setText(7, 0, 'Closing Cost Credit')
  .setWidget(7, 1, closingcostcredit)
  .setText(8, 0, 'LTV')
  .setWidget(8, 1, ltv)
  .setText(9, 0, 'Impounds')
  .setWidget(9, 1,impound)  
  .setText(10, 0, 'Point File')
  .setWidget(10, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
  .setText(11, 0, 'Credit Report')
  .setWidget(11, 1, upLoad2.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
  .setWidget(12, 0, submitButton)
  .setWidget(12, 1, warning)
  .setWidget(13, 0, uploadtracker)
  .setWidget(13, 1, uploadtracker2)
  .addClickHandler(cliHandler2);

var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS BEING UPLOADED TO Google Drive<B>').setStyleAttribute('background','yellow');
submitButton.addClickHandler(cliHandler).setEnabled(false);

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

EDIT-to Add CliHandler4 4 番目の cliHandler を反映するようにコードを更新しましたが、まだ送信ボタンをアクティブにできません。なぜ失敗したのかわかりません..何度か調べましたが、何が問題なのかわかりません..コードは次のとおりです

答えとして編集：UIに1つのウィジェットがありませんでした（mortgageIns）

    var submissionSSKey = 'ID GOES HERE';
    var Panelstyle = {'background':'#c0d6e4','padding':'100px','borderStyle':'ridge','borderWidth':'15PX','borderColor':'#31698a'}


function doGet(e) {
  var app = UiApp.createApplication().setTitle('PCH Mortgage Disclosure Request');
  app.add(app.createImage("http://www.pchmortgage.com/img/logo_thumbnail/6644.png"));
  var instructLabel = app.createHTML('<B><p> </p><p>Be sure to fill in each field completely prior to submitting the Disclsure Request</P></B>');
  app.add(instructLabel);

//Create the FormPanel and Grid for the application  
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(450, 300);
  var grid = app.createGrid(15,2).setId('loanGrid');

//Create the Labels, TextBoxes, and Drop downs
    var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
    var lender = app.createTextBox().setWidth('150px').setName('lender');
    var correspondentBroker = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('correspondentbroker');
    correspondentBroker.addItem('Select Option');
    correspondentBroker.addItem('Correspondent');
    correspondentBroker.addItem('Broker');
    var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
    var loanprogram = app.createTextBox().setWidth('150px').setName('program');
    var rate = app.createTextBox().setWidth('150px').setName('rate');
    var ysp = app.createTextBox().setWidth('150px').setName('ysp');
    var closingcostcredit = app.createTextBox().setWidth('150px').setName('credit');
    var ltv = app.createTextBox().setWidth('150px').setName('ltv');
    var impound = app.createListBox().setName('impounds').setWidth('120px').setName('impounds');
    impound.addItem('Select Option');
    impound.addItem('Yes');
    impound.addItem('No');
    var mortgageIns = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('mortgageinsurance');
    mortgageIns.addItem('Select Option');
    mortgageIns.addItem('MI');
    mortgageIns.addItem('PMI Borrower Paid');
    mortgageIns.addItem('PMI Lender Paid');
    var upLoad = app.createFileUpload().setName('thefile');
    var upLoad2 = app.createFileUpload().setName('thefile2');
    var uploadtracker = app.createTextBox().setVisible(false);
    var uploadtracker2 = app.createTextBox().setVisible(false);
    var submitButton = app.createSubmitButton('<B>Submit</B>');  
    var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#9999ff').setStyleAttribute('fontSize','20px');


//Click Handlers are set
  var cliHandler2 = app.createClientHandler().validateLength(borrowerTextbox, 1, 40).validateLength(lender, 1, 40)
  .validateNotMatches(correspondentBroker,'Select Option').validateLength(loanAmountTextbox, 1, 40).validateLength(loanprogram, 1, 40)
  .validateLength(rate, 1, 40).validateLength(ysp, 1, 40).validateLength(closingcostcredit, 1, 40)
  .validateLength(ltv, 1, 40).validateNotMatches(mortgageIns,'Select Option')
  .validateMatches(uploadtracker, 'selected').validateMatches(uploadtracker2, 'selected')
  .forTargets(submitButton).setEnabled(true).forTargets(warning).setHTML('Now you can submit your form')
  .setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px');

  var cliHandler3 = app.createClientHandler().forTargets(uploadtracker).setText('selected')
  var cliHandler4 = app.createClientHandler().forTargets(uploadtracker2).setText('selected')
  //Grid layout of items on form
  grid.setText(0, 0, 'Borrower Name')
  .setWidget(0, 1, borrowerTextbox)
  .setText(1, 0, "Lender")
  .setWidget(1, 1, lender)
  .setText(2, 0, 'Correspondent or Broker')
  .setWidget(2, 1, correspondentBroker)
  .setText(3, 0, 'Loan Amount')
  .setWidget(3, 1, loanAmountTextbox)
  .setText(4, 0, 'Loan Program')
  .setWidget(4, 1, loanprogram)  
  .setText(5, 0, 'Rate')
  .setWidget(5, 1, rate)  
  .setText(6, 0, 'YSP')
  .setWidget(6, 1,ysp)
  .setText(7, 0, 'Closing Cost Credit')
  .setWidget(7, 1, closingcostcredit)
  .setText(8, 0, 'LTV')
  .setWidget(8, 1, ltv)
  .setText(9, 0, 'Impounds')
  .setWidget(9, 1,impound)  
  .setText(10, 0, 'Mortgage Insurance')
  .setWidget(10, 1,mortgageIns)  
  .setText(11, 0, 'Point File')
  .setWidget(11, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
  .setText(12, 0, 'Credit Report')
  .setWidget(12, 1, upLoad2.addChangeHandler(cliHandler4).addChangeHandler(cliHandler2))
  .setWidget(13, 0, submitButton)
  .setWidget(13, 1, warning)
  .setWidget(14, 0, uploadtracker)
  .setWidget(14, 1, uploadtracker2)
  .addClickHandler(cliHandler2);

  var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS BEING UPLOADED TO GOOGLE DRIVE<B>').setStyleAttribute('background','yellow');
  submitButton.addClickHandler(cliHandler).setEnabled(false);

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

1 に答える 1

5

これを行う簡単な方法の 1 つは、バリデーターで別のクライアント ハンドラーを使用することです。次のようにfileUploadに配置することをお勧めします:(同じ場所でコードを置き換えます)

  var cliHandler2 = app.createClientHandler().validateLength(loanAmountTextbox, 1, 20)
  .validateLength(borrowerTextbox, 1, 20).validateLength(lienPos, 1, 20).forTargets(submitButton).setEnabled(true);// you can add more conditions here (widget name, minimum length, max length)

  var upLoad = app.createFileUpload().setName('thefile').addChangeHandler(cliHandler2);

これにより、送信ボタンが有効になります。ここでテストできます

編集

クライアント ハンドラーのすべてのウィジェットをチェックする、より洗練されたオプションを次に示します。関連する部分全体を再現し、オンラインの例を更新します - EDIT3 : DateBox の検証が機能しません。これは、通過しなければならない問題です。 ! その間、同じハンドラーに新しいメッセージ処理を追加しました

編集4：（最後のもの！）

最終的に、ウィジェットの種類ごとに有効な解決策を見つけました。日付には「2」が含まれている必要があります (これは、数年間は当てはまると思います ;-) あちこちに変更を加えたため、doGet 関数全体を示します。 .. fileUpload ウィジェットが最後の位置に入力されている場合に最適に機能し (理由はわかりません)、特定の状況では、検証を取得するために textBow を再変更する必要がありますが、ほとんどの場合、正常に機能しています。

function doGet(e) {
  var app = UiApp.createApplication().setTitle('Loan Registration Processing');
  var panel = app.createFormPanel();
  var grid = app.createGrid(8,2).setId('loanGrid');
  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 borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
  var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
  var appDatebox = app.createDateBox().setWidth('150px').setName('date');
  var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
      lienPos.addItem('Select Option');     
      lienPos.addItem('1st');
      lienPos.addItem('2nd');
  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('Please fill in all fields').setStyleAttribute('background','#FFcc99').setStyleAttribute('fontSize','20px');
  //file upload
  var upLoad = app.createFileUpload().setName('thefile');
  var cliHandler2 = app.createClientHandler()
  .validateLength(borrowerTextbox, 1, 40).validateLength(loanAmountTextbox, 1, 40).validateNotMatches(loanList,'Select Option')
  .validateNotMatches(lienPos,'Select Option').validateNotMatches(propType, 'Select Option').validateMatches(appDatebox, '2','g')
  .validateNotMatches(upLoad, 'FileUpload').forTargets(submitButton).setEnabled(true).forTargets(warning)
  .setHTML('Now you can submit your form').setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px')

  //Grid layout of items on form
  grid.setText(0, 0, 'Loan Type')
      .setWidget(0, 1, loanList.addClickHandler(cliHandler2))
      .setText(1, 0, "Borrower's Name")
      .setWidget(1, 1, borrowerTextbox.addKeyUpHandler(cliHandler2))
      .setText(2, 0, 'Loan Amount')
      .setWidget(2, 1, loanAmountTextbox.addKeyUpHandler(cliHandler2))
      .setText(3, 0, 'Loan Date')
      .setWidget(3, 1, appDatebox)
      .setText(4, 0, 'Lien Position')
      .setWidget(4, 1, lienPos.addClickHandler(cliHandler2))
      .setText(5, 0, 'Property Type')
      .setWidget(5, 1, propType.addClickHandler(cliHandler2))
      .setText(6, 0, 'File Upload')
      .setWidget(6, 1, upLoad.addChangeHandler(cliHandler2))
      .setWidget(7, 0, submitButton)
      .setWidget(7, 1, warning);

  var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS UPLOADING<B>').setStyleAttribute('background','yellow');
  submitButton.addClickHandler(cliHandler).setEnabled(false);  
  panel.add(grid);
  app.add(panel);
  return app;
}
于 2013-03-08T20:56:13.633 に答える