RadDataForm Provide the Source

This article will guide you through the process of adding a RadDataForm instance to a page in a {N} + Vue application and using it to edit the properties of a business object.

• Create the Source Object
• Add RadDataForm to the Page
• References

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.

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

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-dataform

Install the RadDataForm Vue plugin

Add this to the main Javascript or Typescript file, usually called main.js or main.ts:

import Vue from 'nativescript-vue';
import RadDataForm from 'nativescript-ui-dataform/vue';

Vue.use(RadDataForm);

Add RadDataForm to the Page

Before proceeding, make sure that the nativescript-ui-dataform/vue module is required inside your application. This module handles the registration of the custom directives and elements required by nativescript-vue.

After that simply add the RadDataForm tag to the HTML and set its source accordingly:

• Add RadDataForm to a page

Note the data binding of the source property of RadDataForm to the person property of our component.

• Define the property used for binding

See the following minimalist example:

const description = 'Getting Started';

export default {
  name: 'GettingStarted',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadDataForm :source="person">
    </RadDataForm>
  </Page>
  `,
  data () {
    return {
      title: description,
      person: {
        name: 'John',
        age: 23,
        email: 'john@company.com',
        city: 'New York',
        street: '5th Avenue',
        streetNumber: 11,
      }
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  }
};

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)