Kurzanleitung: Fortschrittsanzeige für Google Präsentationen

Führen Sie die restlichen Schritte auf dieser Seite aus. In etwa fünf Minuten haben Sie ein Add-on für Google Präsentationen erstellt, das Ihrer Präsentation eine Fortschrittsanzeige hinzufügt. Weitere Informationen zu diesem Add-on für Google Präsentationen und zur Funktionsweise finden Sie im Video rechts.

So richtest du die App ein

  1. Erstellen Sie eine neue Google-Präsentation.
  2. Wählen Sie in der neuen Präsentation den Menüpunkt Tools > Skripteditor aus. Wenn ein Begrüßungsbildschirm angezeigt wird, klicken Sie auf Leeres Projekt.
  3. Löschen Sie den Code im Skripteditor und benennen Sie Code.gs in progress.gs um.

    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. Wählen Sie den Menüpunkt Datei > Alle speichern aus. Benennen Sie das neue Skript Kurzanleitung für die Fortschrittsanzeige& klicken Sie auf OK. Der Name des Skripts wird Endnutzern an mehreren Stellen angezeigt, auch im Autorisierungsdialogfeld.

Testen

  1. Kehren Sie zu Ihrer Präsentation zurück und aktualisieren Sie die Seite.
  2. Nach einigen Sekunden wird unter dem Menü Add-ons das Untermenü progressBar angezeigt. Klicken Sie auf Add-ons > Fortschrittsanzeige > Fortschrittsanzeige einblenden.
  3. In einem Dialogfeld wird angezeigt, dass das Skript autorisiert werden muss. Klicken Sie auf Weiter. Ein zweites Dialogfeld fordert die Autorisierung für bestimmte Google-Dienste an. Klicken Sie auf Zulassen.
  4. Sie sehen nun eine Fortschrittsleiste. Wenn Sie die Fortschrittsanzeige entfernen möchten, klicken Sie auf Add-ons > ProgressBar > Fortschrittsanzeige ausblenden.

Veröffentlichen

Da dies ein Beispiel-Add-on ist, endet unsere Anleitung hier. Wenn Sie ein echtes Add-on entwickelt haben, besteht der letzte Schritt darin, es zu veröffentlichen, damit andere Nutzer es finden und installieren können.

Weitere Informationen

Weitere Informationen dazu, wie Sie Google Präsentationen mit Apps Script erweitern, finden Sie in den folgenden Ressourcen: