Passing variable from google script to html dialog

Question

I'm working on trying to do some error prompts in the case someone doesn't put in a value. In the case I check if the value is empty, and will eventually check if it's a date.

So when here is the run down.

1) Run the if statement, if the value is true, run the error prompt with the string argument

if (sheetData[4] === ""){
  errorPrompt("Title");
}

2) Run the below function with the string argument. I then want the function to pass the argument to the html iframe.

function to open dialog
function errorPrompt(missvar) {
  var missVar = "test";
  var html = HtmlService.createHtmlOutputFromFile('missingvar')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, missVar + ' is Missing please provide ' + missVar + " and try again.");
}

3) the variable should then pass along to the html file which is displayed as a modal dialogue. Provided the string is equal to "Title", the dialogue should read: "The Title is missing. Please enter Title and try again."

missingvar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>            
        <script>
        UI.getElementById("missVar").innerHTML;
        </script>

       The <var id=missVar></var> is missing. Please enter <var id=missVar></var> and try again.
    <input type="button" value="Close"
        onclick="google.script.host.close()" />

  </body>
</html>

The HTML above displays, however the missVar doesn't show. Anyone have any thoughts? just to note, the title bar of the dialog box is correctly displaying the variable, but that's outside of the html.

JSDBroughton · Answer 1 · 2016-05-06T06:48:14.457

8

HTML Service: Templated HTML

Use HtmlService templating if you want to do what you are describing. It removes the JS on the client side and serves the fully formed dialog, with missVar intact.

var html = HtmlService.createTemplateFromFile(missingVar);

    html.missingVar = missVar;

var htmlOutput = html.evaluate();

Your missingvar.html file would then contain

<?= missingVar ?>

Wherever you want that variable displayed.

edited May 06 '16 at 06:48

answered May 06 '16 at 06:37

JSDBroughton

3,966
4
32
52

2

This anwer only works if the passed variable is not an object (ie a simple string or number). For a more complete solution, see http://stackoverflow.com/a/38314034/2213940 – Zig Mandel Jul 11 '16 at 18:48

score 0 · Answer 2 · answered May 05 '16 at 20:47

I've altered the way the prompt is created. the html file is no longer needed as the js creates it on the fly.

From

function errorPrompt(missvar) {
  var missVar = "test";
  var html = HtmlService.createHtmlOutputFromFile('missingvar')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, missVar + ' is Missing please provide ' + missVar + " and try again.");
}

To

function errorPrompt(missvar) {
  var missVar = "test";
   var htmlOutput = HtmlService
     .createHtmlOutput('<p>' + missVar + ' is missing, please enter a ' +  missVar + ' and try again.</p>')
     .setSandboxMode(HtmlService.SandboxMode.IFRAME)
     .setWidth(250)
     .setHeight(300);
 SpreadsheetApp.getUi().showModalDialog(htmlOutput, missVar + ' is missing. Please provide a ' + missVar + ' and try again.');
}

this is effectively the same as the templating solution which I described in my answer. Look into it as it will allow you greater flexibility/extensibility in the future. — JSDBroughton, May 06 '16 at 14:37

Passing variable from google script to html dialog

2 Answers2

Linked