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 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 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 số trang trình bày 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 này tăng chiều rộng cho mỗi 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:

  • Dịch vụ Trang trình bày – Lấy trang trình bày của một bản trình bày và thêm hình chữ nhật vào từng trang trình bày.

Đ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:

  • Tài khoản Google (có thể cần có sự phê duyệt của quản trị viên đối với tài khoản Google Workspace).
  • Một trình duyệt web có quyền truy cập 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 trên Trang trình bày. 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 Extensions (Tiện ích) > Progress bar (Thanh tiến trình) > Show progress bar (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 {Project Name} (không an toàn).

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

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

Xem lại mã

Để xem xét 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 Chuyên gia phát triển của Google.

Các bước tiếp theo