CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
flamingslaptrap
flamingslaptrap

Reputation: 81

Passing variable from google script to html dialog

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.

Upvotes: 7

Views: 12651

Answers (2)

JSDBroughton
JSDBroughton

Reputation: 4034

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.

Upvotes: 10

flamingslaptrap
flamingslaptrap

Reputation: 81

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

Upvotes: 0

Related Questions