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

Question

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;
     }

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

I'm confused. You are running exportOrderData from the page to display a page with dateToExportFromServerTemplate in it. It seems like a circular reference. — TheWizEd
– TheWizEd, Commented Sep 12, 2022 at 4:30
I see what you mean by circular but would that effect accessing the "dateToExport" in the HTML? Let's say we input (0, "9/10/2022"), then we want to pop up the HTML so a user can click the button "Yes, Overwrite and Export" and then the function runs passing (1, "9/10/2022") — AJ Aviles
– AJ Aviles, Commented Sep 13, 2022 at 3:15
Your html files contains <!-- "showConflict_HTML". which is the same page you are displaying from exportOrderData so it looks to me like you are simply redisplaying the page. Which doesn't make sense to me. — TheWizEd
– TheWizEd, Commented Sep 13, 2022 at 13:44
Yup, I think I made it more complex that it actually should be but I was able to get what I needed by using "localStorage.setItem('dateToExport_transfer',dt)" from the User's input HTML so I can now access 'dateToExport_transfer' n "showConflict_HTML" — AJ Aviles
– AJ Aviles, Commented Sep 13, 2022 at 21:24

Ben · Accepted Answer · 2022-09-12 04:46:47Z

1

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.

answered Sep 12, 2022 at 4:46

Ben

2733 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheWizEd · Accepted Answer · 2022-09-12 13:36:33Z

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?

Lajos Arpad · Accepted Answer · 2022-09-18 03:18:35Z

0

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.

edited Sep 18, 2022 at 3:18

Lajos Arpad

80.2k42 gold badges122 silver badges234 bronze badges

answered Sep 13, 2022 at 5:25

AJ Aviles

93 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related