Bài 8: Hộp thoại Dialog / Popup
https://hocggsheet.com/hop-thoai-dialog-popup-app-script-sheet/
Last updated
https://hocggsheet.com/hop-thoai-dialog-popup-app-script-sheet/
Last updated
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()
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
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.
01
var ui = SpreadsheetApp.getUi();
Đâ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:
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');}
Ở 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à:
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
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);}
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);}
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”
0123456789101112
function xacNhan() { var app = SpreadsheetApp; var ss = app.getActive(); var ui = app.getUi(); var nut = 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'); }}
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.
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);}
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
function hocggsheetBai8() { var app = SpreadsheetApp; var ss = app.getActive(); var ui = app.getUi(); var nut = 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:
0123456789101112
function prompt2() { var app = SpreadsheetApp; var ss = app.getActive(); var ui = app.getUi(); var text = 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é!”
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
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ì
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
Kết quả hàm xinChao
Kết quả hàm xinChao với 3 button có, không, và hủy
Kết quả
Hộp thoại dialog sử dụng hàm prompt() đầy đủ
Quá thời gian quy định của App Script
