I am learning NativeScript. As part of that effort, I am attempting to create a page that shows a dialog to the user. When the user clicks a button, I need to show them a dialog that allows them to enter two values (first name and last name).

The dialogs module in NativeScript provides several built-in options. However, from what I can tell, none of these options allow you to create a dialog that shows two fields. How do I create a dialog in NativeScript that will allow me to prompt a user to enter a first name and a last name? Currently, my page looks like this:

page.xml

<Page xmlns=".xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
      <Border borderWidth="1" borderColor="#000" width="28" height="28" cornerRadius="14" tap="addPersonButton_Tap">
        <Label text="add person" />
      </Border>      
  </GridLayout>
</Page>

page.js

var viewModel = new MyPageViewModel();
function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = viewModel;        
}
exports.pageLoaded = pageLoaded;

function addPersonButton_Tap(args) {
    console.log('new person');
    /*
     * Dialog open code goes here. Yet, the following definitaly is not correct.
    dialogs.prompt({
        title: "Add New Person",
        message: "First Name",
        okButtonText: "Save",
        cancelButtonText: "Cancel",
        inputType: dialogs.inputType.text
    }).
    then(function (r) {
        if (r.result) {
          console.log('User clicked "Save"!');
        }
    });   
    */
}
exports.addPersonButton_Tap = addPersonButton_Tap;

I am learning NativeScript. As part of that effort, I am attempting to create a page that shows a dialog to the user. When the user clicks a button, I need to show them a dialog that allows them to enter two values (first name and last name).

The dialogs module in NativeScript provides several built-in options. However, from what I can tell, none of these options allow you to create a dialog that shows two fields. How do I create a dialog in NativeScript that will allow me to prompt a user to enter a first name and a last name? Currently, my page looks like this:

page.xml

<Page xmlns="http://www.nativescript/tns.xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
      <Border borderWidth="1" borderColor="#000" width="28" height="28" cornerRadius="14" tap="addPersonButton_Tap">
        <Label text="add person" />
      </Border>      
  </GridLayout>
</Page>

page.js

var viewModel = new MyPageViewModel();
function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = viewModel;        
}
exports.pageLoaded = pageLoaded;

function addPersonButton_Tap(args) {
    console.log('new person');
    /*
     * Dialog open code goes here. Yet, the following definitaly is not correct.
    dialogs.prompt({
        title: "Add New Person",
        message: "First Name",
        okButtonText: "Save",
        cancelButtonText: "Cancel",
        inputType: dialogs.inputType.text
    }).
    then(function (r) {
        if (r.result) {
          console.log('User clicked "Save"!');
        }
    });   
    */
}
exports.addPersonButton_Tap = addPersonButton_Tap;

• javascript
• nativescript

3 Answers 3

We already support modal pages. Here you can see a demo with it: https://github./NativeScript/NativeScript/blob/7c13db6bc241c48d5897d556f2973944b8b750d6/apps/app/ui-tests-app/modal-view/modal-view.ts.

Moreover, you can also find the information you needed in the documentation:

• http://docs.nativescript/ui-dialogs#prompt
• http://docs.nativescript/api-reference/classes/_ui_page_.page.html#showmodal

I just wanted to mention one more thing. I saw that you are using the Border tag. Now you can use CSS styling instead.

Anyone that lands here while searching for display custom dialog. Please refer to this

It is properly documented here how to display a custom dialog in nativescript. Specifically look for showModal function at the bottom of the page. In this function user can pass in the moduleName(start from application root), context, closeCallBack function and boolean to show modal in full screen.

I've never seen NativeScript before but just flipping through the documentation I don't think you're approaching this the right way. In the docs it says, "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." and in a web browser there is not a way to do what you're asking (pull up a dialog prompt with two small text fields). In a web browser you would acplish this by creating a form using html. It looks like example 2 here: http://developer.telerik./featured/getting-started-nativescript/ is more along the lines of what you're after.