RadDataForm: Getting Started

This article will guide you through the process of adding a RadDataForm instance to a page in a {N} application and using it to edit the properties of a data item like this:

NativeScriptUI-DataForm-Getting-Started-Android NativeScriptUI-DataForm-Getting-Started-iOS

Adding a DataForm to your page

First thing you need to do in order to use the DataForm in an XML file is to define the following namespace:

xmlns:df="nativescript-telerik-ui-pro/dataform"

Before adding RadDataForm for NativeScript, make sure you have installed Progress NativeScript UI Pro.

Here's how to add a RadDataForm instance to your page:

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded"
    xmlns:df="nativescript-telerik-ui-pro/dataform" xmlns="http://www.nativescript.org/tns.xsd">

    <df:RadDataForm id="myDataForm" source="{{ person }}" />


</navigation:ExamplePage>

Creating the view model

Now we need to create a view model with an object that we will edit through the dataform that we have just added. Let's create a file named person-model.ts with the following content:

import { Observable } from "tns-core-modules/data/observable";

export class PersonViewModel extends Observable {

    constructor() {
        super();
        this.person = new Person("John", 23, "john@company.com", "New York", "5th Avenue", 11);
    }

    set person(value: Person) {
        this.set("_person", value);
    }

    get person(): Person {
        return this.get("_person");
    }
}

export class Person {
    public name: string;
    public age: number;
    public email: string;
    public city: string;
    public street: string;
    public streetNumber: number;

    constructor(name, age, email, city, street, streetNumber) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.city = city;
        this.street = street;
        this.streetNumber = streetNumber;
    }
}

Now, to provide a binding context for the page, we can use the pageLoaded event and assign an instance of the view-model to the bindingContext property of the page as follows:

import viewModel = require("./../view-models/person-model");
export function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new viewModel.PersonViewModel();
}

Note that we have bound the source property to an instance of our DataItem. Now if you run the application, you should see the default editor for each property of the provided data item.

Adjusting the editors

Now that we have bound the dataform to an item from our view model, we may need to fine tune it for example to use editors which may be more appropriate for our scenario.
This can be done by declaring attributes for an EntityProperty in the xml file, through code or with a JSON file. This article demonstrates each of these methods.

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: