Yêu cầu:

+ Nhúng google sheet vào wordpress và người dùng có thể sửa trực tiếp lên sheet này (Khi nhúng link embed do Google cung cấp, người dùng chỉ xem chứ không sửa được trực tiếp).

+ Chỉ hiển thị kết quả & ẩn công thức/cách làm ra kết quả.

+ Sử dụng được trên cả desktop & mobile.

Cách làm: 

A. Nhúng Google sheet vào wordpress:

1. Share documents – Sử dụng chức năng Share để tạo link nhúng:

Chức năng này sẽ tạo ra version link trực tiếp đến Google sheet muốn nhúng. Thông qua các options thêm vào link, admin có thể tùy biến hiển thị của sheet cũng như cho phép visitors có thể sửa trực tiếp sheet được nhúng trên website. Ưu điểm của chức năng này là các thay đổi của Sheet sẽ được cập nhật tức thì vào bản nhúng trên web. Nhược điểm: tối đa 50 visitors có thể xem version này cùng lúc trên website.

Cách làm:

Đăng nhập vào Google Sheet => tạo bảng tính => sau khi hoàn thành bảng tính, bấm “Share”  với chế độ “anyone with the link can edit the sheet” => Copy link

sharing Google Sheet

2. Xuất bản bảng tính dưới dạng nhúng – Publish to web

Chức năng này tạo ra một version lightweight webpage của Google sheet có thể nhúng vào website, nhiều visitors có thể xem cùng lúc version này. Nhược điểm của cách này là version lightweight này chỉ được cập nhật 5 phút/lần những thay đổi từ sheet gốc. 

Cách làm:  

Menu => File => Publish to web => Embed => Sheet1 (sheet bạn muốn xuất bản công khai) => Copy lại link embed

Nhung google sheet vao wordpress

3. Sửa link để nhúng được bản Sheet có thể edit trực tiếp trên wordpress: 

Sửa link embed như sau: 

Trong link embed copy ở bước 2, thay đoạn “https://docs.google.com/spreadsheets/d/RANDOMLETTERSHERE/pubhtml?gid=0” thành link copy tại bước 1 (link share). Đoạn sau của link embed giữ nguyên. Sau đó nhúng link đã sửa vào wordpress (post/page) và test lại kết quả.

B. Ẩn công thức/hàm sử dụng trong bảng tính với người dùng: 

+ Để ẩn công thức/hàm sử dụng, bạn tạo sheet phụ và sử dụng hàm importrange để lấy kết quả từ sheet gốc hiển thị lên sheet phụ (Sheet phụ là sheet sử dụng để share ở phần A)

ImportRange

+ Để lấy dữ liệu người dùng nhập trực tiếp vào sheet phụ, bạn tham chiếu ô dữ liệu từ sheet phụ (phần người dùng nhập dữ liệu) => sang sheet gốc

Reference data google sheet

Tip: nên khóa những ô chứa công thức để tránh người dùng nhập nhầm làm hỏng bảng tính.

C. Sử dụng trên cả Desktop và Mobile: 

Với link nhúng ở phần A, người dùng sử dụng tốt trên desktop nhưng trên mobile browser thì sẽ chỉ xem được chứ không nhập liệu vào bảng được do mobile version của Google sheet không hỗ trợ. 

Để nhập liệu trên mobile, người dùng cần cài app Google Sheets (update 06/2020)

D. Cập nhật thay đổi từ Google sheet lên website tức thì

Hiện tại bản nhúng Google Sheet chỉ cập nhật 5 phút một lần. Để những thay đổi phản ánh ngay trên web, chúng ta cần nhúng link 1 của phần A (thay vì link 2). 

+ thay phần “edit#” => “htmlembed/sheet?”  (đây là version view only – không thể sửa trực tiếp trên web như ở phần A

Tham khảo: https://medium.com/@steynviljoen/how-to-share-or-embed-a-google-sheets-chart-that-updates-instantly-no-need-to-wait-for-5-minutes-b6d325cd8598

E. Tùy biến hiển thị Google Sheet khi nhúng vào website

single – Chỉ hiện thị một sheet, mặc định là sheet [0]. Nếu muốn hiển thi sheet khác => cần thêm tham số “gid=sheetID” vào.

gid – Số hiệu của sheet được hiển thị. Số hiệu GID tìm trong url của sheet muốn hiển thị như ví dụ dưới đây:  https://docs.google.com/a/mycompany.com/spreadsheets/d/15B___SOYjsRmU9tiwZly318HZnFHOHeayS6UTHx7Pu2I/edit#gid=419657423

range – Hiển thị range được lựa chọn 

VD: https://docs.google.com/spreadsheets/d/[Googlekey]/pubhtml?gid=28&range=a1:s45

headers – đặt header = false sẽ không hiển thị số dòng và cột. 

widget – setting this to false removes the sheet selector bar when it’s embedded.

chrome – setting this to false removes the title bar showing the spreadsheet name, above the sheet.

rm=minimal – remove header & tool bar of the spreadsheet

Chú ý: nếu sử dụng link editable thì user sẽ xem được cả sheet (dù chỉ embed specific range) => có thể khắc phục bằng cách hide sheet & protect cell.

So putting it all together:

iframe src=”https://docs.google.com/spreadsheets/d/[Googlekey]/pubhtml?gid=28&range=a1:s45&single=true&widget=true&headers=false”

Ref: control over appearance of Google spreadsheet

https://stackoverflow.com/questions/46059687/embed-just-a-range-of-editable-google-spreadsheet

Example: