DataForm: How to hide certain properties in the Dataform

[Prem]

How to hide certain properties from my Model to not show up in the Dataform.

I tried this got a segfault :(

` <TKEntityProperty tkDataFormProperty name="id" displayName="ID" index="0" hidden="true">`

Cheers

Prem

[Nikolay Tsonev]

Hi,
Thank you for your interest in UI for NativeScript.

I reviewed your case, however, was unable to reproduce the issue with EntityProperty hidden property.
For your convenience, I am attaching sample code and GIF.

HTML

<GridLayout rows="auto *" columns="">
    <Button row="0" text="Hide Entity" (tap)="onTap()"></Button>

    <RadDataForm row="1" #myRuntimeDataFormComp tkExampleTitle tkToggleNavButton [source]="person" row="1">
    <!-- >> angular-dataform-groups-html -->
    <TKPropertyGroup tkDataFormGroups collapsible="true" name="Main Info" hidden="false">
        <TKEntityProperty tkPropertyGroupProperties [hidden]="state" name="name">
            <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkPropertyGroupProperties name="age">
            <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkPropertyGroupProperties name="email">
            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
    </TKPropertyGroup>
    <!-- << angular-dataform-groups-html -->
    <TKPropertyGroup tkDataFormGroups collapsible="true" name="Address" hidden="false">
        <TKEntityProperty tkPropertyGroupProperties name="city">
            <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkPropertyGroupProperties name="street">
            <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkPropertyGroupProperties name="streetNumber">
            <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
        </TKEntityProperty>
    </TKPropertyGroup>
</RadDataForm>
</GridLayout>

TypeScript

import { Component, OnInit } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "tk-dataform-groups",
    templateUrl: "dataform-groups.component.html"
})
export class DataFormGroupsComponent implements OnInit {
private _person: Person;
    public state=false;
    constructor() {
    }

    ngOnInit() {
        this._person = new Person("John", 23, "[e-mail]", "New York", "5th Avenue", 11);
    }

    get person(): Person {
        return this._person;
    }
    onTap(){
        this.state=true;
    }
}

class Person {
    public name: string;
    public age: number;
    public email: string;
    public city: string;
    public street: string;
    public streetNumber: number;

    constructor(name: string, age: number, email: string, city: string, street: string, streetNumber: number) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.city = city;
        this.street = street;
        this.streetNumber = streetNumber;
    }
}

It would help if you could provide some more info about your problem and your environment(CLI, node, -core-modules versions). It Will also help if you could provide sample project, which could be debugged locally.
Regards,
nikolay.tsonev
Telerik by Progress

[Prem]

Cool - Thanks for the quick response @nikolay.tsonev.

I tried using Angular Data binding with the `hidden` property as suggested above and everything works as expected.

When I switch to using a static value like the following line, it results in a segfault.

` <TKEntityProperty tkDataFormProperty name="id" displayName="ID" index="0" hidden="true">`

 

Here are my deps:

"dependencies": {
    "@angular/common": "2.4.3",
    "@angular/compiler": "2.4.3",
    "@angular/core": "2.4.3",
    "@angular/forms": "2.4.3",
    "@angular/http": "2.4.3",
    "@angular/platform-browser": "2.4.3",
    "@angular/platform-browser-dynamic": "2.4.3",
    "@angular/router": "3.4.3",
    "angular2-uuid": "^1.1.1",
    "moment": "^2.17.1",
    "nativescript-angular": "1.4.0",
    "nativescript-barcodescanner": "^2.4.0",
    "nativescript-telerik-ui-pro": "file:nativescript-local-plugins/nativescript-ui-pro.tgz",
    "nativescript-theme-core": "~1.0.2",
    "ramda": "^0.23.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.0.1",
    "tns-core-modules": "2.5.0"
  },

 

I'm using CLI 2.5.1 on node 6.2.1

Cheers

Prem

[Prem]

Here's the relevant lines from the logs.

CONSOLE LOG file:///app/tns_modules/@angular/core/bundles/core.umd.js:111:20: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
1   0x10b4be7cb NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2   0x10bb931ee ffi_closure_unix64_inner
3   0x10bb93b22 ffi_closure_unix64
4   0x10ebca201 -[TKDataForm setDataSource:]
5   0x10bb9397d ffi_call_unix64
6   0x12dcb3e60
file:///app/tns_modules/nativescript-telerik-ui-pro/dataform/dataform.js:137:73: JS ERROR TypeError: undefined is not an object (evaluating 'entityProperty.editor.ios')
Feb 23 09:35:35 VIC018084M com.apple.CoreSimulator.SimDevice.8E12B096-9214-4EB1-BAEA-663A525EFAB1.launchd_sim[53444] (UIKitApplication:ms.pre.paper-bag[0xf30a][53695]): Service exited due to Segmentation fault: 11
Executing before-prepare hook from /Users/prem.pillai/work-space/personal/mobile/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /Users/prem.pillai/work-space/personal/mobile/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /Users/prem.pillai/work-space/personal/mobile/hooks/before-prepare/nativescript-dev-typescript.js

[Nikolay Tsonev]

Hi,
I tested your case again on my side while using a static value for the hidden property, however, I am still unable to reproduce te same behavior.

It could be related to the local  file, which has been used in the project. You could verify, whether you will have the same while using the ---pro available in NPM.
To do that you should just to change the file path with version 1.6.0. For example:

"dependencies": {
    "@angular/common": "2.4.3",
    "@angular/compiler": "2.4.3",
    "@angular/core": "2.4.3",
    "@angular/forms": "2.4.3",
    "@angular/http": "2.4.3",
    "@angular/platform-browser": "2.4.3",
    "@angular/platform-browser-dynamic": "2.4.3",
    "@angular/router": "3.4.3",
    "angular2-uuid": "^1.1.1",
    "moment": "^2.17.1",
    "nativescript-angular": "1.4.0",
    "nativescript-barcodescanner": "^2.4.0",
    "nativescript-telerik-ui-pro": "1.6.0",
    "nativescript-theme-core": "~1.0.2",
    "ramda": "^0.23.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.0.1",
    "tns-core-modules": "2.5.0"
  },

You should also delete node_modules, platforms and hooks folder, clear  cache with  cache clear and remove the app from the device or simulator. Then try to rebuild the app with run ios.

Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress

[Robert]

The segfault happens when I create the form from metadata. I get:

file:///app/tns_modules/nativescript-telerik-ui-pro/dataform/dataform.js:147:81: JS ERROR TypeError: undefined is not an object (evaluating 'entityProperty.editor.ios')

It looks like DataForm is trying to apply the ```hidden``` styling before the editor has been constructed. Since 'hidden' isn't one of the attributes you can apply with metadata, the only workaround I've found is to add an Editor in the html:

<TKEntityProperty tkPropertyGroupProperties [hidden]="state" name="name">
    <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
</TKEntityProperty>

[Nikolay Tsonev]

Hi Robert,
First of all, thank your interest in UI for NativeScript.
I tested this scenario while using the latest NativeScirpt 3.1.2 and UI for NativeScript 3.0.1 and creating DataForm via metadata seems to work as expected on my side. 

For testing, I used  app, in regard to that please verify, whether you use the latest version on NativeScript and --.


About the other issue with hiding the needed Editor. While using the metadata to generate the DataForm and would like to hide a specific field, you should setup ignore property as it is described in the docs instead of using hidden. For example:

{
  "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"]
    },
    {
      "name": "street",
      "displayName": "Street Name",
      "index": 4
    },
    {
      "name": "streetNumber",
      "displayName": "Street Number",
      "index": 5,
      "editor": "Number",
      "ignore":true
    }
  ]
}

Regards,
nikolay.tsonev
Progress Telerik