Custom Dialog in NativeScript

Question

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.org/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;

Answer 1

We already support modal pages. Here you can see a demo with it: https://github.com/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.org/ui-dialogs#prompt
• http://docs.nativescript.org/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.

Answer 2

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.