カスタムhtmlダイアログからデータを取得

Question

私はgooglescriptをあまり使用していないので、これはうまくいけば簡単な質問です。しかし、私は検索で答えを見つけることができませんでした。

私は、チェックボックス付きのダイアログボックスを開き、何とかチェックが入ってしまった箱を返す私のGoogleスプレッドシートに新しいボタンを追加するスクリプトを持っていると思います。

編集：目標は、チェックボックスを他のシートの名前をリスト、メッセージボックスが表示されるように、選択した名前のリストを返すことです。今

createGraph（エージェント）に記録された値がNULLであるため、HTMLスクリプトの中で何かが間違っているようです。ここで

は私の更新されたスクリプト（：不要な部分をカット編集）：ある

function openMsgBox() { 
    var ss = SpreadsheetApp.getActiveSpreadsheet(); 
    var pages = ss.getSheets(); 
    var names = []; 
    for(var i = 0; i < pages.length; i++){ 
    var name = pages[i].getName(); 
    if(name != 'Template'){ 
    names.push(name); 
    } 
    } 

    if(names.length == 0){ 
    Browser.msgBox('Error', 'no pages exist', Browser.Buttons.OK); 
    return; 
    } 

    var template = HtmlService.createTemplateFromFile('MyHTMLFile'); 
    template.data = names; 
    var html = template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setWidth(400).setHeight(20*names.length + 100); 
    SpreadsheetApp.getUi().showModalDialog(html, 'title'); 
} 

function createGraph(agents) { 
    Logger.log(agents); 
} 

そして、これは、更新されたHTMLダイアログボックスです：あなたはこれがいかにすべての手掛かりを持っている場合は

<div id="container"> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 

    <fieldset> 
    <legend>Select the users you want to add</legend> 
    <div id="agentList"> 
     <?for (var i = 0; i < data.length; i++) { ?> 
     <b> <input type="checkbox" id="agent<?=i?>" value=<?=data[i]?> /> <?=data[i]?><br /></b> 
     <? } ?> 
     <br /> 
    </div> 
    <input type="button" value="OK" onClick="createGraph()" /> 
    </fieldset> 
</div> 

<script> 
// Pass input to server-side createGraph() 
function createGraph() { 
    var agents; 
    var nrOfAgents = $("#agentList > div").length; 
    for(var i = 0; i < nrOfAgents; i++){ 
    if($('agent'+i).is(":checked")){ 
     agents.push($('agent'+i).value); 
    } 
    } 

    google.script.run 
     .withSuccessHandler(
      // input delivered, close dialog 
      function() { 
      google.script.host.close(); 
      }) 
      .withFailureHandler(
      function() { 
      var div = $('<div id="error" class="error">' + msg + '</div>'); 
      $(element).after($("#container")); 
      }) 
      .createGraph(agents); 
} 

</script> 

あなたは私に教えてもらうために自由に感じることができます。私が言ったように、私はgooglescriptには新しく、通常javascriptでも入力しません。

Answer 1

あなたは何をしようとしているのか分かりますが、あなたはまだ間違ったことをしています。あなたのコードを強化しようとしましょう。私は、コードにコメントを入れて説明しようとしています。

このあなたのダイアログボックスがどのように見えるか：

<fieldset> 
    <legend>Select the users you want to add</legend> 
    <div id="agentList"> 
     <?for (var i = 0; i < data.length; i++) { ?> 
     <b> <input type="checkbox" id="agent<?=i?>" value=<?=data[i]?> /> <?=data[i]?><br /></b> 
     <? } ?> 
     <br /> 
    </div> 
    <input type="button" value="OK" /> 
    </fieldset> 
</div> 

<script> 
//since you are using jquery i went ahead and used it 
//in google scripts (as far as i know) you can't use the onclick property inside html. 
//so you have to use jquery's $().click() syntax. 
$(document).ready(function() { 
    $('input').click(function() { 
    google.script.run 
     .withSuccessHandler(function(response) { 
     //whatever you want to do with the response 
     google.script.host.close(); 
     }) 
     .withFailureHandler(function(error) { 
     var div = $('<div id="error" class="error">' + error + '</div>'); 
     $(element).after($("#container")); 
     }) 
     .createGraph($('#agentsList').val()); 
    }); 
}); 
</script> 

あなたcreateGraph機能は、サーバー側のコードに行く必要があります（.GSファイルが呼ばれているもの）

うまくいけば、これはあなたがアウトに役立ちます若干。どこで何を明確にすることができますか？