Passing information to server-side function in a Google Docs Add On <p>I'm working on a Google Docs Add-On based on Google's <a href="https://developers.google.com/apps-script/quickstart/docs" rel="nofollow">Quickstart tutorial</a>. I'm trying to change the workflow of the Add On in the tutorial to append a new page and then insert a translation on that new page rather than the line-by-line workflow.</p> <p>I have a script working in single documents but I'm having a hard time moving it to the Add On architecture. I think it's something to do with passing selections from client-side JS to the server-side script doing the translation.</p> <p><strong>Here's the translate script</strong></p> <pre><code>function translate(origin, dest, savePrefs) { Logger.log('Starting the script'); if (savePrefs == true) { var userProperties = PropertiesService.getUserProperties(); userProperties.setProperty('originLang', origin); userProperties.setProperty('destLang', dest); Logger.log(origin,dest); } var doc = DocumentApp.getActiveDocument(); var body = doc.getBody(); // Add a page break for the translated material. body.appendPageBreak(); // Get the number of elements in the document var elements = body.getNumChildren(); Logger.log('Got the page elements'); // Use the number to loop through each element in the document. for( var i=0;i&lt;elements;i++) { var element = body.getChild(i).copy(); var type = element.getType(); Logger.log('Element Types were successful. Starting tests.'); // Test each type for a child element and run script based on the result // Images are nested in a paragraph as a child, so the second `if` makes // sure there is no image present before moving to the next paragraph. if( type == DocumentApp.ElementType.PARAGRAPH ){ if(element.asParagraph().getNumChildren() != 0 &amp;&amp; element.asParagraph().getChild(0).getType() == DocumentApp.ElementType.INLINE_IMAGE) { var img = element.asParagraph().getChild(0).asInlineImage().getBlob(); body.appendImage(img); } else if(element.asParagraph().getNumChildren() !=0 &amp;&amp; element.asParagraph().getChild(0).getType() == DocumentApp.ElementType.INLINE_DRAWING) { var drawing = element.asParagraph().copy(); body.appendParagraph(drawing); } else { var text = element.asParagraph().getText(); Logger.log(text); var spn = LanguageApp.translate(text, origin, dest); body.appendParagraph(spn); } } else if(type == DocumentApp.ElementType.TABLE) { element.asTable().copy(); body.appendTable(element); } else if(type == DocumentApp.ElementType.LIST_ITEM) { var list = element.asListItem().getText(); body.appendListItem(LanguageApp.translate(list, origin, dest)); } } </code></pre> <p><strong>The client-side JS is:</strong></p> <pre><code>$(function() { $('#run-translation').click(loadPreferences); google.script.run(runTranslation) }); function runTranslation() { this.disabled = true; var origin = $('input[name=origin]:checked').val(); var dest = $('input[name=dest]:checked').val(); var savePrefs = $('#save-prefs').is(':checked'); google.script.run .runTranslation(origin, dest, savePrefs); } </code></pre> <p>If I hard-code the languages to use in translation into the server-side script, it works. But as soon as I try to use variables from the radio buttons, it doesn't run. I don't see any errors in the console and I can't run scripts from the editor to check the logs. How can I debug this code?</p>