Quickstart: Progress bar add-on for Google Slides

Complete the steps described in the rest of this page, and in about five minutes you'll have created a Google Slides add-on that adds a progress bar to your presentation. You can also learn more about this Slides add-on and how it works from the video on the right.

Set it up

  1. Create a new Google Presentation.
  2. From within your new presentation, select the menu item Tools > Script editor. If you are presented with a welcome screen, click Blank Project.

  3. Delete any code in the script editor and rename Code.gs to progress.gs.

    slides/progress/progress.gs
    /**
 * @OnlyCurrentDoc Adds progress bars to a presentation.
 */
const BAR_ID = 'PROGRESS_BAR_ID';
const BAR_HEIGHT = 10; // px

/**
 * Runs when the add-on is installed.
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen();
}

/**
 * Trigger for opening a presentation.
 * @param {object} e The onOpen event.
 */
function onOpen(e) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Show progress bar', 'createBars')
      .addItem('Hide progress bar', 'deleteBars')
      .addToUi();
}

/**
 * Create a rectangle on every slide with different bar widths.
 */
function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = (i / (slides.length - 1));
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,
          barWidth, BAR_HEIGHT);
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

/**
 * Deletes all progress bar rectangles.
 */
function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID) {
        el.remove();
      }
    }
  }
}
  1. Select the menu item File > Save all. Name your new script "Progress Bar Quickstart" and click OK. The script's name is shown to end users in several places, including the authorization dialog.

Try it out

  1. Switch back to your presentation and reload the page.
  2. After a few seconds, a ProgressBar sub-menu appears under the Add-ons menu. Click Add-ons > ProgressBar > Show Progress Bar.
  3. A dialog box indicates that the script requires authorization. Click Continue. A second dialog box requests authorization for specific Google services. Click Allow.
  4. A progress bar appears. To remove the progress bar, click Add-ons > ProgressBar > Hide Progress Bar.

Publish

Since this is an example add-on, our tutorial ends here. If you were developing a real add-on, the last step would be to publish it for other people to find and install.

Learn more

To continue learning about how to extend Google Slides with Apps Script, take a look at the following resources: