Guía de inicio rápido: Complemento de la barra de progreso para Presentaciones de Google

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Completa los pasos descritos en el resto de esta página y, en unos cinco minutos, habrás creado un complemento de Presentaciones de Google que agrega una barra de progreso a tu presentación. También puedes obtener más información sobre este complemento de Presentaciones y cómo funciona en el video de la derecha.

Configurar

  1. Crea una nueva presentación de Google.
  2. Desde tu nueva presentación, selecciona el elemento de menú Herramientas > Script editor. Si aparece una pantalla de bienvenida, haz clic en Proyecto en blanco (Blank Project).
  3. Borra cualquier código en el editor de secuencias de comandos y cambia el nombre de Code.gs a progress.gs.

    diapositivas/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. Selecciona el elemento de menú Archivo > Guardar todo. Asigna un nombre a la nueva secuencia de comandos "Guía de inicio rápido de la barra de progreso" y haz clic en Aceptar. El nombre de la secuencia de comandos se muestra a los usuarios finales en varios lugares, incluido el diálogo de autorización.

Probarlo

  1. Vuelve a tu presentación y vuelve a cargar la página.
  2. Después de unos segundos, aparecerá un submenú de ProgressBar en el menú Complementos. Haz clic en Addg > ProgressBar > Show Progress Bar.
  3. Un cuadro de diálogo indica que la secuencia de comandos requiere autorización. Haga clic en Continuar. Un segundo cuadro de diálogo solicita autorización para servicios de Google específicos. Haz clic en Permitir.
  4. Se mostrará una barra de progreso. Para quitar la barra de progreso, haz clic en Complementos > ProgressBar > Ocultar barra de progreso.

Publicar

Como este es un complemento de ejemplo, nuestro instructivo termina aquí. Si desarrollas un complemento real, el último paso es publicarlo para que otras personas lo encuentren y lo instalen.

Más información

Para obtener más información sobre cómo extender Presentaciones de Google con Apps Script, consulta los siguientes recursos: