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.

Action Dialog

An Action Dialog will require a particular activity from the user. A basic definition of such dialog that expects a selection is:

let options = {
    title: "Race selection",
    message: "Choose your race",
    cancelButtonText: "Cancel",
    actions: ["Human", "Elf", "Dwarf", "Orc", "Unicorn"]
};

action(options).then((result) => {
    console.log(result);
});

Image

Improve this document

Demo Source


Alert Dialog

An Alert Dialog will notify the user for an action that has happened. It can be defined as:

let options = {
    title: "Race selection",
    message: "Race chosen: Unicorn",
    okButtonText: "OK"
};

alert(options).then(() => {
    console.log("Race chosen!");
});

Image

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:

let options = {
    title: "Race selection",
    message: "Are you sure you want to be a Unicorn?",
    okButtonText: "Yes",
    cancelButtonText: "No",
    neutralButtonText: "Cancel"
};

confirm(options).then((result: boolean) => {
    console.log(result);
});

Image

Improve this document

Demo Source


Login Dialog

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

let options = {
    title: "Login",
    message: "Login",
    username: "john_doe",
    password: "",
    okButtonText: "Ok",
    cancelButtonText: "Cancel"
};

login(options).then((loginResult: LoginResult) => {
    console.log(loginResult.result);
});

Image

Improve this document

Demo Source


Prompt Dialog

A Prompt Dialog will request for an input. A basic definition might be:

let options = {
    title: "Name",
    defaultText: "Enter your name",
    inputType: inputType.text,
    okButtonText: "Ok",
    cancelButtonText: "Cancel"
};

prompt(options).then((result: PromptResult) => {
    console.log("Hello, " + result.text);
});

Image

Improve this document

Demo Source


Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.