Bài 8: Hộp thoại Dialog / Popup

https://hocggsheet.com/hop-thoai-dialog-popup-app-script-sheet/

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

01	var ui = 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:

01234567

function xinChao() { var app = SpreadsheetApp; var ss = app.getActive(); var ui = app.getUi(); ui.alert('Xin chào');}

Kết quả hàm xinChao 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

XYZ

Ý nghĩa

Tiếng Việt

Chỉ 1 nút Ok (mặc định)

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

01234567

function xinChao() { var app = SpreadsheetApp; var ss = app.getActive(); var ui = 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 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:

01234567

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

Hiện hộp thoại dialog bằng hàm alert đầy đủ 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

nút Esc (escape) hoặc dấu x để tắt hộp thoại dialog

nút No

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”

0123456789101112

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.

01234567

function xacNhan() { var app = SpreadsheetApp; var ss = app.getActive(); var ui = 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ụ:

012345678910111213

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

0123456789101112

Ở 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

Previous[Help] – Form nhập liệu đơn giản NextBài 9: Ghi công thức Google Sheet vào ô

Last updated 2 years ago