Creating custom menus in Google Sheets - Dashboard Building Guide

Dashboard Mode - Creating custom menus

Goal

Create a custom menu in Google Sheets to run a script that highlights all cells with values above a threshold. This helps quickly spot important data.

Sample Data

Item	Sales
Apples	120
Bananas	80
Cherries	150
Dates	60
Elderberries	200

Dashboard Components

• Custom Menu: Adds a menu named "Highlight" with an item "Highlight High Sales" that runs a script.
• Script Function: Checks sales values in column B and highlights cells with values > 100 in yellow.
• Formula Example: No formula needed here, but script uses getRange and setBackground methods.

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Highlight')
    .addItem('Highlight High Sales', 'highlightHighSales')
    .addToUi();
}

function highlightHighSales() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange('B2:B6');
  const values = range.getValues();
  for (let i = 0; i < values.length; i++) {
    if (values[i][0] > 100) {
      range.getCell(i + 1, 1).setBackground('yellow');
    } else {
      range.getCell(i + 1, 1).setBackground(null);
    }
  }
}

Dashboard Layout

+---------------------------+
|        Google Sheet       |
| +-----------------------+ |
| | Item   | Sales        | |
| |--------|--------------| |
| | Apples | 120          | |
| | Bananas| 80           | |
| | Cherries| 150         | |
| | Dates  | 60           | |
| | Elderb.| 200          | |
| +-----------------------+ |
|                           |
| Custom Menu: "Highlight"  |
|   - Highlight High Sales  |
+---------------------------+

Interactivity

When the sheet opens, the onOpen function adds the custom menu. Clicking Highlight High Sales runs the script that colors sales above 100 in yellow. This updates the sheet visually to show important data.

Self Check

If you change the sales value for "Bananas" to 130 and run Highlight High Sales again, which cells will be highlighted?

• Answer: Cells for Apples, Bananas, Cherries, and Elderberries will be highlighted because their sales are above 100.

Key Result

Custom menu in Google Sheets to highlight sales above 100 with a script.

Practice

1. What is the main purpose of creating a custom menu in Google Sheets using Apps Script?

easy

A. To change the sheet's background color automatically

B. To add your own buttons for easy access to script functions

C. To protect cells from editing

D. To create charts from data automatically

Solution

1. Step 1: Understand what custom menus do

   Custom menus let you add buttons in the Google Sheets menu bar that run your scripts.

2. Step 2: Identify the main use

   They provide easy access to script functions without opening the script editor.

3. Final Answer:

   To add your own buttons for easy access to script functions -> Option B

4. Quick Check:

   Custom menus = easy script access [OK]

Hint: Custom menus add buttons to run scripts easily [OK]

Common Mistakes:

• Thinking custom menus change sheet colors automatically
• Confusing custom menus with cell protection
• Assuming custom menus create charts

2. Which of the following is the correct way to start the function that adds a custom menu when the Google Sheet opens?

easy

A. function onOpen() { ... }

B. function addMenu() { ... }

C. function onStart() { ... }

D. function openMenu() { ... }

Solution

1. Step 1: Recall the special trigger function name

   The function that runs automatically when the sheet opens must be named onOpen().

2. Step 2: Check the options

   Only onOpen() is the correct trigger name recognized by Google Sheets.

3. Final Answer:

   function onOpen() { ... } -> Option A

4. Quick Check:

   Trigger function = onOpen() [OK]

Hint: Use onOpen() to run code when sheet opens [OK]

Common Mistakes:

• Using wrong function names like onStart or openMenu
• Not using the exact name onOpen
• Thinking addMenu runs automatically

3. Given this Apps Script code snippet inside onOpen():

SpreadsheetApp.getUi()
  .createMenu('My Menu')
  .addItem('Say Hello', 'sayHello')
  .addToUi();

What happens when the Google Sheet is opened?

medium

A. A new menu named 'My Menu' appears with an item 'Say Hello' that runs the sayHello function

B. The sheet background changes to say 'Hello'

C. A popup appears saying 'Hello' automatically

D. Nothing happens until you run the script manually

Solution

1. Step 1: Understand the code's purpose

   The code creates a new menu called 'My Menu' in the Google Sheets UI.

2. Step 2: Analyze the menu item

   The menu has one item labeled 'Say Hello' that runs the function named 'sayHello' when clicked.

3. Final Answer:

   A new menu named 'My Menu' appears with an item 'Say Hello' that runs the sayHello function -> Option A

4. Quick Check:

   createMenu + addItem = new menu item [OK]

Hint: createMenu + addItem adds menu and function link [OK]

Common Mistakes:

• Thinking the script changes sheet colors automatically
• Expecting a popup without clicking menu
• Assuming nothing happens without manual run

4. You wrote this onOpen() function but the custom menu does not appear:

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Tools')
    .addItem('Run Task', 'runTask')
}

What is the error preventing the menu from showing?

medium

A. addItem should be addMenu

B. Function name should be onStart()

C. Menu name 'Tools' is invalid

D. Missing call to addToUi() at the end

Solution

1. Step 1: Check the menu creation chain

   The code creates a menu and adds an item but does not call addToUi().

2. Step 2: Understand addToUi() role

   This method is required to actually add the menu to the Google Sheets UI.

3. Final Answer:

   Missing call to addToUi() at the end -> Option D

4. Quick Check:

   addToUi() adds menu to sheet [OK]

Hint: Always end menu chain with addToUi() [OK]

Common Mistakes:

• Using wrong function name instead of onOpen
• Thinking menu name is restricted
• Confusing addItem with addMenu

5. You want to create a custom menu with two items: 'Start Process' running startProcess and 'Stop Process' running stopProcess. Which code snippet correctly creates this menu inside onOpen()?

hard

A. function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Process Control')
.addItem('Start Process')
.addItem('Stop Process')
.addToUi();
}

B. function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Process Control')
.addItem('Start Process', 'startProcess')
.addToUi()
.addItem('Stop Process', 'stopProcess');
}

C. function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Process Control')
.addItem('Start Process', 'startProcess')
.addItem('Stop Process', 'stopProcess')
.addToUi();
}

D. function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Process Control')
.addItem('Start Process', startProcess)
.addItem('Stop Process', stopProcess)
.addToUi();
}

Solution

1. Step 1: Check method chaining order

   The menu is created, then two items are added with correct labels and function names as strings.

2. Step 2: Verify addToUi() is last

   The chain ends with addToUi() to add the menu to the UI.

3. Step 3: Confirm function names are strings

   Function names must be strings, not bare identifiers.

4. Final Answer:

   Code snippet D correctly creates the menu with two items and adds it to the UI -> Option C

5. Quick Check:

   Chain addItem with function names as strings, end with addToUi() [OK]

Hint: Chain addItem calls, end with addToUi() [OK]

Common Mistakes:

• Calling addToUi() before all addItem calls
• Passing function names without quotes
• Missing function names in addItem