Start Coding an Interactive Sidebar

In this video, you will write code to create a sidebar in your area guide spreadsheet where your audience can view and manipulate images of each location.

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.

To begin, open a new tab and go to "google.com".

Then, search using the question "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 tools.

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 example code to get started on your location sidebar.

Return to the Apps Script tab and paste the code you copied over all of the code in the window.

Then, save the code.

To see what this code does, run it.

Select onOpen and click run.

If necessary, authorize the program to run.

Next, return to your area guide spreadsheet and refresh it.

A new custom menu appears in the menu bar.

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

The code you pasted from the help page tells the computer to use H-T-M-L.

However, your program will not use an H-T-M-L file.

Delete the words From File from this line of code.

Save and run the code.

Try the custom menu again.

A sidebar appears that says Page.

Now, it's your turn: Copy and paste the code from the Google Developers Support article into your Apps Script project, save and run the code, delete FromFile from the H-T-M-L line, and save and run the code again.