Custom UI Menu with Google Apps Script

[m00]

Custom UI Menu with Google Apps Script

Want to make a custom UI to quickly run your Google Apps Script functions?

Here is how to quickly get another UI menu that you can fill with anything you want.

Initial Setup

1. Open the Extensions menu, and select Apps Script.
   

   

2. In either the default Code.gs file, or one you create, add the following:

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Tiller Custom Menu')
    .addItem('Say Hello', 'sayHello')
    .addItem('Show Alert', 'showAlert')
    .addToUi();
}

function sayHello() {
  SpreadsheetApp.getUi().alert('Hello, world!');
}

function showAlert() {
  SpreadsheetApp.getUi().alert('This is an alert box!');
}

4. Refresh the spreadsheet tab (not the apps script tab).
   There should now be a new menu item:
   
   

Notes

• The menu ‘knows’ where you are, so if there is a function that relies on getActiveSpreadsheet() for example, it will run appropriately.
• Any function in any *.gs file can be run from the menu. Does not matter where it is.

Full Example

The full code for the example menu at the top of this post is here in GitHub. This is my actual current menu. There are so many cool things to make in Apps Script!

Static code also here:

function onOpen(e) {
    var ui = SpreadsheetApp.getUi();
        ui.createMenu("Tiller Custom Menu")
        .addItem('🥕 Send to Grocery Sheet (Selected row)', 'grocerySplitbySelection')
        .addItem('🟢 Savings Budget - Drill Down Budget', 'budgetDrillDown')
        .addItem('💰 Payroll to first of month. (Selected row)','fixPayrollForSelectedRow')
        .addItem('Hints: 🤵‍♂️ Add and Cleanup','doHints')
        .addItem('⏰ Date Update (Selected row)', 'showDatePickerDialog')
        .addItem('Amazon Order Numbers to Transactions', 'updateDescriptions')
        .addSeparator()
        .addItem('Paychecks','openPaychecksSheets')
        .addItem('Paychecks🚫','hidePaychecksSheets')
        .addItem('Transaction Cache','openTransactionCacheSheet')
        .addItem('Transaction Cache 🚫','hideTransactionCacheSheet')
        .addSeparator()
        .addItem('Paycheck Data Insert ➡️','paycheckDeductionTransactionAutoInsert')
        .addSeparator()
        .addSubMenu(ui.createMenu('Other')
              .addItem('Transactions: #️⃣ Set Check Number Field','setCheckNumbers')
              .addItem('Transactions - Hide Columns','hideColumnsByName'))
        .addSubMenu(ui.createMenu('Sheets')
          .addItem('Show All Sheets','showAllSheets')
          .addItem('Show Default Sheets','showDefaultSheets'))
        .addToUi();
  }

Example function to add to UI Menu:
Auto Insert generated paycheck deduction transactions