# 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 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
#### 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
| 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
#### 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);} |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
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”
| 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'); }} |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
* 
* 
* 
### 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 | 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é!”
### 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
Để 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:
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](https://hocggsheet.com/help-giai-quyet-thac-mac-qua-comment/)