How to Trigger a Google Apps Script Function from an HTML Page

Question

How to Trigger a Google Apps Script Function from an HTML Page

I lead a sports team and created a website for it. I'm interested in adding a button to an admin page that allows me to send a quick email to all team members at once. The message would typically read: "Important update - please check the website for more details."

I know using a distribution list in Outlook would be simpler, but I prefer to use Google Apps Script to gain a better understanding of its capabilities.

Currently, I have a Google Spreadsheet containing all the email addresses and a basic script function to send the emails. It works perfectly when executed inside the script editor, but I wonder if there's a way to trigger this functionality from an external website using a button and some JavaScript?

javascript google-apps-script google-sheets

Answer 1

Answer №1

To integrate a Google UI object into your website, you will need to create a Script that can be deployed as a web app. This object will include a button that triggers a script function to send an email.

When publishing the web app, ensure that access is limited only to yourself so that the UI Blob created will not be functional for the public. Below is a basic script example with a single button:

function doGet() {
  var app = UiApp.createApplication();

  var button = app.createButton('Send Schedule Change Email');
  app.add(button);

  var handler = app.createServerHandler('myClickHandler');
  button.addClickHandler(handler);

  return app;
}

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();

  TeamSpreadsheet.sendScheduleChanged();

  var label = app.createLabel('Message Sent')
                 .setId('statusLabel')
                 .setVisible(false);

  label.setVisible(true);

  app.close();
  return app;
}

In order to access your existing script from the web app, save a version of it and add it as a library in the new script. Make sure the utility script in the library opens the spreadsheet using SpreadsheetApp.openById() instead of SpreadsheetApp.getActiveSpreadsheet(). Handle any calls to "active" objects carefully to avoid errors.

Note that debugging may be challenging, as the app-script debugger might display server errors when tracing into library routines.

Hopefully, this information helps you get started with integrating a Google UI object into your site!

Answer 2

To integrate a Google UI object into your website, you will need to create a Script that can be deployed as a web app. This object will include a button that triggers a script function to send an email.

When publishing the web app, ensure that access is limited only to yourself so that the UI Blob created will not be functional for the public. Below is a basic script example with a single button:

function doGet() {
  var app = UiApp.createApplication();

  var button = app.createButton('Send Schedule Change Email');
  app.add(button);

  var handler = app.createServerHandler('myClickHandler');
  button.addClickHandler(handler);

  return app;
}

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();

  TeamSpreadsheet.sendScheduleChanged();

  var label = app.createLabel('Message Sent')
                 .setId('statusLabel')
                 .setVisible(false);

  label.setVisible(true);

  app.close();
  return app;
}

In order to access your existing script from the web app, save a version of it and add it as a library in the new script. Make sure the utility script in the library opens the spreadsheet using SpreadsheetApp.openById() instead of SpreadsheetApp.getActiveSpreadsheet(). Handle any calls to "active" objects carefully to avoid errors.

Note that debugging may be challenging, as the app-script debugger might display server errors when tracing into library routines.

Hopefully, this information helps you get started with integrating a Google UI object into your site!

Answer 3

Answer №2

In addition to the detailed response from Mogsdad, I would like to offer a simpler solution tailored to your specific situation, considering you already have a functioning script.

You can simply take your existing script and incorporate a doGet() function as demonstrated in Mogsdad's example. Then, set up a button click handler that will trigger the execution of your email-sending function. In this function, make the necessary adjustments by replacing getActiveSpreadsheet() with

SpreadsheetApp.OpenById("the ID of the SS")

and getActiveSheet() with OpenByName().

After making these modifications, follow Mogsdad's guidance on deploying the script as a web application under your own credentials and utilize the provided URL to access it through a link on your website.

To safeguard against any unforeseen issues, it is advisable to work on a duplicate copy of your original spreadsheet so that you always have a functional version readily available. If you require more precise assistance or encounter difficulties during the process, do not hesitate to share your current script for personalized support with the necessary modifications.

Please note: This message is intended as a supplementary comment within an answer format for improved readability.

Answer 4

In addition to the detailed response from Mogsdad, I would like to offer a simpler solution tailored to your specific situation, considering you already have a functioning script.

You can simply take your existing script and incorporate a doGet() function as demonstrated in Mogsdad's example. Then, set up a button click handler that will trigger the execution of your email-sending function. In this function, make the necessary adjustments by replacing getActiveSpreadsheet() with

SpreadsheetApp.OpenById("the ID of the SS")

and getActiveSheet() with OpenByName().

After making these modifications, follow Mogsdad's guidance on deploying the script as a web application under your own credentials and utilize the provided URL to access it through a link on your website.

To safeguard against any unforeseen issues, it is advisable to work on a duplicate copy of your original spreadsheet so that you always have a functional version readily available. If you require more precise assistance or encounter difficulties during the process, do not hesitate to share your current script for personalized support with the necessary modifications.

Please note: This message is intended as a supplementary comment within an answer format for improved readability.

Answer 5

Answer №3

Simply deploy your script as a web application and then, with just a click of a button, run the following code:

window.open("https://script.google.com/macros/s/<id>/exec");

I'm not sure if this feature was available last year.

Answer 6

Simply deploy your script as a web application and then, with just a click of a button, run the following code:

window.open("https://script.google.com/macros/s/<id>/exec");

I'm not sure if this feature was available last year.

How to Trigger a Google Apps Script Function from an HTML Page

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing CKEditor: Inserting new elements upon each dialog opening

What is the best location to manage errors within a sequelize ORM query?

Learn how to dynamically import and load components in VueJS while rendering a list

Guidance on invoking the navigate function from a component displayed at the highest level of rendering

Is Swiper carousel navigation secretly operating without being seen?

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

The Mantine date picker is causing an error stating that objects are not valid as a React child

Unable to retrieve a string from one function within another function

Navigating nested loops within multidimensional arrays

Combining the power of Vuforia with the capabilities of Three

encountering a problem with npm while trying to execute the project

Tips for updating a React state while using the history API

Enhance your React Native app: Utilizing dynamic string variables with react-native-google-places-autocomplete query

Verify if JavaScript is enabled on the browser and show a notification if it is not using a custom ASP control

Unravel the JSON structure

Strategies for managing the #document element within an iframe

Steps to store chosen option from dropdown list into a database's table

How to retrieve the object's property with the highest numerical value using JavaScript

Angularfire2: Access Denied Error When User Logs Out

What is the best way to create floating text that appears when clicked, similar to the mechanics