How to call "somename.html" from a method in a .gs file by passing a parameter?

Question

I am creating a web-app, in which it has some validation before it successfully loads the "searchByDocumentPage.html" by passing a parameter.

In my previous code, I called the doGet() method directly using ScriptApp.getService().getUrl() so other buttons do not have any issue in loading new HTML page.

Since I do some validation, for some reason I can't load the "searchByDocumentPage.html" HTML Page.

1st I tried:

var html = ScriptApp.getService().getUrl()+"?v=submitDocumentID";
return html;

2nd:

return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();

if(fileID === ""){
  document.getElementById("errorMessageDiv").innerHTML='<label style="color:red;text-align:center;font-style: italic;font-size: 12px;">Please key in the Document ID</label>';
}
else{
  google.script.run.withSuccessHandler(fnFileID).getFiles(fileID);
}

function fnFileID(returnedVal){
  if(returnedVal === "No File"){
    document.getElementById("errorMessageDiv").innerHTML='<label style="color:red;text-align:center;font-style: italic;font-size: 12px;">This Document ID do not exist</label>';
  }
  /*else{
    ScriptApp.getService().getUrl()+"?v=submitDocumentID";
  }*/
}

function getFiles(fileID) {
  var returnValue = "";
  var arrayTblFile = [];
  var selectStatementTblFile = "SELECT File_ID FROM webapp_tblFile WHERE File_ID='" + fileID  +"'";
  arrayTblFile= MySQLSelectQuery(selectStatementTblFile);//Call the SQL 
}

function from MySQLConnection.gs
  if(arrayTblFile.length == 0){
    returnValue = "No File";
  }
  else{    
    loadSearchByDocPage(fileID);
  }
  return returnValue;
}

function loadSearchByDocPage(fileID){
  return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();

  //var html = ScriptApp.getService().getUrl()+"?v=submitDocumentID";
  //return html;
}

function doGet(e){
  var params = e.parameter;
  if(params.v === 'newDoc'){
    return HtmlService.createHtmlOutputFromFile("newDocumentPage");
  }
  else if(params.v === 'submitDocumentID'){
    return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();
  }
  else{
    return HtmlService.createTemplateFromFile("landingPage").evaluate();
  }
}

Expected to load "searchByDocumentPage.html" by passing parameter.

Answer 1

I am not sure if this is best practice, I have done the following and managed to get what i intended to see.

1. Append with hyperlink and included the parameter in the link
2. Trigger the hyperlink
3. doGet() triggered and the page loaded successfully with the parameter

function fnFileID(returnedVal){
   $("#btnSubmit_DocumentID").append(
        '<a id="loadSearchByDoc" href="<?= ScriptApp.getService().getUrl(); ?>?v=submitDocumentID&fileID=' + returnedVal + '"></a>'
    );
   document.getElementById('loadSearchByDoc').click(); 
}

`function doGet(e){
  if(params.v === 'submitDocumentID'){
   return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();

   }
 }
 `