Google apps script function returns undefined in html

Question

I am building an add-on for google docs (Just for practice) that will act like email. I already incorporated sending, receiving, deleting, and viewing messages. I added the code needed for a UI modal dialog, but one of the functions is only returning undfined. I tested this function in the code.gs file, and it worked perfectly. Here is a section of code.gs:

function onInstall() {
  var html = HtmlService.createHtmlOutputFromFile('Startup').setWidth(350).setHeight(170);
  DocumentApp.getUi().showModalDialog(html, 'New account:');
}

function testCheck() {
  var ui = DocumentApp.getUi();
  ui.alert(checkUsername(ui.prompt('').getResponseText(), ui.prompt('').getResponseText()));
}

function checkUsername(un, em) {
  var i; var a; var is;
  var props = PropertiesService.getScriptProperties();
  if (props.getProperty(un) == null) {
    is = true;
  } else {
    return 'This username is taken!';
  }
  if (em.length == 0) {
    return true;
  } else {
    var len = (em.match(/@/g) || []).length;
    if (len == 1) {
      if (props.getProperty(em) != null) {
        return 'Someone has already registered this email address as ' + props.getProperty(em);
      } else {
        return true;
      }
    } else {
      if (em.indexOf(', ') != -1) {
        em = em.split(', ');
      } else if (em.indexOf('; ') != -1) {
        em = em.split('; ');
      } else if (em.indexOf(' + ') != -1) {
        em = em.split(' + ');
      } else if (em.indexOf(';') != -1) {
        em = em.split(';');
      } else if (em.indexOf(',') != -1) {
        em = em.split(',');
      } else if (em.indexOf('+') != -1) {
        em = em.split('+');
      } else if (em.indexOf(' ') != -1) {
        em = em.split(' ');
      } else {
        return 'Please separate your email addresses with a comma, space, or semicolon.';
      }
      for (i = 0; i < em.length; i++) {
        a = em[i];
        if (props.getProperty(a) != null) {
          return 'Someone has already registered ' + a + ' as ' + props.getProperty(a);
        }
      }
      return true;
    }
  }
}

Here is the html file:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    Username:<br>
    <input type='text' id='user' style='width:350px' maxlength='12'/><br>
    Other email addresses:<br>
    <textarea id='extras' style='width:350px' rows='2'></textarea><br>
    <span class='error' id='err'></span><br>
    <button class='action' onClick='check()'>Next</button>
    <button onclick='group()'>Groups</button><br>
    <script>
      function check() {
        var un = document.getElementById('user').value;
        var em = document.getElementById('extras').value;
        var fail = document.getElementById('err');
        var is = google.script.run.checkUsername(un, em);
        if (typeof is == 'string') {
          fail.innerHTML = is;
        } else {
          google.script.host.close();
          google.script.run.setAccount(un, em);
        }
      }

      function group() {
        var un = document.getElementById('user').value;
        var em = document.getElementById('extras').value;
        var is = google.script.run.checkUsername(un, em);
        if (typeof is == 'boolean') {
          setGroupAddress(un, em);
        } else {
          document.getElementById('err').innerHtml = is;
        }
      }
    </script>
  </body>
</html>

Update: I completely retyped the functions, but the program continues to return undefined. All inputs are the correct values, and the function returns information correctly in a ui.alert() box.

What is the name of the function that is returning undefined? — Alan Wells
You need to debug your code. In script tags, you need to use console.log() statements. In server side ".gs" files, you need to use Logger.log() statements. Before each client side call to google.script.run.checkUsername(un, em) put two console.log statements. console.log('un: ' + un) Run the code and look in the browser console. In Chrome and Firefox, press the f12 key to open the browsers console, and view the log. Are the parameters un, em being passed to checkUsername(un, em)? We could do that for you, but that's something you should be able to do yourself. — Alan Wells
Also, I don't think you can open a modal window from the onInstall simple trigger (however, I can't find the docs to prove that) I think what you want to do is add an addon menu to the toolbar and open the modal window that way. — Jordan Rhea
@JordanRhea You can use output a modal window from the trigger, since onInstall() runs in authMode.Full — Redwolf Programs

Redwolf Programs Redwolf Programs · Accepted Answer · 2018-04-03T15:15:38

I figured it out after completely reading the Google Apps Script Documentation. The google.script.run.function() API does not return a value. In order to fetch data from a script, you must have the script generate raw HTML, and create a dialog with an HTML string.

Google apps script function returns undefined in html

2 Answers