Dialogs
NativeScript lets you create dialogs in your app in a manner similar to the web browser. You can create alerts, confirmations, prompts, logins and dialogs that require action.
Alert Dialog
An Alert Dialog will notify the user for an action that has happened. It can be defined as:
const alertOptions = {
title: "Race selection",
message: "Race chosen: Unicorn",
okButtonText: "OK",
cancelable: false // [Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog.
};
alert(alertOptions).then(() => {
console.log("Race chosen!");
});
import { alert, AlertOptions } from "tns-core-modules/ui/dialogs";
export function showAlertDialog() {
const alertOptions: AlertOptions = {
title: "Race selection",
message: "Race chosen: Unicorn",
okButtonText: "OK",
cancelable: false // [Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog.
};
alert(alertOptions).then(() => {
console.log("Race chosen!");
});
}
Action Dialog
An Action Dialog will require a particular activity from the
user. The action
method accepts multiple parameters
or an ActionOptions
object with keys
title
, message
,
cancelBUttonText
, actions
, and
cancelable
(Android only property).
Action with parameters (Web browser style).
Action with ActionOptions
object.
function showActionDialog() {
const actionOptions = {
title: "Race selection",
message: "Choose your race",
cancelButtonText: "Cancel",
actions: ["Human", "Elf", "Dwarf", "Orc", "Unicorn"],
cancelable: true // Android only
};
action(actionOptions).then((result) => {
console.log(result);
});
}
exports.showActionDialog = showActionDialog;
import { action, ActionOptions } from "tns-core-modules/ui/dialogs";
export function showActionDialog() {
const actionOptions: ActionOptions = {
title: "Race selection",
message: "Choose your race",
cancelButtonText: "Cancel",
actions: ["Human", "Elf", "Dwarf", "Orc", "Unicorn"],
cancelable: true // Android only
};
action(actionOptions).then((result) => {
console.log("Dialog result: ", result);
if (result === "Options1") {
// Do action 1
} else if (result === "Option2") {
// Do action 2
}
});
}
Confirm Dialog
A Confirm Dialog will expect the user to accept or reject the action that is about the happen. For example:
function showConfirmDialog() {
const confirmOptions = {
title: "Race selection",
message: "Are you sure you want to be a Unicorn?",
okButtonText: "Yes",
cancelButtonText: "No",
neutralButtonText: "Cancel"
};
confirm(confirmOptions)
.then((result) => {
console.log(result);
});
}
exports.showConfirmDialog = showConfirmDialog;
import { confirm, ConfirmOptions } from "tns-core-modules/ui/dialogs";
export function showConfirmDialog() {
const confirmOptions: ConfirmOptions = {
title: "Race selection",
message: "Are you sure you want to be a Unicorn?",
okButtonText: "Yes",
cancelButtonText: "No",
neutralButtonText: "Cancel"
};
confirm(confirmOptions)
.then((result) => {
console.log(result);
});
}
Login Dialog
A Login Dialog will wait for the user to input their credentials:
function showLoginDialog() {
const loginOptions = {
title: "Login Form",
message: "Enter your credentials",
okButtonText: "Login",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
userNameHint: "Enter your username",
passwordHint: "Enter your password",
userName: "john_doe",
password: "123456"
};
login(loginOptions).then((loginResult) => {
console.log(loginResult.result);
});
}
exports.showLoginDialog = showLoginDialog;
import { login, LoginOptions, LoginResult } from "tns-core-modules/ui/dialogs";
export function showLoginDialog() {
const loginOptions: LoginOptions = {
title: "Login Form",
message: "Enter your credentials",
okButtonText: "Login",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
userNameHint: "Enter your username",
passwordHint: "Enter your password",
userName: "john_doe",
password: "123456"
};
login(loginOptions).then((loginResult: LoginResult) => {
console.log(loginResult.result);
});
}
Prompt Dialog
A Prompt Dialog will request for an input. A basic definition might be:
function showPromptDialog() {
const promptOptions = {
title: "Hey There",
defaultText: " Enter your mood ",
message: "How you doin'",
okButtonText: "OK",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
cancelable: true,
inputType: "text", // email, number, text, password, or email
capitalizationType: "sentences" // all, none, sentences or words
};
prompt(promptOptions).then((result) => {
console.log(`Hello, ${result.text}`);
});
}
exports.showPromptDialog = showPromptDialog;
import { prompt, PromptOptions, PromptResult, capitalizationType, inputType } from "tns-core-modules/ui/dialogs";
export function showPromptDialog() {
const promptOptions: PromptOptions = {
title: "Hey There",
defaultText: " Enter your mood ",
message: "How you doin'",
okButtonText: "OK",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
cancelable: true,
inputType: inputType.text, // email, number, text, password, or email
capitalizationType: capitalizationType.sentences // all. none, sentences or words
};
prompt(promptOptions).then((result: PromptResult) => {
console.log("Hello, " + result.text);
});
}
Properties
Action Dialog Propeties
Name | Type | Description |
---|---|---|
title |
string |
Gets or sets the dialog title. |
message |
string |
Gets or sets the dialog message. |
cancelable |
boolean |
[Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog. |
actions |
Array<string> |
Gets or sets the list of available actions. |
cancelButtonText |
string |
Gets or sets the Cancel button text. |
Alert Dialog Properties
Name | Type | Description |
---|---|---|
title |
string |
Gets or sets the dialog title. |
message |
string |
Gets or sets the dialog message. |
cancelable |
boolean |
[Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog. |
okButtonText |
string |
Gets or sets the OK button text. |
Confirm Dialog Properties
Name | Type | Description |
---|---|---|
title |
string |
Gets or sets the dialog title. |
message |
string |
Gets or sets the dialog message. |
cancelable |
boolean |
[Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog. |
cancelButtonText |
string |
Gets or sets the Cancel button text. |
okButtonText |
string |
Gets or sets the OK button text. |
neutralButtonText |
string |
Gets or sets the neutral button text. |
Login Dialog Properties
Name | Type | Description |
---|---|---|
title |
string |
Gets or sets the dialog title. |
message |
string |
Gets or sets the dialog message. |
cancelable |
boolean |
[Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog. |
cancelButtonText |
string |
Gets or sets the Cancel button text. |
okButtonText |
string |
Gets or sets the OK button text. |
neutralButtonText |
string |
Gets or sets the neutral button text. |
userName |
string |
Gets or sets the default text to display in the username input box. |
userNameHint |
string |
Gets or sets the default text to display as hint in the username input box. |
password |
string |
Gets or sets the default text to display in the password input box. |
passwordHint |
string |
Gets or sets the default text to display as hint in the password input box. |
Login Dialog Result Properties
The result are received in the dialog resolved promise after the user closes or dismisses the dialog.
Name | Type | Description |
---|---|---|
userName |
string |
Gets the username entered in the login dialog. |
password |
string |
Gets the password entered in the login dialog. |
result |
boolean |
Returns false when the dialog is dismissed.
Otherwise returns true
|
Prompt Dialog Properties
Name | Type | Description |
---|---|---|
title |
string |
Gets or sets the dialog title. |
message |
string |
Gets or sets the dialog message. |
cancelable |
boolean |
[Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog. |
cancelButtonText |
string |
Gets or sets the Cancel button text. |
okButtonText |
string |
Gets or sets the OK button text. |
neutralButtonText |
string |
Gets or sets the neutral button text. |
defaultText |
string |
Gets or sets the default text to display in the input box. |
capitalizationType |
string |
Gets or sets the prompt capitalizationType (none, all, sentences, or words). |
inputType |
string |
Gets or sets the prompt input type (plain text, password, or email). |
Prompt Dialog Result Properties
The result are received in the dialog resolved promise after the user closes or dismisses the dialog.
Name | Type | Description |
---|---|---|
text |
string |
Gets the text entered in the prompt dialog input field. |
result |
boolean |
Returns false when the dialog is dismissed.
Otherwise returns true
|
Events
No applicable events are present. The dialogs are using promises to return results.
API References
Name | Type | API Reference Link |
---|---|---|
tns-core-modules/ui/dialogs | Module |
|
action | function |
|
ActionOptions | interface |
|
alert | function |
|
AlertOptions | interface |
|
confirm | function |
|
ConfirmOptions | interface |
|
login | function |
|
LoginOptions | interface |
|
LoginResults | interface |
|
prompt | function |
|
PromptOptions | interface |
Native Component
Android | iOS |
---|---|
android.app.AlertDialog.Builder | UIAlertController |