Fortschrittsanzeigen in einer Google-Präsentation anzeigen

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

Zielsetzungen

  • Machen Sie sich mit der Lösung vertraut.
  • Informieren Sie sich über die Funktionsweise der Apps Script-Dienste im Lösung.
  • Richten Sie das Skript ein.
  • Führen Sie das Skript aus.

Informationen zu dieser Lösung

Mit dieser Lösung fügen Sie am Ende der Folien in für Ihre Präsentation.

Screenshot der Fortschrittsanzeige des Add-ons für den Präsentationen-Editor

Funktionsweise

Das Skript berechnet die Anzahl der Folien in der Präsentation und fügt einen Rechtecke unten auf jeder Folie. Das Skript vergrößert die Breite um den Fortschritt innerhalb der Folien anzuzeigen.

Apps Script-Dienste

Diese Lösung verwendet den folgenden Dienst:

Vorbereitung

Damit Sie dieses Beispiel verwenden können, müssen folgende Voraussetzungen erfüllt sein:

  • Ein Google-Konto (Google Workspace-Konten können Genehmigung des Administrators erforderlich.
  • Ein Webbrowser mit Zugriff auf das Internet.

Skript einrichten

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

  3. Autorisieren Sie das Skript, wenn Sie dazu aufgefordert werden. Wenn auf dem OAuth-Zustimmungsbildschirm die Warnung Diese App wurde nicht überprüft angezeigt wird, wählen Sie Erweitert > aus. Rufen Sie {Project Name} auf (unsicher).

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

  5. Klicken Sie auf Erweiterungen, um die Fortschrittsanzeige zu entfernen. > Fortschrittsanzeige > Fortschrittsanzeige ausblenden.

Code ansehen

Um den Apps Script-Code für diese Lösung zu überprüfen, klicken Sie auf Sehen Sie sich den Quellcode unten an:

Quellcode ansehen

Slides/Fortschritt/Fortschritt.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-Entwicklerexperten verwaltet.

Nächste Schritte