Hiển thị thanh tiến trình trong bản trình bày trên Google Trang trình bày

Cấp độ viết mã: Trung cấp
Thời lượng: 15 phút
Loại dự án: Tiện ích bổ sung cho trình chỉnh sửa

Mục tiêu

  • Tìm hiểu chức năng của giải pháp.
  • Tìm hiểu chức năng của các dịch vụ Apps Script trong giải pháp.
  • Thiết lập tập lệnh.
  • Chạy tập lệnh.

Giới thiệu về giải pháp này

Hãy sử dụng giải pháp này để thêm một thanh tiến trình vào cuối các trang trình bày trong bản trình bày của bạn.

Ảnh chụp màn hình thanh tiến trình của tiện ích bổ sung Trình chỉnh sửa trang trình bày

Cách hoạt động

Tập lệnh này tính toán số trang trình bày trong bản trình bày và thêm một hình chữ nhật vào cuối mỗi trang trình bày. Tập lệnh này tăng chiều rộng cho từng hình chữ nhật để cho biết tiến trình trong các trang trình bày.

Các dịch vụ của Apps Script

Giải pháp này sử dụng dịch vụ sau:

Điều kiện tiên quyết

Để sử dụng mẫu này, bạn cần đáp ứng các điều kiện tiên quyết sau:

  • Một Tài khoản Google (tài khoản Google Workspace có thể yêu cầu quản trị viên phê duyệt).
  • Một trình duyệt web có quyền truy cập vào Internet.

Thiết lập tập lệnh

  1. Nhấp vào nút sau để tạo bản sao của bản trình bày Thanh tiến trình. Dự án Apps Script cho giải pháp này được đính kèm vào bản trình bày.
    Tạo bản sao
  2. Trong bản trình bày, hãy nhấp vào Tiện ích bổ sung > Thanh tiến trình > Hiện thanh tiến trình.

  3. Khi được nhắc, hãy cho phép tập lệnh chạy. Nếu màn hình đồng ý OAuth hiển thị cảnh báo Ứng dụng này chưa được xác minh, hãy tiếp tục bằng cách chọn Nâng cao > Chuyển đến {Tên dự án} (không an toàn).

  4. Một lần nữa, hãy nhấp vào Tiện ích > Thanh tiến trình > Hiện thanh tiến trình.

  5. Để xoá thanh tiến trình, hãy nhấp vào Tiện ích > Thanh tiến trình > Ẩn thanh tiến trình.

Xem lại mã

Để xem lại mã Apps Script cho giải pháp này, hãy nhấp vào Xem mã nguồn bên dưới:

Xem mã nguồn

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();
      }
    }
  }
}

Người đóng góp

Mẫu này do Google duy trì với sự trợ giúp của các Chuyên gia Google về phát triển.

Các bước tiếp theo