google-apps-scriptgoogle-sheetsgoogle-sheets-apiadd-on

Cannot read properties of undefined (reading 'withSuccessHandler')

I'm trying to call my code. gs functions on the click of a button. When I execute the function at that time it shows an error that Cannot read properties of undefined (reading 'withSuccessHandler'). I tested that when I'm executing the printNameToSheet function without withSuccessHandler and withFailureHandler at that time it's working fine. If I add these two functions to the printNameToSheet then it's showing an error. The code works fine if I removed both functions. But I want to add both functions to the printNameToSheet, so that I can catch the success and error of functions.

I had pasted the code of the app and code. gs file. I have attached the screenshot of the error at last.

Can anyone guide me on this error.? code.gs

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Custom Menu')
    .addItem('Show sidebar', 'showSidebar')
    .addToUi();
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile('app');
}

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

function showSidebar() {
  var html = HtmlService.createTemplateFromFile('app').evaluate().setTitle("Test Addon")
  SpreadsheetApp.getUi()
    .showSidebar(html);
}

function getName() {
  return "Alex"
}

function printNameToSheet(name) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  sheet.getActiveCell().setValue(name)
}

app.html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <button onclick="getNameAndPrint()">CLICK ME</button>
</body>
<script>
  function onFailure(error){
    console.log(error.message)
  }

  function getNameAndPrint(){
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(function(name){
          console.log(name);

          google.script.run
          .printNameToSheet(name)
          .withSuccessHandler(function(){
            console.log("Process Completed")
          })
          .withFailureHandler(onFailure)
        })
        .getName()
  }
</script>
</html>

Error Image

Solution

  • I have checked your code and the error is coming from ‘app.html’ specifically, in the following section:

       google.script.run
          .printNameToSheet(name)
          .withSuccessHandler(function(){
            console.log("Process Completed")
          })
          .withFailureHandler(onFailure)
        })
        .getName()

    The class google.script.run is the one providing access to the method “withSuccessHandler()”, but in your code, you added the function first causing the ‘undefined’ error to appear in the console. That being said, I suggest the following update ‘app.html’:

    <script>
  function onFailure(error){
    console.log(error.message)
  }

  function getNameAndPrint(){
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(function(name){
          console.log(name);
          
          google.script.run  
          .withSuccessHandler(function(){
            console.log("Process Completed")
          })
          .withFailureHandler(onFailure)
          .printNameToSheet(name)
        })
        .getName()
  }
</script>

    References:

    p.s: my apologies if my explanation wasn't clear enough. If you have any questions, let me know!