Tạo pop up trong google sheet

• Tóm tắt
• getUi()
• Cách dùng
• 1. alert()
• alert(prompt)
• alert(prompt, buttons)
• alert(title, prompt, buttons)
• Kiểm tra điều kiện cho nút bấm (button)
• prompt(title, prompt, buttons)
• Kiểm tra điều kiện cho prompt
• Lưu ý quan trọng
• Lưu ý 1
• Lưu ý 2
• File luyện tập Bài 8 – Hộp thoại dialog

Xuất hiện hộp thoại dialog là một trong những việc cơ bản nhất khi sử dụng App Script – Sheet. Để làm được điều này, chúng ta có 2 hàm phổ biến nhất. Đó là alert() và prompt().

Hộp thoại dialog bằng hàm prompt()

Tóm tắt

• getUi() – bật chức năng khởi tạo dialog, menu, hay sidebar
• alert() – xuất hiện hộp thoại dialog / popup, có 3 cách dùng
• prompt() – xuất hiện hộp thoại có phần điền thông tin, kết hợp với getSelectedButton() và getResponseText() để lấy thông tin đầu vào (input) cần thiết

getUi()

Trước khi đến với các hàm chính , thì chúng ta cần biết 1 hàm quan trọng trước. Đó là getUi(). Hàm này hiểu nôm na là nó sẽ kích hoạt chức năng khởi tạo dialog, menu hay sidebar trong Google Sheet. Nếu bạn muốn tạo dialog, menu hay sidebar thì phải dùng hàm này trước tiên.

Cách dùng

varui=SpreadsheetApp.getUi();

1. alert()

Đây là hàm dùng để bật hộp thoại dialog trên Google Sheet. Nó bao gồm 3 thành phần: title – tiêu đề, prompt – nội dung, và buttons – nút bấm. Tuy nhiên bạn không cần dùng hết cả 3 thành phần này. Sau đây là 3 cách dùng:

alert(prompt)

Ví dụ, chương trình sau sẽ hiển thiện hộp thoại có chữ Xin chào ra file Google Sheet:

functionxinChao(){    varapp=SpreadsheetApp;    varss=app.getActive();    varui=app.getUi();    ui.alert('Xin chào'); }

Kết quả hàm xinChao

alert(prompt, buttons)

Ở cách dùng thứ nhất, chỉ có prompt, thì mạc định nút bấm (button) sẽ là “Ok”. Tuy nhiên thì chúng ta có thể thêm những nút bấm khác bằng cách sử dụng hàm ui.ButtonSet.XYZ với XYZ là:

XYZ	Ý nghĩa	Tiếng Việt
OK	Chỉ 1 nút Ok (mặc định)	Ok
OK_CANCEL	2 nút Ok và Cancel	Ok và Hủy
YES_NO	2 nút Yes và No	Có và Không
YES_NO_CANCEL	3 nut Yes, No, và Cancel	Có, Không, và Hủy

Ví dụ, chương trình sau sẽ xuất hiện hộp thoại “Bạn có khỏe không?” và 3 lựa chọn (button): Có, Không, Hủy

functionxinChao(){    varapp=SpreadsheetApp;    varss=app.getActive();    varui=app.getUi();    ui.alert('Bạn có khỏe không?',ui.ButtonSet.YES_NO_CANCEL); }

Kết quả hàm xinChao với 3 button có, không, và hủy

alert(title, prompt, buttons)

Một hàm alert() đầy đủ sẽ có 3 thành phần tiêu đề, nội dung, và nút bấm. Chương trình sau sẽ thêm tiêu đề “Xin chào” cho hộp thoại dialog ở ví dụ trên:

functionxinChao(){    varapp=SpreadsheetApp;    varss=app.getActive();    varui=app.getUi();    ui.alert('Xin chào','Bạn có khỏe không?',ui.ButtonSet.YES_NO_CANCEL); }

Kết quả

Kiểm tra điều kiện cho nút bấm (button)

Nếu các bạn muốn kiểm tra điều kiện if cho button để chạy các câu lệnh tương ứng với mỗi button, các bạn hãy dùng hàm ui.Button.XYZ với XYZ là:

XYZ	Ý nghĩa
CANCEL	nút Cancel
CLOSE	nút Esc (escape) hoặc dấu x để tắt hộp thoại dialog
NO	nút No
OK	nút Ok
YES	nút Yes

Ví dụ chương trình sau sẽ kiểm tra người dùng chọn lựa chọn nào. Nếu chọn OK thì sẽ tiếp tục xuất hiện hộp thoại “Đã xác nhận”, còn nếu chọn Hủy (cancel) thì xuất hiện hộp thoại “Đã hủy”

functionxacNhan(){    varapp=SpreadsheetApp;    varss=app.getActive();    varui=app.getUi();    varnut=ui.alert('Bạn chắc chứ?',ui.ButtonSet.OK_CANCEL);    if(nut==ui.Button.OK){      ui.alert('Đã xác nhận');    }else{      ui.alert('Đã hủy');    } }

prompt(title, prompt, buttons)

Cách sử dụng hàm prompt() cũng giống với hàm alert() ở chỗ đều có 3 thành phần tiêu đề, nội dung, và nút bấm. Việc sử dụng thành phần nào là ở tùy mỗi người. Bên cạnh đó, prompt khác alert ở 1 điểm quan trọng. Đó là ngoài việc sẽ xuất hiện hộp thoại dialog, prompt cũng cho hiện ra 1 khung để nhập thông tin từ bàn phím.

Nói tóm lại, prompt sẽ có 2 input (thông tin đầu vào). Một là nút bấm, và hai là thông tin nhập từ bàn phím.

Hộp thoại dialog sử dụng hàm prompt() đầy đủ

Chương trình sau sẽ hiện ra kết quả giống hình trên. Ở khung nhập thông tin từ bàn phím, chúng ta có thể điền bất kì thứ gì chúng ta muốn. Có thể là chữ, số và các kí tự đặc biệt.

functionxacNhan(){    varapp=SpreadsheetApp;    varss=app.getActive();    varui=app.getUi();    ui.prompt('Xin chào','Bạn khỏe không?',ui.ButtonSet.OK_CANCEL); }

Kiểm tra điều kiện cho prompt

Như đã nói ở trên, vì prompt có đến 2 input, là nút bấm (button) và khung nhập liệu, thế nên cũng có 2 hàm để lấy 2 giá trị input này. Đó là getResponseText() và getSelectedButton()

Với getSelectedButton(), cách sử dụng tương tự như với alert(). Ví dụ:

functionhocggsheetBai8(){    varapp=SpreadsheetApp;    varss=app.getActive();    varui=app.getUi();    varnut=ui.prompt('Nhập vào',ui.ButtonSet.YES_NO).getSelectedButton();    if(nut==ui.Button.YES){      ui.alert('Bạn đã chọn Yes');    }else{      ui.alert('Đã chọn NO');    } }

Còn với getResponseText(), chúng ta sử dụng như ví dụ sau:

functionprompt2(){    varapp=SpreadsheetApp;    varss=app.getActive();    varui=app.getUi();    vartext=ui.prompt('Sức khỏe hôm nay của bạn thế nào?',ui.ButtonSet.YES_NO).getResponseText();    if(text=="không tốt"){      ui.alert('Đi khám bác sĩ nhé!');    }else{      ui.alert('Cứ tiếp tục nhé!');    } }

Ở chương trình trên, đầu tiên sẽ xuất hiện hộp thoại dialog hỏi rằng: “Sức khỏe hôm nay của bạn thế nào?” Nếu bạn ghi vào “không tốt” thì sẽ có tiếp 1 thông báo hiện ra nói rằng “Đi khám bác sĩ nhé!” Còn nếu bạn ghi bất kì cái gì khác, thì sẽ thông báo “Cứ tiếp tục nhé!”

Lưu ý quan trọng

Lưu ý 1

Khi sử dụng alert() hoặc prompt() để mở hộp thoại dialog, các bạn chỉ có thể cho hộp thoại hiện lên trong 5 phút (300 giây) mà thôi. Sau 5 phút, tuy hộp thoại không tự mất đi, nhưng chương trình trong App Script sẽ tự dừng lại

Quá thời gian quy định của App Script

Lưu ý 2

Khi chương trình chạy đến dòng lệnh alert() hoặc prompt() thì những dòng lệnh sau sẽ bị dừng lại, cho đến khi bạn click vào một lựa chọn (button) bất kì

File luyện tập Bài 8 – Hộp thoại dialog

https://docs.google.com/spreadsheets/d/1kv9IIOJuDdrXqIfqFRq8puK5otIRc4GHBiQQMHve99U/edit?usp=sharing

Để xem code App Script, các bạn hãy Tạo bản sao (Make a copy) về Drive của các bạn nhé!

Ngoài ra, để hiểu rõ thêm về hộp thoại dialog, các bạn có thể tham khảo tài liệu của Google App Script:

https://developers.google.com/apps-script/reference/base/ui#alertprompt

https://developers.google.com/apps-script/guides/dialogs

Nếu có bất kì thắc mắc nào thì các bạn hãy để lại comment ở bên dưới post này, hoặc ở trong post Help – Giải đáp thắc mắc qua comment