Holen Sie sich Daten von benutzerdefinierten HTML-Dialog

Question

Ich habe Googlescript nicht viel verwendet, so ist dies hoffentlich eine einfache Frage. Bei meiner Suche konnte ich jedoch keine Antwort finden.

Ich möchte ein Skript haben, das meinem Google-Blatt eine neue Schaltfläche hinzufügt, die ein Dialogfeld mit Kontrollkästchen öffnet und irgendwie zurückgibt, welche Felder angekreuzt wurden.

Bearbeiten: Das Ziel besteht darin, ein Meldungsfeld zu erstellen, das die Namen der anderen Blätter mit einem Kontrollkästchen auflistet und eine Liste mit den ausgewählten Namen zurückgibt.

Momentan ist der in createGraph (Agenten) eingeloggte Wert NULL, daher scheint es, dass etwas im HTML-Skript falsch ist.

Hier ist mein aktualisierte Script (edit: Ausschneiden unnötige Teile):

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); 
} 

Und dies wird das aktualisierte HTML-Dialogfeld:

<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> 

Wenn Sie keine Ahnung haben, wie dies sein Vollendet fühlen Sie sich frei, mich zu erleuchten, auch wenn Sie etwas anderes sehen, das mit dem Drehbuch weg ist, weisen Sie es bitte darauf hin. Wie gesagt, ich bin neu im googlescript und gebe normalerweise auch kein Javascript ein.

Answer 1

Ok, ich denke, ich kann sehen, was Sie versuchen zu tun, aber Sie tun immer noch ein paar Dinge falsch. Lass mich versuchen, deinen Code zu straffen. Ich gebe Kommentare in den Code ein, um zu versuchen und zu erklären.

Das, was Ihr Dialogfeld sollte wie folgt aussehen:

<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> 

Ihre createGraph Funktion sollte in der Server-Side-Code gehen (was auch immer .gs Datei genannt wird)

Hoffentlich hilft Ihnen, eine aus ein kleines bisschen. Wo kann ich etwas klären?