How to add a global custom menu to multiple Google Workspace apps

by

Use Google Apps Script to create custom menus that work within Google Sheets, Google Docs, Slides, and Google Forms.

Adding a custom menu to Google Sheets, Docs, Slides, and Forms is simple using Google Apps Script.

As an illustration, the following code snippet adds a custom menu to the parent Google Sheet that reveals the spreadsheet name when clicked.

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  const menu = ui.createMenu('➯ Custom menu');
  menu.addItem('Show spreadsheet name', 'showName');
  menu.addToUi();
}

function showName() {
  const fileName = SpreadsheetApp.getActiveSpreadsheet().getName();
  SpreadsheetApp.getUi().alert(fileName);
}

The above code defines two functions: onOpen which executes when the app is opened, and showName which is triggered when a menu item is clicked.

This method can be used to create custom menus in other Google Workspace apps, including Forms, Slides, and Google Docs.

The code above is specific to Google Sheets and won’t work if you use it to add custom menus to Google Forms or Slides. This is because you need to call SpreadsheetApp.getUi() While the UI of a Google Form can be accessed through a different means, the UI of a Sheet can be accessed FormApp.getUi() method.

This can be a problem because some Google add-ons, for example Docs Studio, can be launched from multiple Google Workspace apps. How do you identify the currently active desktop application (sheets, documents, slides, or forms) and add specific menu items to that application?

Identify the current workspace app

The getContainer function is your secret weapon for identifying the currently active Google Workspace app. It works by iterating through a list of known app classes, eg DocumentApp and SpreadsheetApp.

For each class, it tries to access the UI object. If the call succeeds and does not throw an exception, it indicates that the corresponding app is active and returns that app class.

const getContainer = () => {
  const apps = (DocumentApp, SpreadsheetApp, FormApp, SlidesApp);
  const activeApp = apps.find((app) => {
    try {
      app.getUi();
      return true;
    } catch (f) {
      return false;
    }
  });

  return activeApp;
};

Now that you know the current desktop application, we can modify it onOpen Function to create a dynamic global menu. The menu title contains the name of the active application and contains a menu item to display the application-specific file name.

const onOpen = () => {
  const app = getContainer();
  const ui = app.getUi();
  const appName = String(app).replace('App', '');
  const menu = ui.createMenu(`Custom menu in ${appName}`);
  menu.addItem(`Show ${appName} name`, 'showAppName');
  menu.addToUi();
};

The showAppName The function uses a switch statement to determine the appropriate method to retrieve the file name based on the active app.

const showAppName = () => {
  const app = getContainer();
  let fileName;
  if (app === DocumentApp) {
    fileName = DocumentApp.getActiveDocument().getName();
  } else if (app === SpreadsheetApp) {
    fileName = SpreadsheetApp.getActiveSpreadsheet().getName();
  } else if (app === SlidesApp) {
    fileName = SlidesApp.getActivePresentation().getName();
  } else if (app === FormApp) {
    fileName = FormApp.getActiveForm().getTitle();
  }
  app.getUi().alert(`You are looking at ${fileName}`);
};

Leave a Comment