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: '[email protected]',
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)