How to Call Google App Script Function in HTML OnClick Button

Question

My Google Sheet Consist of on Open Show sidebar Custom menu, In sidebar HTML File I have added some buttons and OnClick event would like to run the function created in .gs file

I have tried using Delete (Referee Support portal)however on click event not able to call the function.

Below I have attached complete code with sample sheet, please help me to fix the issue

[Sample Sheet1

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

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
      .setTitle('Sheet')
      .setWidth(300);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}



var Status_Set = "Deleted";

function Deleteuser() {
 var ss= SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheetByName('Delete User');
  var startRow = 2 ;  // First row of data to process
  var numRows = sheet.getLastRow()-1;   
  var dataRange = sheet.getRange(startRow, 1, numRows, 5)

 var data = dataRange.getValues();
 for(var i = 0; i < data.length; ++ i) {
  var lastName = data[i][0];
  var firstName = data[i][1];
  var email = data[i][2];
  
  };

   
AdminDirectory.Users.remove(email);


    Browser.msgBox('Your Request has been provisioned successfully', Browser.Buttons.OK_CANCEL);
Logger.log('Deleted');
  sheet.getRange(startRow + i,5).setValue(Status_Set);

  
 };

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<body class="w3-light-grey">

<!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
  <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey"><i class="fa fa-dashboard"></i> My Dashboard</button>
</div>



<!-- !PAGE CONTENT! -->


  <br>
  <div class="w3-container w3-dark-grey w3-padding-32">
    <div class="w3-row">
      <div class="w3-container w3-third">
        <h5 class="w3-bottombar w3-border-green"><i class="fa fa-user" aria-hidden="true"></i> Manage users</h5>
        <button type="button"  onclick="google.script.run
          .Deleteuser()" >Delete</button>


  </div>
 </div>
 </div>

  <!-- End page content -->



</body>
</html>

Of course it doesn't work here since "google" is undefined. The google.script.run only works when the page is served by HtmlService; have you tested it there? What error did you get? — user6655984

Jason Allshorn Jason Allshorn · Accepted Answer · 2017-12-28T16:29:08

You need to specify which function you want to run and perhaps include success and error handlers. This doc explains how. https://developers.google.com/apps-script/guides/html/reference/run .

How about adding "try" into the main remove user class? You can return the error to the client or log the error.

try {
  AdminDirectory.Users.remove(email);
} catch(e){
  Logger.log(e)
  return e
}

On another note, your script "AdminDirectory.Users.remove(email)" will only run on an account that has G-suite admin permissions, and if you have turned on the directory API, both in the script and in its attached API console.

There is a way around the admin permissions thing by putting the delete function in a script that belongs to an admin, and then sending a GET request to that script.

How to Call Google App Script Function in HTML OnClick Button

1 Answers