RadDataForm: Provide the Source

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 business object.

Create the Source Object

In order to use RadDataForm to edit an object, we need to have the object that we will edit. In this example, we will create a class Person, pass an instance of this class to RadDataForm and then we will be able to edit the person's properties. First, let's create a file named person-model.ts with the following content:

Example 1: Declare the object that we will use as a source for RadDataForm

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;
    }
}

Add RadDataForm to the Page

Now we can add RadDataForm in an XML file. First, we define the following namespace:

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

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

Then we can add a RadDataForm instance to the page.

Example 2: Add RadDataForm to a page

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

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


</navigation:ExamplePage>

Note the data binding of the source property of RadDataForm to the person property of the context of the page. In order to provide that context, we will use the pageLoaded event as follows:

Example 3: Define the BindingContext

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

If you run the application now, you should see the default editor for each property of the provided source object.

Figure 1: The basic RadDataForm on Android (left) and iOS (right)

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

Our next step is to adjust the editors that are used for each of the source object's properties. Here's how.

References

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

Related articles you might find useful: