Fortschrittsanzeigen in einer Google-Präsentation anzeigen

Codierungslevel: Mittel
Dauer: 15 Minuten
Projekttyp: Editor-Add-on

Lernziele

  • Informieren Sie sich über die Funktionsweise der Lösung.
  • Informationen zu den Aufgaben der Apps Script-Dienste in der Lösung
  • Richten Sie das Script ein.
  • Führen Sie das Skript aus.

Informationen zu dieser Lösung

Mit dieser Lösung können Sie den Folien in Ihrer Präsentation eine Fortschrittsanzeige hinzufügen.

Screenshot der Fortschrittsanzeige im Add-on „Google Präsentationen-Editor“

Funktionsweise

Das Script berechnet, wie viele Folien in der Präsentation enthalten sind, und fügt unten auf jeder Folie ein Rechteck hinzu. Das Script erhöht die Breite jedes Rechtecks, um den Fortschritt auf den Folien zu zeigen.

Apps Script-Dienste

Für diese Lösung wird der folgende Dienst verwendet:

  • Google Präsentationen: Hiermit werden die Folien einer Präsentation abgerufen und jeder Folie wird ein Rechteck hinzugefügt.

Vorbereitung

Für die Verwendung dieses Beispiels sind die folgenden Voraussetzungen erforderlich:

  • Ein Google-Konto (für Google Workspace-Konten ist möglicherweise die Administratorzustimmung erforderlich).
  • Einen Webbrowser mit Internetzugriff.

Script einrichten

  1. Klicken Sie auf die folgende Schaltfläche, um eine Kopie der Präsentation Prognose in Google Präsentationen zu erstellen. Das Apps Script-Projekt für diese Lösung ist an die Präsentation angehängt.
    Kopie erstellen
  2. Klicken Sie in der Präsentation auf Erweiterungen > Fortschrittsanzeige > Fortschrittsanzeige anzeigen.

  3. Autorisieren Sie das Script, wenn Sie dazu aufgefordert werden. Wenn auf dem OAuth-Zustimmungsbildschirm die Warnung Diese App ist nicht bestätigt angezeigt wird, wählen Sie Erweitert > Zu {Project Name} (unsicher) aus.

  4. Klicken Sie noch einmal auf Erweiterungen > Fortschrittsanzeige > Fortschrittsanzeige einblenden.

  5. Wenn Sie die Fortschrittsanzeige entfernen möchten, klicken Sie auf Erweiterungen > Fortschrittsanzeige > Fortschrittsanzeige ausblenden.

Code ansehen

Wenn Sie den Apps Script-Code für diese Lösung ansehen möchten, klicken Sie unten auf Quellcode ansehen:

Quellcode ansehen

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();
      }
    }
  }
}

Beitragende

Dieses Beispiel wird von Google mithilfe von Google Developer Experts verwaltet.

Nächste Schritte