將側邊欄的html表單傳遞給Google腳本

我在這方面遇到了困難......我閱讀了文檔，但無法完成此操作。將側邊欄的html表單傳遞給Google腳本

我想在Google文檔的側欄中創建一個小的html表單。此表單將從聯繫人中提取聯繫人組，以便用戶可以選擇一個並將t傳遞給我的腳本。

這是我做了什麼：

page.html中

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 
    Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" /> 
    </body> 
</html>

menu.gs

function doGet() { 
    return HtmlService 
     .createTemplateFromFile('Page') 
     .evaluate(); 
} 

function onOpen() { 
    DocumentApp.getUi() // Or DocumentApp or FormApp. 
     .createMenu('Custom Menu') 
     .addItem('Show sidebar', 'showSidebar') 
     .addToUi(); 

} 

function showSidebar() { 

    var html = HtmlService.createHtmlOutputFromFile('Page') 
     .setTitle('Chose the Contact Group') 
     .setWidth(300); 

    var groups = ContactsApp.getContactGroups(); 

    // add this to the html file Page.html 
    html.append ('<form onsubmit="google.script.run.myFunction(formObject)">'+ 
       '<select>'); 

    for (var i = 0; i < groups.length; i++) { 
    html.append('<option name="chosenGroup" value="' + groups[i].getName() + '">' + groups[i].getName() + '</option>'); 
    } 

    html.append('</select><input type="submit">'); 

    //this is commented because I was testing it 
    //html.append("<script>function handleFormSubmit(formObject) { google.script.run.myFunction(formObject); } </script>"); 

    DocumentApp.getUi() // Or DocumentApp or FormApp. 
     .showSidebar(html); 

}

Code.gs

myFunction (formObject) { 

Logger.log(formObject.chosenGroup); 

}

當我點擊提交按鈕一個新的空白頁面打開一個url like：

https://n-wuewuewuee98efgdsf98769s8d76f9s76df-0lu-script.googleusercontent.com/userCodeAppPanel？

來源

2017-06-12 Kintaro

發生這種情況是因爲'form'標記的'action'屬性。當您提交表單時，瀏覽器會重定向到'action'屬性中指定的路由。通常，此URL模式將映射到接收表單發佈的數據的服務器上的代碼。

有在你的代碼的其他問題，應首先解決：

1）只有當你部署腳本的Web應用程序需要使用doGet（）函數。 doGet（）中的代碼在瀏覽器中打開該應用的URL時執行，即嚮應用發送「GET」請求。你的腳本是文檔綁定的，所以不需要doGet（）

2）你的業務邏輯的各個方面。 showSideBar（）必須完成它應該做的事情，即顯示側邊欄。 getContactGroups（）必須返回聯繫人組數組等。

3）請記住，您可以將變量傳遞到HTML頁面並使用模板化HTML動態創建UI。不需要逐行添加！ https://developers.google.com/apps-script/guides/html/templates

4）最後，重定向到另一個頁面可以很容易地通過使用jQuery來解決。

請參閱下面的示例代碼。我的腳本是電子表格綁定的，所以您只需用DocumentApp替換SpreadsheetApp即可。

服務器代碼（main.gs）

function onOpen(){ 

var ui = SpreadsheetApp.getUi(); 

ui.createMenu('Menu') 
    .addItem('Show sidebar', 'showSidebar') 
    .addToUi(); 


} 


function showSidebar() { 

var ui = SpreadsheetApp.getUi(); 
var template = HtmlService.createTemplateFromFile('sidebar'); 

template.contactGroups = getContactGroups(); //adding contactGroups as a property of the template object. 

ui.showSidebar(template.evaluate()); //Calling evaluate() executes the inline JS code in sidebar.html, populating the dropdown list 


} 

function getContactGroups(){ 

try { 

var contactGroups = ContactsApp.getContactGroups(); 

} catch(error) { 

Logger.log(error); 

} 

return contactGroups; 

} 

function processFormResponse(formObject){ 


Logger.log(formObject.chosenGroup); 



}

而這裏的sidebar.html。請注意html文件內聯代碼的特殊語法。調用e.preventDefault（）負責重定向到另一個頁面。由於我們將contactGroups作爲屬性添加到模板對象，因此在調用evaluate（）時此變量將可用。下面的內聯代碼將動態填充組名稱的下拉列表。

<!DOCTYPE html> 
    <html> 
     <head> 
     <base target="_top"> 
     </head> 
     <body> 
     Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" /> 

     <form> 
     <select name="chosenGroup"> 

     <? for (var i=0; i < contactGroups.length; i++) { ?> 

     <option value="<?= contactGroups[i].getName()?>"><?= contactGroups[i].getName()?></option> 


     <?}?> 
     </select> 
     <input type="submit" value="Submit"> 
     </form> 



     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script> 

     $(document).ready(function(){ 

       $('form').submit(function(e){ 

       e.preventDefault(); 

       google.script.run.processFormResponse(this); 


       }); 


     }); 

     </script> 


     </body> 
    </html>

UPDATE

沒有什麼特別之處jQuery的。這是一個JS庫，旨在簡化DOM樹的導航，但它是建立在瀏覽器中相同的DOM API之上的。長話短說，你不需要jQuery來實現這個結果。 1）爲您的'表單'標籤指定一個唯一的ID，例如

<form id="form">

2）創建一個函數，將事件偵聽器添加到偵聽'submit'事件的表單中。第二個參數是事件處理函數。使用'點擊'而不是'submit'會強制你通過id引用文本字段並獲取用戶輸入來手動創建表單對象。

<script> 
     function addEventListeners() { 

     document.getElementById('form').addEventListener('submit', function(e){ 

     e.preventDefault(); 
     google.script.run.processFormResponse(this); 


     }); 



     } 
     </script>

最後，在加載時調用該函數。

<body onLoad="addEventListeners()">

我在前面的例子中的jQuery代碼做了完全相同的事情，但是更易於閱讀和維護。

來源

2017-06-12 16:42:44

謝謝安東，它工作，但我不能'理解爲什麼我們需要jQuery在這裏，是不可能添加「google.script.run.processFormResponse（this）;」在onlick？但也許我誤解了這個頁面：https：//developers.google.com/apps-script/guides/html/communication#forms（用於網絡應用程序，而不是形式綁定腳本，對吧？） – Kintaro

請參閱更新的答案。 –

將側邊欄的html表單傳遞給Google腳本

回答

相關問題