Kick off the new school year with lessons from our Back to School 2022 collection to help students express themselves, build relationships, and stay organized.

2. Start Coding an Interactive Sidebar

Playback Speed:
Transcript

In this video, you will complete the first of 3 steps for your interactive sidebar.

This part of the code will create the sidebar in your spreadsheet.

When starting a new coding project, it helps to break down the task into smaller steps.

Then, you can get help from others who have worked on similar projects.

When you’re coding, it is common – and encouraged -- to use code that others have written, then modify it for your own projects.

In this activity, you will copy and paste code from the Google Developers support site to get started.

The first step in your program is to create a sidebar in the spreadsheet.

Open a new tab or window.

Go to google.com, and search, "How do I create a sidebar in Google Sheets?"

Select the Google Developers article about dialogs and sidebars.

If you can’t find the page, click the link beside this video.

This is a support site created by Google developers.

It contains useful information and instructions for working with code.

It also gives example code for building different programs.

The page you found might look different than the one in the video.

That’s OK!

Developers update and improve help pages all the time.

There are several ways to display dialogs and sidebars.

For example, you could code an alert box...

or show a prompt that asks the user to click a button or make a choice.

Find the "Custom sidebars section" of the article.

Unlike an alert, a sidebar can remain open while you use the spreadsheet.

This section explains how a side panel, or sidebar, works.

Google Docs, Google Forms, and Google Sheets all use the same code, show sidebar, for this feature.

Copy the code.

Paste the code you copied over all of the code in the window.

Save the code.

To see what this code does, run it.

Select onOpen and click run.

Authorize the program to run.

Then, return to your area guide spreadsheet.

A menu titled, "custom menu" appears in the menu bar.

If your code didn’t work, ensure that you copied the correct sidebar code.

The code you pasted from the help page tells the computer to use HTML.

Your program, though, will not use an HMTL file.

Delete the words "From File" from this line of code.

Save and run the code.

Try the custom menu again.

It works! A sidebar appears that says page.

Great work! In the next video, you will embed an image from Google Maps in your sidebar.

Instructions

  1. Copy and paste code from the “Custom Sidebars” section of the article into the script editor.
  2. Save and run the code.
  3. Change one line of code to fix the error message: Delete "from file" from the HTML line.
Attributions
  • "Happy Alley by Kevin MacLeod" by incompetech.com (http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100482) -- Licensed under Creative Commons: By Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)