Render UI form element based on other elements selected on the UI DataForm

nativescriptcore

#1

Hello, I have created a dataform page, using NativeScript- TypeScript, and xml. I am parsing a metadata file containing Json, to render a UI form. The form displays fields Name, Age, Email, City, Street Name, Street Number. The city field uses picker element, and shows four options NewYork, Washington, Los Angeles, Boston. Now, I want to make the form so that the Street Name, and Street Number should be only visible in the form if I select New York or Boston. As, I am using Json metadata to build a UI form, I don’t have much XML code. I am not getting an approach to this. Any help is appreciated!

Here is my XML

<Page.actionBar>
    <ActionBar title="Data-form" icon="" class="action-bar">
    </ActionBar>
</Page.actionBar>

<!-- >> dataform-metadata-xml -->
<df:RadDataForm id="myDataForm" source="{{ person }}" metadata="{{ metadata }}" />
<!-- << dataform-metadata-xml -->

Herei is my typescript file:

import viewModel = require("./person-model");
import dataFormModule = require(“nativescript-ui-dataform”);
import {EventData, Observable} from “data/observable”;
import {Page} from “ui/page”;

var dataform;

export function onPageLoaded(args) {
var page = args.object;
page.bindingContext = new viewModel.PersonModel();
dataform = page.getViewById(“myDataForm”);
}

This is the json, I am using:

{
“isReadOnly”: false,
“commitMode”: “Immediate”,
“validationMode”: “Immediate”,
“propertyAnnotations”:
[
{
“name”: “name”,
“displayName”: “Name”,
“index”: 0
},
{
“name”: “age”,
“displayName”: “Age”,
“index”: 1,
“editor”: “Number”
},
{
“name”: “email”,
“displayName”: “E-Mail”,
“index”: 2,
“editor”: “Email”
},
{
“name”: “city”,
“displayName”: “City”,
“index”: 3,
“editor”: “Picker”,
“valuesProvider”: [“New York”, “Washington”, “Los Angeles”],
“tap”: “onTap”
},
{
“name”: “street”,
“displayName”: “Street Name”,
“index”: 4,
“hidden”: “true”
},
{
“name”: “streetNumber”,
“displayName”: “Street Number”,
“index”: 5,
“editor”: “Number”
}
]
}


How to set data with binding into child array
#2

you can use PropertyCommitted event of dataform, when city field changed you can set hidden=false on other two false.

export function dfPropertyCommitted(args) {
let property = args.entityProperty;
if (args.propertyName == ‘city’) {
}