1

I hope everyone is safe and healthy given the current situation.

I have a question in regards to a project with google apps script. I have a web app and I have been able to figure out routing with doGet() using links etc. 

//global variables
const sheetId = "foo";
const Route = {};
Route.path = function(route, callback){
  Route[route] = callback;
}

function doGet(e){

  Route.path("newAccountForm",loadNewForm);
  Route.path("updateBrandForm", loadUpdateForm);

  if(Route[e.parameters.v]) {
       return Route[e.parameters.v](); 
  } else {
    return render("home") 
  }
};

function loadNewForm() {

 const sheetActive = SpreadsheetApp.openById(sheetId);
 const mySheet = sheetActive.getSheetByName("Sheet1");

  const title = "title";
  const index = "index";

  return render("addNewAccount",{title: title, index: index});  

}

function loadUpdateForm () {
  const sheetActive = SpreadsheetApp.openById(sheetId);
  const mySheet = sheetActive.getSheetByName("Sheet1");


  return render("updateBrand");

}

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

The links..

    <a href="<?= ScriptApp.getService().getUrl(); ?>?v=newAccountForm">Add New Brand</a> 
    <a href="<?= ScriptApp.getService().getUrl(); ?>?v=updateBrandForm">Update Exisiting Brand</a> 
    <a href="<?= ScriptApp.getService().getUrl(); ?>?v=reports">Analytics / Reports</a>

Now I am a bit stuck on handling responses and errors. I have tried using doPost() which works to render a new HTML page. My problem is I am unsure how to tell if the request was successful in the doPost. Is there a way to check that? I can get all the parameters through the event object but not a status.

<form id="myForm" onsubmit="handleNewAccountFormSubmit(this);"  method="post" action="<?= ScriptApp.getService().getUrl(); ?>">

I have also been trying to handle it with the included .withFailureHandler() but am unsure how to get it to fire or if it is possible to call back a function from my .GS I have tried also having the onFail() function outside the FormSubmit function. 

function handleNewAccountFormSubmit(formObject) {
google.script.run.withFailureHandler(onFail).withSuccessHandler().processNewAccountForm(formObject);
  function onFail(error) {
  Logger.log(error)
  console.log(error)
  return google.script.run.onError();
}
}

I basically want to show if the function ran successfully for user experience but am unsure of best practise or how or even if it is possible(I am sure it is!)

I look forward to any ideas, corrections, and if something is unclear I will do my best to provide more info.

Thanks again.

TheMaster
  • 45,448
  • 6
  • 62
  • 85
Noah Liberty
  • 33
  • 6
  • 1
    This: `Add New Brand` is a get call and will load a new html. So, what is the problem? – TheMaster Mar 20 '20 at 10:39
  • @TheMaster Yup that part is working fine. I was trying to give extra info. When a user submits the form I have two choices. The form goes to a blank page or I can hit a doPost function. Option 1 - I would like to find a way to pass an argument or some how tell in the doPost if the function was successful or not. From there I can render an error page or success page. Option 2 - Run the function with fail or success handler to fire another function?( not sure that is possible). The onFail() is not working even when I remove the POST method. Hope that clears it up. Thanks – Noah Liberty Mar 20 '20 at 10:49
  • Or option 3 would be to redirect back to doGet() with a .getUrl(); + ?v=error in the withHandlers but I am not sure how to do that without an link. is this possible inside a script? I could create success and fail routes I suppose if it was but I may not be able to pass the params – Noah Liberty Mar 20 '20 at 10:53
  • 2
    `Logger` is not available client side. – TheMaster Mar 20 '20 at 10:58

1 Answers1

2

Use success or failure handlers to alert the user:

function handleNewAccountFormSubmit(formObject) {    
    alert("Please wait..!")  
    google.script.run
        .withFailureHandler(e => {
            console.error(e.message);
            alert("Unexpected error! Contact support!")
        })
        .withSuccessHandler(e => alert("Form submitted successfully!"))
        .processNewAccountForm(formObject);
}
TheMaster
  • 45,448
  • 6
  • 62
  • 85
  • So for this solution the first alert works but as soon as I click okay on the first alert it redirects to a blank page. Is this something to do with the preventDefault()? I am unfamiliar but have read it on some answers the last few days. – Noah Liberty Mar 20 '20 at 11:08
  • 1
    @Noah yes. You should `preventDefault()` the submit event. Check the documentation for a sample form – TheMaster Mar 20 '20 at 11:55
  • I have tried to figure it out but no matter where I put preventDefault() it still goes to a blank screen. What am I missing? – Noah Liberty Mar 20 '20 at 12:13
  • 2
    Copy this [`index.html`](https://developers.google.com/apps-script/guides/html/communication#forms). The default should be prevented just after the form loads. So, we use `window.onload` – TheMaster Mar 20 '20 at 12:24
  • Nice one! Now I can alert or even show messages by manipulating DOM etc. Sorry I couldn't get my head around that haha. All good now. Appreciate the help! – Noah Liberty Mar 20 '20 at 13:08