Fortschrittsanzeigen in einer Google-Präsentation anzeigen

Programmierkenntnisse: Mittelstufe
Dauer: 15 Minuten
Projekttyp: Editor-Add-on

Ziele

  • Funktionsweise der Lösung verstehen
  • Verstehen, wie die Apps Script-Dienste in der Lösung funktionieren
  • Das Script einrichten
  • Das Script ausführen.

Informationen zu dieser Lösung

Mit dieser Lösung können Sie Ihren Präsentationsfolien eine Fortschrittsanzeige hinzufügen.

Google-Präsentation mit einer Fortschrittsanzeige unten

Funktionsweise

Das Script berechnet die Anzahl der Folien in der Präsentation und fügt jeder Folie ein Rechteck am unteren Rand hinzu. Die Breite des Rechtecks wird mit dem Fortschritt auf den Folien erhöht.

Apps Script-Dienste

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

  • Slides-Dienst: Ruft die Folien einer Präsentation ab und fügt jeder Folie ein Rechteck hinzu.

Vorbereitung

Für dieses Beispiel sind folgende Voraussetzungen erforderlich:

  • Ein Google-Konto (für Google Workspace-Konten ist möglicherweise die Genehmigung durch den Administrator erforderlich)
  • Ein Webbrowser mit Internetzugriff

Das Script einrichten

  1. Klicken Sie auf die folgende Schaltfläche, um eine Kopie der Google Präsentationen-Präsentation Fortschrittsanzeige 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 Add-ons > Fortschrittsanzeige > Fortschrittsanzeige einblenden.

  3. Autorisieren Sie die Skripts, wenn Sie dazu aufgefordert werden. Wenn auf dem OAuth-Zustimmungsbildschirm die Warnung Diese App wurde nicht verifiziert angezeigt wird, wählen Sie Erweitert > Zu {Projektname} (unsicher) aus.

  4. Klicken Sie noch einmal auf Add-ons > Fortschrittsanzeige > Fortschrittsanzeige einblenden.

  5. Wenn Sie die Fortschrittsanzeige entfernen möchten, klicken Sie auf Add-ons > Fortschrittsanzeige > Fortschrittsanzeige ausblenden.

Code ansehen

Wenn Sie den Apps Script-Code für diese Lösung ansehen möchten, klicken Sie 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 mit Unterstützung von Google Developer Experts verwaltet.

Nächste Schritte