How to change field display order using radDataForm with JSON source - json

Question

Using Vue.js / NativeScript (radDataForm) I want to reorder the display of the fields when using JSON as a source. My current code works, but the display is:
Album Name
Band Name
Owned
Year
Borrowed
Which is not the order in the code.
I'm aware of this:
<df:EntityProperty name="albumName" displayName="Name of Album" index="0" />
but, how do I add index="0"to my JSON object?
Also - I don't know what this does?
str: "",
bool: false
Sample Code:
<template>
<Page class="page">
<ActionBar title="JSON example" class="action-bar" />
<RadDataForm :source="album" />
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
album: {
bandName: "Beatles",
albumName: "Seargent Peppers",
year: "2017",
owned: true,
borrowed: true
},
str: "",
bool: false
};
}
};
</script>
iPhone Screenshot:

Answer 1

I don't think you could control index from source but you can do that using metadata.
Example
<template>
<Page class="page">
<ActionBar title="JSON example" class="action-bar" />
<RadDataForm :source="album" :metadata="metadata" />
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
album: {
bandName: "Beatles",
albumName: "Seargent Peppers",
year: "2017",
owned: true,
borrowed: true
},
metadata: {
"isReadOnly": false,
"propertyAnnotations":
[
{
"name": "bandName",
"index": 0
},
{
"name": "albumName",
"index": 1
},
{
"name": "year",
"index": 2
},
{
"name": "owned",
"index": 4
},
{
"name": "myRating",
"index": 3
}
]
}
};
}
};
</script>