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

Alert Dialog Properties

Confirm Dialog Properties

Login Dialog Properties

Login Dialog Result Properties

The result are received in the dialog resolved promise after the user closes or dismisses the dialog.

Prompt Dialog Properties

Prompt Dialog Result Properties

The result are received in the dialog resolved promise after the user closes or dismisses the dialog.

Events

No applicable events are present. The dialogs are using promises to return results.

API References

Native Component