NativeScript Core

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!");
    });

}

Improve this document

Demo Source


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
        }
    });
}

Improve this document

Demo Source


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);
        });

}

Improve this document

Demo Source


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);
    });

}

Improve this document

Demo Source


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);
    });

}

Improve this document

Demo Source


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