Guida rapida: componente aggiuntivo della barra di avanzamento per Presentazioni Google

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Completa i passaggi descritti nel resto di questa pagina e in circa cinque minuti avrai creato un componente aggiuntivo di Presentazioni Google che ha aggiunto una barra di avanzamento alla tua presentazione. Puoi anche saperne di più su questo componente aggiuntivo di Presentazioni e sul suo funzionamento dal video a destra.

Configurare l'app

  1. Crea una nuova presentazione Google.
  2. Nella nuova presentazione, seleziona la voce di menu Strumenti > Editor di script. Se viene visualizzata una schermata di benvenuto, fai clic su Progetto vuoto.
  3. Elimina il codice nell'editor di script e rinomina Code.gs in progress.gs.

    diapositive/avanzamento/avanzamento.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. Seleziona la voce di menu File > Salva tutto. Assegna un nome al nuovo script "Guida rapida alla barra di avanzamento" e fai clic su OK. Il nome dello script viene mostrato agli utenti finali in diversi punti, inclusa la finestra di dialogo dell'autorizzazione.

Fai una prova

  1. Torna alla presentazione e ricarica la pagina.
  2. Dopo alcuni secondi, viene visualizzato il sottomenu ProgressBar sotto il menu Componenti aggiuntivi. Fai clic su Componenti aggiuntivi > ProgressBar > Mostra barra di avanzamento.
  3. Una finestra di dialogo indica che lo script richiede l'autorizzazione. Fai clic su Continua. Una seconda finestra di dialogo richiede l'autorizzazione per servizi Google specifici. Fai clic su Consenti.
  4. Viene visualizzata una barra di avanzamento. Per rimuovere la barra di avanzamento, fai clic su Componenti aggiuntivi > ProgressBar > Nascondi barra di avanzamento.

Pubblicazione

Poiché questo è un componente aggiuntivo di esempio, il nostro tutorial termina qui. Se stessi sviluppando un componente aggiuntivo reale, l'ultimo passaggio consiste nel pubblicarlo in modo che altre persone possano trovarlo e installarlo.

Scopri di più

Per continuare a imparare a estendere Presentazioni Google con Apps Script, consultate le seguenti risorse: