CODEWITHSUNDEEP
htmlgoogle-apps-script
AJ Aviles
AJ Aviles

Reputation: 9

Google Apps Script - Passing Variable from a Script to an HTML then back to a Script and one last time to an HTML

I am having troubles passing 1 variable (dateToExport) into an HTML "showConflict_HTML" and then running a function/script within that HTML by passing dateToExport.

The Process goes like this:

  1. The script "exportButton" runs passing (dateToExport) into it
  2. And then the "showConflict_HTML" html pops up in which the user clicks a button "Yes, Overwrite and Export"
  3. The script "exportButton" then runs again and passes the dateToExport into it again

When I click the "Yes, Overwrite and Export", nothing happens and the "google.script.run.exportOrderData(1, dateToExport_captured);" does not run in the HTML. Also there is no error given so I can not figure out why. Anyone have any idea why?

function exportOrderData(override, dateToExport) {

     if(override == 1){
        execute_exportOrderData();
        easterEgg = 1;
     }

     else if(override == 0){
        var userInterface = HtmlService
        .createHtmlOutputFromFile('showConflict_HTML');
    
        userInterface.dateToExportFromServerTemplate = dateToExport;

        SpreadsheetApp.getUi()
        .showModelessDialog(userInterface, 'Existing Customer Order(s) on ' + dateWithConflict);
     }

}
<!-- "showConflict_HTML". This HTML file is will run the exportOrderData function once the Override button ("my_button") has been clicked !--> 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">
  </head>
  
  <body>
    
    <button id='my_button'>Yes, Overwrite and Export</button>
    
    <script>
      `THIS SHOULD PASS THE dateToExport Varaible so we can access it in this HTML Script`
      var dateToExport_captured = dateToExportFromServerTemplate;

    // Once the Button is Clicked, the following occurs
    document.getElementById('my_button').addEventListener('click', _ => {
      
      // Once the Button is Clicked, the Loading Circle Effect Function will start running here
      google.script.run.loadingCircleEffect();
      google.script.run.exportOrderData(1, dateToExport_captured);


    });
    </script>
    
  </body>
  
</html>

function exportOrderData(override, dateToExport) {

Upvotes: 0

Views: 517

Answers (3)

AJ Aviles
AJ Aviles

Reputation: 9

So I was able to fix this by using localStorage.setItem('dateToExport_transfer',dt) in the HTML where the user selects the date and then in my "showConflict_HTML" HTML I call var dateToExport_captured = localStorage.getItem('dateToExport_transfer') to grab that date from the other HTML.

Upvotes: 0

TheWizEd
TheWizEd

Reputation: 8598

Although this is not an answer it may shed some light on what is wrong with your code.

To pass dateToExportFromServerTemplate to the html page you need to change the code in exportOrderData as below using templated html createTemplateFromFile

var userInterface = HtmlService.createTemplateFromFile('showConflict_HTML');
userInterface.dateToExportFromServerTemplate = dateToExport;
userInterface = userInterface.evaluate();

For the page to receive the variable you need to use a scriptlet.

var dateToExport_captured = <?= dateToExportFromServerTemplate ?>

But what I don't understand is dateToExportFromServerTemplate never changes so why display a new page?

Upvotes: 0

Ben
Ben

Reputation: 263

Try using force-printing scriptlets in your HTML, along the lines of this:

var dateToExport_captured = <?!= JSON.stringify(dateToExportFromServerTemplate) ?>;

Notes:

  1. JSON.stringify can be omitted if your value is a string or a number.

  2. Per the documentation, you should NOT use this technique if dateToExport comes from untrusted users. If it's your own system that generates it then you should be fine.

Upvotes: 1

Related Questions