Script editor overview in Google Sheets - Dashboard Guide

Dashboard Mode - Script editor overview

Dashboard Goal

Understand how to use the Google Sheets Script Editor to automate tasks and add custom functions.

Sample Data

Task	Status	Due Date
Send invoices	Pending	2024-06-10
Update prices	Completed	2024-06-05
Prepare report	Pending	2024-06-12
Team meeting	Completed	2024-06-07
Backup data	Pending	2024-06-15

Dashboard Components

• KPI Card: Count of Pending Tasks
  Formula: =COUNTIF(B2:B6, "Pending")
  Result: 3
• Custom Script Function: function daysUntilDue(taskRow) { const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); const dueDate = sheet.getRange(taskRow, 3).getValue(); const today = new Date(); const diff = Math.ceil((dueDate - today) / (1000 * 60 * 60 * 24)); return diff; }
  Usage in sheet: =daysUntilDue(2) returns days until due for row 2 task.
• Button to Run Script: A button linked to a script that marks all Pending tasks as Completed.
  Script snippet:
  function markAllCompleted() { const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); const lastRow = sheet.getLastRow(); for(let i=2; i<=lastRow; i++) { if(sheet.getRange(i, 2).getValue() === 'Pending') { sheet.getRange(i, 2).setValue('Completed'); } } }

Dashboard Layout

+----------------------+-------------------------+
|  KPI: Pending Tasks   |  Button: Mark Completed  |
|       (3)             |                         |
+----------------------+-------------------------+
|  Sample Data Table (Tasks, Status, Due Date)          |
|  Rows 2-6                                             |
+-------------------------------------------------------+
|  Custom Function Usage Example (daysUntilDue)         |
+-------------------------------------------------------+

Interactivity

The button runs the markAllCompleted script to update task statuses from Pending to Completed. This changes the data table and updates the KPI card automatically.

The custom function daysUntilDue can be used in any cell to show how many days remain until a task's due date. It updates dynamically based on the current date.

Self Check

If you click the "Mark Completed" button, which components update?

• The Sample Data Table updates to show all tasks as Completed.
• The KPI Card updates to show 0 Pending tasks.
• The Custom Function results remain the same because due dates do not change.

Key Result

A simple dashboard showing task status with a KPI, data table, custom script function, and a button to automate status updates.

Practice

1. What is the main purpose of the Script Editor in Google Sheets?

easy

A. To import data from other spreadsheets only

B. To write JavaScript code to customize and automate tasks in the spreadsheet

C. To format cells with colors and fonts

D. To create charts and graphs automatically

Solution

1. Step 1: Understand the Script Editor's role

   The Script Editor allows writing JavaScript code to customize Google Sheets.

2. Step 2: Identify the main use

   It is mainly used to automate tasks and add custom features, not just formatting or charting.

3. Final Answer:

   To write JavaScript code to customize and automate tasks in the spreadsheet -> Option B

4. Quick Check:

   Script Editor = JavaScript customization [OK]

Hint: Script Editor = write code to automate sheets [OK]

Common Mistakes:

• Thinking Script Editor is for formatting only
• Confusing it with chart tools
• Believing it only imports data

2. Which of the following is the correct way to start a function in Google Sheets Script Editor?

easy

A. function myFunction() { }

B. def myFunction() { }

C. func myFunction() { }

D. function: myFunction() { }

Solution

1. Step 1: Recall JavaScript function syntax

   Google Sheets scripts use JavaScript, where functions start with the keyword 'function'.

2. Step 2: Match the correct syntax

   Only 'function myFunction() { }' matches JavaScript syntax correctly.

3. Final Answer:

   function myFunction() { } -> Option A

4. Quick Check:

   JavaScript function syntax = function name() { } [OK]

Hint: JavaScript functions start with 'function' keyword [OK]

Common Mistakes:

• Using Python or other language syntax
• Adding colons after function keyword
• Using incorrect keywords like 'def' or 'func'

3. Given this script in the Script Editor:

function showAlert() {
  SpreadsheetApp.getUi().alert('Hello!');
}

What happens when you run showAlert()?

medium

A. An error occurs because alert is not a valid method

B. The message 'Hello!' is printed in the console only

C. Nothing happens because the function is empty

D. A popup alert with the message 'Hello!' appears in the spreadsheet

Solution

1. Step 1: Understand the function code

   The function calls SpreadsheetApp.getUi().alert('Hello!'), which shows a popup alert in the spreadsheet UI.

2. Step 2: Identify the effect of running the function

   Running showAlert() triggers the alert popup with the message 'Hello!'.

3. Final Answer:

   A popup alert with the message 'Hello!' appears in the spreadsheet -> Option D

4. Quick Check:

   alert() shows popup message [OK]

Hint: alert() shows popup in spreadsheet UI [OK]

Common Mistakes:

• Thinking alert prints to console
• Assuming function does nothing
• Believing alert method is invalid

4. You wrote this script in the Script Editor:

function addNumbers() {
  var sum = 5 + ;
  Logger.log(sum);
}

What is the error and how do you fix it?

medium

A. Syntax error due to incomplete addition; fix by adding a number after '+'

B. Runtime error because Logger.log is not defined; fix by importing Logger

C. No error; script runs and logs 5

D. Syntax error because 'var' is not allowed; fix by removing 'var'

Solution

1. Step 1: Identify the syntax error in the addition

   The expression '5 + ;' is incomplete and causes a syntax error because a number is missing after '+'.

2. Step 2: Fix the error by completing the addition

   Add a number after '+' like '5 + 3' to fix the syntax error.

3. Final Answer:

   Syntax error due to incomplete addition; fix by adding a number after '+' -> Option A

4. Quick Check:

   Incomplete expression causes syntax error [OK]

Hint: Check for missing operands in math expressions [OK]

Common Mistakes:

• Thinking Logger.log causes error
• Assuming 'var' is invalid
• Ignoring incomplete expression

5. You want to create a custom menu in Google Sheets using the Script Editor that runs a function named processData. Which script snippet correctly adds this menu when the spreadsheet opens?

hard

A. function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Custom Menu')
.addItem('Run Process')
.addToUi();
}

B. function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Custom Menu')
.addItem('Run Process', processData)
.addToUi();
}

C. function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Custom Menu')
.addItem('Run Process', 'processData')
.addToUi();
}

D. function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Custom Menu')
.addItem('Run Process', 'processData()')
.addToUi();
}

Solution

1. Step 1: Understand how to add a custom menu

   The method addItem requires two arguments: the menu label as a string and the function name as a string without parentheses.

2. Step 2: Identify the correct syntax

   function onOpen() { var ui = SpreadsheetApp.getUi(); ui.createMenu('Custom Menu') .addItem('Run Process', 'processData') .addToUi(); } correctly passes 'processData' as a string and chains the calls properly.

3. Final Answer:

   function onOpen() { var ui = SpreadsheetApp.getUi(); ui.createMenu('Custom Menu') .addItem('Run Process', 'processData') .addToUi(); } -> Option C

4. Quick Check:

   addItem needs function name as string [OK]

Hint: Pass function name as string in addItem [OK]

Common Mistakes:

• Passing function reference without quotes
• Including parentheses in function name string
• Omitting second argument in addItem