NativeScript & Vue.JS

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

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)

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