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;

score 8 · Accepted Answer · edited May 11 '17 at 21:57

8

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:

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

edited May 11 '17 at 21:57

René Stalder

2,536
5
31
50

answered Sep 08 '15 at 11:53

Neli Chakarova

660
1
5
18

hey @Neli Chakarova github link is dead. would you please update that ? – Hardik Vaghani Aug 08 '16 at 05:53
1

Hey @HardikVaghani - I believe [this](https://github.com/NativeScript/NativeScript/blob/7c13db6bc241c48d5897d556f2973944b8b750d6/apps/app/ui-tests-app/modal-view/modal-view.ts) is the link which replaces the one in the answer. Please, let me know if this is what you are looking for. – Neli Chakarova Aug 12 '16 at 15:26

score 4 · Answer 2 · edited May 11 '17 at 22:37

4

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.

edited May 11 '17 at 22:37

Mark Amery

143,130
81
406
459

answered Oct 14 '15 at 03:00

Atul Chaudhary

3,698
1
31
51

score -1 · Answer 3 · answered Aug 03 '15 at 22:37

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 accomplish this by creating a form using html. It looks like example 2 here: http://developer.telerik.com/featured/getting-started-nativescript/ is more along the lines of what you're after.

Custom Dialog in NativeScript

3 Answers3