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 độ lập trình: Trung cấp
Thời lượng: 15 phút
Loại dự án: Tiện ích bổ sung dành cho trình chỉnh sửa

Mục tiêu

  • Tìm hiểu tác dụng của giải pháp.
  • Tìm hiểu chức năng của dịch vụ Apps Script trong Cloud.
  • 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

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

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

Cách hoạt động

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

Dịch vụ 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 có các điều kiện tiên quyết sau đây:

  • 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 đây để tạo bản sao của Thanh tiến trình Trang trình bày bản trình bày. Dự án Apps Script dành 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 > Thanh tiến trình > Hiển thị thanh tiến trình.
  3. Khi được nhắc, hãy cho phép tập lệnh. Nếu màn hình xin phép bằng OAuth cho thấy cảnh báo, tức là Ứng dụng này chưa được xác minh, tiếp tục bằng cách chọn Nâng cao > Truy cập {Project Name} (không an toàn).

  4. Một lần nữa, nhấp vào Tiện ích > Thanh tiến trình > Hiển thị 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 đoạn mã

Để xem 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

trang trình bày/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 được Google duy trì với sự trợ giúp của Chuyên gia nhà phát triển của Google.

Các bước tiếp theo