Skip to content

2. Start Coding an Interactive Sidebar

Playback Speed:
Transcript

In this video, you will complete the first of three 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 dot 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 in G Suite.

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 in G Suite applications.

For example, you could code an alert box or show a prompt that asks the user to click a button or make a choice.

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

Find the “Custom sidebars” section of the article.

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.

Hover your mouse over the box and copy the code.

Click back to your spreadsheet.

The Script Editor should be open.

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.

Great!

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 html 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.”

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

Now, it’s your turn: Copy and paste code from the “Custom Sidebars” section of the Google Developers Support article into the script editor.

Save and run the code.

Change one line of code to fix the error message.

Delete “from file” from the html line.

Then, move on to the next video to embed an image.

Next arrow_forward
Instructions
  1. Copy and paste code from the "Custom Sidebars" article in Apps Script Support.
  2. Save and run the code.
  3. Click the "custom menu" to see how it works.
  4. 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/)