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

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. Tùy biến hiển thị Google Sheet khi nhúng vào website

single – setting to true displays just one sheet in the spreadsheet. The default sheet it will display is the first one created in the spreadsheet. This can be changed using ‘gid’ below.

gid – this needs to be a numeric identifier of the sheet you want to display. The first sheet created is 0, but others will have longer identifiers. To find the ‘gid’ for the sheet you want to display, go to the spreadsheet in Google Apps itself, and click on to your desired sheet. The URL in your browser should change to something like this: https://docs.google.com/a/mycompany.com/spreadsheets/d/15B___SOYjsRmU9tiwZly318HZnFHOHeayS6UTHx7Pu2I/edit#gid=419657423

The bit at the end of the URL shows you the gid for the sheet, and that is the number you need to bring into the shortcode in your website.

range – set this to the cell range you want to display within the sheet (or leave it out to display the whole sheet). In our example, we set this to f2:g6. Note if you’re being pedantic then you should really change the : to %3A since colons should be encoded in URLs – but most browsers should understand the colon, so don’t worry. If you like to be correct, you’d use range=f2%3Ag6 instead.

headers – setting this to false hides the row numbers and column letters.

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)

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: