NativeScript Core

Dialogs

NativeScript lets us create dialogs in your app in a manner similar to the web browser. We can create alerts, confirmations, prompts, logins and dialogs that require action. The module tns-core-modules/ui/dialogs is loaded globally in every NativeScript application so there is no need for explicit require/import of the module.

NOTE: You can call dialog functions with parameters similar to the web browser API or the options object. All dialog functions return a Promise object. In both iOS and Android, dialogs will not block your code execution!

TIP: You can try this NativeScript Playground project to see all of this article’s examples in action on your device.

Action

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("Your message", "Cancel", ["Option1", "Option2"]).then((result) => {
    console.log("Dialog result: " + result);
    if(result === "Options1") {
        // Do action1
    } else if(result === "Option2") {
        // Do action2
    }
});

Action with ActionOptions object.

const actionOptions = {
    title: "Your Title",
    message: "Your message",
    cancelButtonText: "Cancel",
    actions: ["Option1", "Option2"],
    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


Alert

An Alert Dialog will notify the user for an action that has happened. The alert method accepts string value to be displayed as the alert message or AlertOptions object with keys title, message, okBUttonText, and cancelable(Android only property).

Alert with string message (Web browser style).

alert("Your message").then(() => {
    console.log("Dialog closed!");
});

Alert with AlertOptions object.

const alertOptions = {
    title: "Your Title",
    message: "Your message",
    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("Dialog closed!");
});

Improve this document

Demo Source


Confirm

A Confirm Dialog will expect the user to accept or reject the action that is about the happen.

Confirm with parameters (Web browser style).

confirm("Your message").then((result) => {
    console.log("Dialog result: ", result);
});

Confirm with ConfirmOptions object.

const confirmOptions = {
    title: "Your title",
    message: "Your message",
    okButtonText: "Ok",
    cancelButtonText: "Cancel",
    neutralButtonText: "Neutral"
};
confirm(confirmOptions)
    .then((result) => {
        // result can be true/false/undefined
        console.log(result);
    });

Improve this document

Demo Source


Login

A Login Dialog will wait for the user to input their credentials.

login with parameters (Web browser style).

login("Your message", "Username", "Password").then((r) => {
    console.log("Dialog result: ", r.result);
    console.log(`User: ${r.userName}  Password: ${r.password}`, r.userName, r.password);
});

login with ConfirmOptions object.

const loginOptions = {
    title: "Your title",
    message: "Your message",
    okButtonText: "Login",
    cancelButtonText: "Cancel",
    neutralButtonText: "Neutral",
    userName: "Username",
    password: "Password"
};
login(loginOptions).then((r) => {
    console.log("Dialog result: ", r.result);
    console.log(`User: ${r.userName}  Password: ${r.password}`, r.userName, r.password);
});

Improve this document

Demo Source


Prompt

A Prompt Dialog will request for an input.

Prompt with parameters (Web browser style).

prompt("Your message", "Default text").then((r) => {
    console.log("Dialog result: ", r.result);
    console.log("Text: ", r.text);
});

Prompt with ConfirmOptions object.

const promptOptions = {
    title: "Your title",
    message: "Your message",
    okButtonText: "Ok",
    cancelButtonText: "Cancel",
    neutralButtonText: "Neutral",
    defaultText: "Default",
    inputType: "password" // text, password, or email
};
prompt(promptOptions).then((r) => {
    console.log("Dialog result: ", r.result);
    console.log("Text: ", r.text);
});

Improve this document

Demo Source


API Reference for the Dialogs module

API Reference for the ActionOptions interface

API Reference for the AlertOptions interface

API Reference for the ConfirmOptions interface

API Reference for the LoginOptions interface

API Reference for the PromptOptions interface