DataForm: How to hide certain properties in the Dataform

7 posts, 0 answers
  1. Prem
    Prem avatar
    3 posts
    Member since:
    Feb 2017

    Posted 21 Feb Link to this post

    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

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 22 Feb Link to this post

    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, "john@company.com", "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, tns-core-modules versions). It Will also help if you could provide sample project, which could be debugged locally.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Prem
    Prem avatar
    3 posts
    Member since:
    Feb 2017

    Posted 22 Feb in reply to nikolay.tsonev Link to this post

    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

  4. Prem
    Prem avatar
    3 posts
    Member since:
    Feb 2017

    Posted 22 Feb in reply to Prem Link to this post

    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
  5. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 23 Feb Link to this post

    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 tgz file, which has been used in the project. You could verify, whether you will have the same behavior, while using the nativescript-telerik-ui-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 npm cache with npm cache clear and remove the app from the device or simulator. Then try to rebuild the app with tns run ios.

    Hope this helps.

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  6. Robert
    Robert avatar
    8 posts
    Member since:
    Jun 2017

    Posted 08 Jul in reply to nikolay.tsonev Link to this post

    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>
  7. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 10 Jul Link to this post

    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 nativescript-ui-samples-angular app, in regard to that please verify, whether you use the latest version on NativeScript and nativescript-telerik-ui.


    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top