Apps Script Spreadsheet Data Retrieval Failing with Vague Error

Other Questions Google Sheets
1

I’m building a simple web app that allows students to check their grades by entering their password. The application accesses my Google Sheets where I keep track of grades and shows the assignments that are missing for each student.

However, when I test the data retrieval using Browser.msgBox(), it works perfectly and displays the correct information. But when I attempt to display the same data in the actual web interface, I end up getting a generic message stating, “An unexpected error occurred.”

Here’s my code:

var gradesSheet = SpreadsheetApp.openById('your-sheet-id-here');

function doGet() {
  var webapp = UiApp.createApplication().setTitle('Grade Checker');
  
  var layout = webapp.createGrid(1, 2);
  layout.setWidget(0, 0, webapp.createLabel('Enter Code:'));
  layout.setWidget(0, 1, webapp.createPasswordTextBox().setName("userInput"));
  
  var checkButton = webapp.createButton('Check Grades');
  
  var clickHandler = webapp.createServerClickHandler('displayGrades');
  clickHandler.addCallbackElement(layout);
  checkButton.addClickHandler(clickHandler);
  
  var container = webapp.createVerticalPanel();
  container.add(layout);
  container.add(checkButton);
  webapp.add(container);
  
  SpreadsheetApp.getActiveSpreadsheet().show(webapp);
}

function displayGrades(e) {
  var webapp = UiApp.createApplication().setTitle('Grade Checker');
  var userCode = e.parameter.userInput;
  
  var codeRange = gradesSheet.getRange("A20:B20").getValues();
  
  var studentName;
  for(var j = 0; j < codeRange.length; j++) {
    if(codeRange[j][1] == userCode) {
      studentName = codeRange[j][0];
      break;
    }
  }
  
  var dataRange = gradesSheet.getRange("A5:Z25").getValues();
  var headerRange = gradesSheet.getRange("A1:Z3").getValues();
  
  var targetRow;
  for(var j = 0; j < dataRange.length; j++) {
    if(dataRange[j][0] == studentName)
      targetRow = dataRange[j];
  }
  
  var output = "";
  for(var j = headerRange[1].length-1; j >= 5; j--) {
    if (targetRow[j] == "")
      output += headerRange[1][j] + ": " + headerRange[0][j] + "pts" + "\n";
  }
  
  var display = webapp.createGrid(2, 1);
  display.setWidget(0, 0, webapp.createLabel('MISSING WORK'));
  display.setWidget(1, 0, webapp.createLabel(output));
  
  var panel = webapp.createVerticalPanel();
  panel.add(display);
  webapp.add(panel);
  
  return webapp;
}

Do you have any suggestions on what might be causing this issue? The data processing works, but the display part in the UI fails.

2

Your problem is UiApp - Google killed it years ago. When you test with Browser.msgBox(), it works because you’re skipping the UI stuff completely. But UiApp can’t render anything anymore, so you just get generic errors. You’ve got to switch to HtmlService. Build your interface with HTML files and use google.script.run to hit your server functions. Your displayGrades() logic is fine - keep that. But you’ll need to redo how forms submit and how results show up. Use template variables to move data from server to client instead of building UI elements in code.

3

yo, you’re usin UiApp which is like super outdated lol. google stopped supportin it ages ago, so those vague errors make sense. gotta switch to HtmlService, it’s way better and actually works!

4

Your problem is UiApp - it’s been dead since 2014. Google killed it completely, so that’s why msgBox works but your web interface throws those vague errors. You’ll need to switch to HtmlService instead. Just create an HTML template and use HtmlService.createTemplateFromFile(). Your data logic can mostly stay put, but you’ll have to redo how you handle inputs and show results. I dealt with this same mess last year and it fixed all those weird error messages.