如何在Google scriptlet中传递JavaScript变量？

Question

I have a code that looks like this.

<script>
function loadmainTBL(){
 <? var data = SpreadsheetApp
   .getActiveSpreadsheet().getSheetByName("Customer Logs Information Database")
   .getDataRange()
   .getValues(); ?>
 var number = 6

 <?for (var i = 12; i < data.length; i++) { ?>
 <? if (data[i][0] == "I want to put it here") { ?>
 var tableHeaderRowCount = 1;
 var table = document.getElementById('TableContainer');
 var rowCount = table.rows.length;
 for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
 }
 <?}?>
 <?}?>
 }
</script>

as you can see this code is inside html file and it is compose of javascript and google scriptlet my question is this. how can I pass this?

var number = 6

in this one?

<? if (data[i][0] == "I want to put it here") { ?>

Here is the html code.

<? var data = SpreadsheetApp
   .getActiveSpreadsheet().getSheetByName("Customer Logs Information Database")
   .getDataRange()
   .getValues(); ?>

<table  id = "TableContainer" cellspacing="2" cellpadding="3" width ="100%" align = "center" class="hoverTable">
   <th  bgcolor = "darkgreen"><font color="white">#</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Area</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Customer Name</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Person In Charge</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Remarks</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Status</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Doc. Date</font></th>
   <th  bgcolor = "darkgreen"></th>
   <? for (var i = 12; i < data.length; i++) { ?>
   <tr>
   <td  class="dataid"><?= data[i][0] ?></td>
   <td  class="area"><?= data[i][1] ?></td>
   <td  class="cusname"><?= data[i][2] ?></td>
   <td  class="cic" width = "200px"><?= data[i][3] ?></td>
   <td  class="remarks" ><?= data[i][4] ?></td>
   <td  class="status" width = "70px"><?= data[i][5] ?></td>
   <td  class="docdate"><?= data[i][6] ?></td>
   <td  ><img class="click-to-select" src="https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/>
   </td>
   <? } ?>
   </tr>
</table>

tysm for future help.

Answer 1

In code.gs before anything else, place the following:

//Define this here globally so it is accessed in the HTML Template
var passedParameter= ' ';

You can define this to equal 6, or inside a function define it based on some code prior to creating the page. In my case, I am deploying this as a web app and passing two variables via the URL, which I then merge and save so my client side has access:

/**-----------------------------------------------------------------------------------
|
|    Begin section for app interface
|
------------------------------------------------------------------------------------*/
// Script-as-app template.
function doGet(passed) {

if(passed.parameter.festival && passed.parameter.year){

Logger.log(passed.parameter);
passedParameter = passed.parameter.festival + ' ' + passed.parameter.year;
}


  var result=HtmlService.createTemplateFromFile('GridView').evaluate()
        .setTitle('Boxwood Registrations')
        .setWidth(1285)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

  return result;

}

The above 2 sections of code are my entire code.gs file. When I run the web app in my browser I add this to the end of web app's url:

?festival=myfestival&year=2017

My HTML files now have access to a variable called passedParameter which is equal to "myfestival 2017" which I access in a function in my HTML with:

<script>
function showMenuYear(menuItems) {
  var list = $('#optionListYear');
  var desiredValue = '<?!= passedParameter ?>';

//More code here to use the variable desiredValue
}
</script>

If I need to retrieve more information from the server side after user input, such as read a spreadsheet for a value, I use this in a function in the html file:

<script>
function setFormList() {

  var replacement = document.getElementById("OverallGrid");
  replacement.innerHTML = "Retrieving Data...";

  if ($('#optionListYear').val() === "-1") {
    replacement.innerHTML = "Select a Festival/Year above.";
    return;
  }


 //Run the function getValidRegistrations() which is in a .gs file (server side), passing the value of the element optionListYear.
  google.script.run.withSuccessHandler(showRegistrationsTable).withFailureHandler(loadFailed).getValidRegistrations($('#optionListYear').val());

}

//If the server side ran succesfully, this is run
function showRegistrationsTable(returnedItem){
  //My code to work with the returned item goes here
}

//If the server side failed for some reason an error will be returned
function loadFailed(returnedError){
  //My code to display a error message with the returned item goes here
}
</script>