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

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.

1 Script ("exportButton")
1 HTML ("showConflict_HTML")

The Process goes like this:

The script "exportButton" runs passing (dateToExport) into it
And then the "showConflict_HTML" html pops up in which the user clicks a button "Yes, Overwrite and Export"
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;
     }

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

CodePudding user response：

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

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

Notes:

JSON.stringify can be omitted if your value is a string or a number.
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.

CodePudding user response：

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?