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

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

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:

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ĩaTiếng Việt
OKChỉ 1 nút Ok
(mặc định)
Ok
OK_CANCEL2 nút Ok và CancelOk và Hủy
YES_NO2 nút Yes và NoCó và Không
YES_NO_CANCEL3 nut Yes, No, và CancelCó, 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

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:

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
CANCELnút Cancel
CLOSEnút Esc (escape) hoặc dấu x để tắt hộp thoại dialog
NOnút No
OKnút Ok
YESnú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”

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 đủ
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.

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

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

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

Leave a Reply