How can I pass a server-side variable to HTML and have the HTML page return an auto-filled form?-CodePudding

I am building an HTML page in Google Apps Script with CRUD functionality. The user can currently add data, edit data, and search data (I am not adding a delete feature). I would like the user to receive the form url link with an ID that when they go BACK to that link, it auto-fills the form with the previously added data.

In my HTML file, I have the following button defined:

  document.getElementById("sbtn").addEventListener("click",getTID);

Once a user has entered data, it gets sent to a Google Sheet. The user HAS to enter a unique ID that they've already been provided. Using this ID, they can enter it, hit search, and it runs getTID():

function getTID() { //TID CODE
  var transID = document.getElementById("tid").value;
  if (transID.length === 36) {
    google.script.run.withSuccessHandler(updateAllData).getID(transID);
  } else {
    alert("Transaction ID is not long enough.\nPlease copy the Transaction ID EXACTLY!\n\nFor Example: https:/workwebsiteconcealedforprivacy/w?txid=36275284-2ed6-4868-97b2-16bc1fde1a08\n\nThe Transaction ID is: 36275284-2ed6-4868-97b2-16bc1fde1a08")
  }
}

This takes the ID they gave, references the spreadsheet and then returns values it found by index. Now, I have in my server-side GS file, the following in doGet:

var urlValue = '';
function doGet(e) {
  // Test Code
  var ss = SpreadsheetApp.openById(id);
  var ws = ss.getSheetByName("Options");
  var list = ws.getRange(1, 1, ws.getRange("A1").getDataRegion().getLastRow(), 1).getValues();
  var htmlListArray = list.map(function (r) { return '<option>'   r[0]   '</option>'; }).join('');
  var title = "Please Work";

  var vals = JSON.stringify(e);

  if ('v' in e.parameter){
    urlValue = String(e.parameter['v']);
    //return HtmlService.createHtmlOutput(urlValue);
  }

  return render("page",{list: htmlListArray, title});

and the following:

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function render(file, argsObject) {
  var tmp = HtmlService.createTemplateFromFile(file);
  if (argsObject) {
    var keys = Object.keys(argsObject);
    keys.forEach(function (key) {
      tmp[key] = argsObject[key]
    });
  }
  return tmp.evaluate();
}

If I uncomment the return HtmlService.createHtmlOutput(urlValue); line, I can see that IF an ID is in the URL, it returns the correct parameter.

My problem is that I cannot get the HTML to read the urlValue variable and autorun getTID() when the user enters the url with the correct parameter. The correct functionality is that IF the parameter is found, it auto populates the HTML form. If it doesn't, it returns the blank form.

CodePudding user response：

There is an error on

return render("page",{list: htmlListArray, title});

On {list: htmlListArray, title} the name of the second property is missing.

To "read the urlValue variable" there are two options:

pass the parameters from the URL using the event object of the doGet function. For this you have two options, create the HtmlService.HtmlOutput object from an html string generated using "vanilla" JavaScript or create it from a HtmlService.HtmlTemplate object.
get the parameters from the URL directly on the client-side code using google.script.url.getLocation .

If you go for the first option, then you should pass someway the urlValue to the render function. In the question code urlValue is a global variable, so you might add the following before the render's return statement.

tmp.urlValue = urlValue;

Then you have to add a scriptlet on the html file to handle this value and "autorun" getTID. Scriptlets is a feature of Templated HTML.