2017-08-16 69 views
0

我正在创建container-bound绑定到Google电子表格的Google Apps脚本。在我的GS代码中,我使用Google HTML Service在Google表格中显示对话框(即HTML表单)。Google Apps脚本 - HTML服务 - 用于客户端表单提交的“等待”

我遇到的问题是,当我呈现HTML表单客户端时,GS服务器端代码继续运行。相反,我想“暂停”服务器端代码,并等待用户提交表单。

这可能吗?

这是我到目前为止有:

Code.gs

function onOpen(e) { 
    var ui = SpreadsheetApp.getUi(); 
    ui.createMenu('Custom') 
     .addItem('Generate Shipping Email', 'menuItem1') 
     .addToUi(); 
} 

function menuItem1() { 
    var html = HtmlService.createHtmlOutputFromFile('index'); 
    var ui = SpreadsheetApp.getUi() 
    ui.showModalDialog(html, 'Shipping Email Options'); // This line shows the modal in index.html 

    // Here is where I would like to "pause" until the HTML form is submitted by user clicking the button with id="button1id" ... 

    Logger.log("Line after showModalDialog"); // ... however, currently this code runs before the user clicks submit or cancel button in the html form 
    // Rest of code which should not run until user clicks submit or cancel button will go here 
} 

readyToSendEmail(shippingNeeded, notes) { 
    // Some non-relevant code goes here 
} 

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 
    <form class="form-horizontal"> 
    <fieldset> 

    <!-- Form Name --> 


    <!-- Multiple Radios (inline) --> 
    <div class="form-group"> 
    <label class="col-md-4 control-label" for="radios">Do you need expedited shipping?</label> 
    <div class="col-md-4"> 
    <label class="radio-inline" for="radios-0"> 
    <input type="radio" name="radios" id="shippingNeededYes" value="Yes" checked="checked"> 
    Yes 
    </label> 
    <label class="radio-inline" for="radios-1"> 
    <input type="radio" name="radios" id="shippingNeededNo" value="No"> 
    No 
    </label> 
    </div> 
    </div> 

    <!-- Textarea --> 
    <div class="form-group"> 
    <label class="col-md-4 control-label" for="textarea">Additional shipping notes:</label> 
    <div class="col-md-4">      
    <textarea class="form-control" id="textarea" name="textarea"></textarea> 
    </div> 
    </div> 

    <!-- Button (Double) --> 
    <div class="form-group"> 
    <label class="col-md-4 control-label" for="button1id">Ready to send?</label> 
    <div class="col-md-8"> 
    <button id="button1id" name="button1id" class="btn btn-primary" onclick="clickedSubmit()">Yes, send the email</button> 
    <button id="button2id" name="button2id" class="btn btn-default" onclick="google.script.host.close()">Cancel, do not send an email</button> 
    </div> 
    </div> 

    </fieldset> 
    </form> 

    <script> 
    function clickedSubmit() { 
    if(document.getElementById('shippingNeededYes').checked) { 
     var shippingNeeded = "Yes"; 
    } else { 
     var shippingNeeded = "No"; 
    } 
    var notes = document.getElementById('textarea'); 
    google.script.run.readyToSendEmail(shippingNeeded, notes); 
    } 
    </script> 

    </body> 
</html> 

任何想法,想法或建议表示赞赏!

+0

当有人点击Generate Shipping Email菜单时,总是会运行'menuItem1'函数...如果你想在用户提交之后运行该代码段,将该块移动到'readyToSendEmail'函数 – Ritz

+0

@Ritz其实没什么。为了澄清,我想要做的就是获取它,以便Logger.log(“ShowModalDialog后面的行”);'直到在index.html中的表单被提交后才运行,让用户单击'id =“button1d”' – Adam

+0

''Logger.log(“Line after showModalDialog”);'将在用户选择菜单后立即运行生成邮件 – Ritz

回答

0

我想你有点困惑js函数如何在应用程序脚本中工作。

//This function will run when the spreadsheet is loaded 
     function onOpen(e) { 
      var ui = SpreadsheetApp.getUi(); 
      ui.createMenu('Custom') 
       .addItem('Generate Shipping Email', 'menuItem1') 
       .addToUi(); 
     } 

    //This entire function will run when you click on the menu item in the spreadsheet. 
     function menuItem1() { 
      var html = HtmlService.createHtmlOutputFromFile('index'); 
      var ui = SpreadsheetApp.getUi() 
      ui.showModalDialog(html, 'Shipping Email Options'); 
     } 


    //This is where you need to write the logic...this function will be called when you click on the button 
     function readyToSendEmail(shippingNeeded, notes) { 

     } 

而且,它能够更好地增加type="button"这两个按钮,否则它可以把它当作提交按钮。

相关问题