DataForm : how to use key-value pair in valuesProvider ?

7 posts, 0 answers
  1. Michael
    Michael avatar
    7 posts
    Member since:
    Dec 2016

    Posted 07 Dec 2016 Link to this post

    Hello,

    I'm using DataForm module for Nativescript UI (with Angular), and I'm facing a serious problem of functionnality.

    Here is my template component code :

    <RadDataForm [source]="intervention" (propertyCommit)="dfPropertyCommit($event)"
     (propertyCommitted)="dfPropertyCommitted($event)" commitMode="Manual" validationMode="OnLostFocus" #myForm>
       <TKEntityProperty tkDataFormProperty name="city" displayName="City" index="0"
    valuesProvider="New York, Washington, Los Angeles">
          <TKPropertyEditor tkEntityPropertyEditor type="List"></TKPropertyEditor>
          <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
       </TKEntityProperty>
    </RadDataForm>

     

    And my component code :

    export class myComponent implements OnInit {
         private _intervention: Intervention;
     
        @ViewChild("myForm") myForm: any;
     
        constructor(private myService : InterventionService) {}
     
        ngOnInit() {
            this._intervention = new Intervention();
        }
     
        get intervention(): Intervention {
            return this._intervention;
        }
     
        save() {
            console.log(this.intervention.city)  // depend of choice, will return "New York", "Washington" or "Los Angeles"
            this.myService.save(this.intervention)
        }
    }

     

    In follow documentation of DataForm, I see that "valuesProvider" property of TKEntityProperty is (only ?) settable with array of string.

    Is there is a way to use inside "valuesProvider" an array of key-value pair data, instead of just an array of string ?

     

    Why I would like to do that ? Because this.myService.save() expect that this.intervention.city not return a string, but the key associated to the string value. 

    And what I want to show in my form is not the key value, but the string value ! (like any classic dropdown)

     

    Here is what I get from my datasource to fill the city list field : 

    [{key :  0, value : "New York"}, {key :  1, value : "Washington"}, {key :  2, value : "Los Angeles"}]

    (thoses values are getted dynamicly from an external datasource API)

     

    To summary, what I want is that if I select "Washington" in my list field, the value of this.intervention.city in my component will be "1"

     

    Thanks by advance

  2. Michael
    Michael avatar
    7 posts
    Member since:
    Dec 2016

    Posted 08 Dec 2016 Link to this post

    Anothers remarks :

    - There is not possibility to unselect a value inside a list (for Picker, List and SegmentedEditor type)

    - There is not possibility to pre-select a desired value inside a list (for Picker, List and SegmentedEditor type)

    - Picker and SegmentedEditor list type do not let choice to pre-select the first value list

     

    And also this forum seems empty and dead, there is still developers here ?

    Just one visit in one day...

  3. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    164 posts

    Posted 08 Dec 2016 Link to this post

    Hello,
    Thank you for your interest in UI for NativeScript and excuse us for the delay in replying.

    DataForm is currently new component for NativeScirpt UI and indeed it has some limitations. Regarding to the first message, valuesProvider expects to receive  array of values that are accepted as values for the editor associated with this property. This property affects only editors of type: Picker, List and SegmentedEditor and at the moment array of key-value pair data has been not supported. Excuse us for those component restrictions. You could also log new feature, where you could describe the needed feature here.

    To be able to get the selected value as a result instead of getting the index of the element, you could change the PropertyEditor type from List to Picker, which will provide the needed functionality.

    When you would like to provide ability to unselect a value for the Picker or List, you could add one empty string as a first value of the array. This component will take the first available value while loading the component.

    About the last point, for ability to choose pre-selected first values, you could create custom object, which contains properties with the same names as those of the EntityProperties and to attached it as a source of the DataForm component.

    For your convinience I am attaching sample code, where has been shown the above-described cases. For further help you could also review the sample app here.

    HTML

    <GridLayout rows="* 50 50">
        <RadDataForm row="0"  id="dataform" [source]="person" >
            <TKEntityProperty tkDataFormProperty name="name" displayName="Name" index="0">
                <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="age" displayName="age" index="1">
                <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
                <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="email" displayName="email" index="2">
                <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
                <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="city" displayName="city" index="3" [valuesProvider]="data" >
                <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
                <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="street" displayName="street" index="4">
                <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="streetNumber" displayName="Street Number" index="5">
                <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
                <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
            </TKEntityProperty>
        </RadDataForm>
        <Button row="1" text="Unselect picker" (tap)="unselect()"></Button>
         
        <Button row="2" text="submit" (tap)="tap()"></Button>
    </GridLayout>


    TypeScript

    import { Component, OnInit } from "@angular/core";
    import fs = require("file-system");
    import * as fileSystemModule from "file-system";
    import {RadDataForm, EntityProperty} from "nativescript-telerik-ui-pro/dataform";
    import {Page} from "ui/page";
    import {isAndroid} from "platform"
     
    @Component({
        moduleId: module.id,
        selector: "tk-dataform-properties-json",
        templateUrl: "dataform-properties-json.component.html"
    })
    export class DataformPropertiesJsonComponent implements OnInit {
        // private _personMetadata;
        private intervention = [{key :  0, value : "New York"}, {key :  1, value : "Washington"}, {key :  2, value : "Los Angeles"}];
        private _person: Person;
        public data:Array<string>=[];
     
     
        constructor(private page:Page) {
            this.data.push("");
        }
     
        ngOnInit() {
             
            var that =this;
            this.intervention.forEach(function(element){
                that.data.push(element.value);
            });
            var newPerson = new Person("John",
                                        23,
                                        "john@company.com",
                                        "",
                                        "5th Avenue",
                                        11);
            this.person=newPerson;
             
             
        }
     
        get person(): Person {
            return this._person;
        }
     
        set person(value: Person) {
            this._person = value;
        }
     
        tap(){
            var dataform:RadDataForm =<RadDataForm> this.page.getViewById("dataform");
            var entity:EntityProperty =<EntityProperty> dataform.getPropertyByName("city");
            console.log(JSON.stringify(dataform.editedObject));
     
            var entityProperty = dataform.getPropertyByName("city");
            if(isAndroid) {
                console.log(entityProperty.android.getValue());
            } else {
                console.log(entityProperty.ios.originalValue);
            }
             
        }
        unselect(){
            var ali
            var newPerson = new Person("John",
                                        23,
                                        "john@company.com",
                                        "",
                                        "5th Avenue",
                                        11);
            this.person=newPerson;
        }
    }
     
    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;
        }
    }



    You could also keep track on the new features updates and fixes in our Release notes section.  We also have dedicated "What's new" blog article which can be found here.

    Let me know, whether this help, or if I could assist you further.

    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.
  4. Michael
    Michael avatar
    7 posts
    Member since:
    Dec 2016

    Posted 08 Dec 2016 Link to this post

    Hello,

    Thanks for your response I was little bit impatient because my work requirements :)

    I understand for the miss functionnality of key-value pair inside a dropdown, we are all new to this crazy Angular 2 framework !
    I will post this feature in your recommanded link.

     

    I get it about empty selection and pre-selected value, I will use it and tell you if I have somes difficulty.

    Just one last remark : there is a possibility to make multiple selections inside editor of type List, Picker or SegmentedEditor ?


    Thanks for all 

  5. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    164 posts

    Posted 09 Dec 2016 Link to this post

    Hello Michael,

    DataForm component supports several Editors type, which could be find here, however multiple selection  is not part of them. As a workaround you could set columnIndex to those EntityProperty, which you would like to be on the same row. To do that you should use DataFormGridLayout and the EntityProperties to be on the same row.  For further help you could review the below-attached example.

    HTML

    <RadDataForm tkExampleTitle tkToggleNavButton [source]="person" row="1">
        <TKPropertyGroup tkDataFormGroups collapsible="true" name="Main Info" hidden="false">
            <TKDataFormGridLayout tkPropertyGroupLayout></TKDataFormGridLayout>
     
            <TKEntityProperty tkPropertyGroupProperties name="name" index="0" columnIndex="0" [valuesProvider]="names">
                <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="name2" index="0" columnIndex="1" [valuesProvider]="names2">
                <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="email" index="1" columnIndex="0">
                <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
            </TKEntityProperty>
        </TKPropertyGroup>
     
         
        <TKPropertyGroup tkDataFormGroups collapsible="true" name="Address" hidden="false">
     
            <TKDataFormGridLayout tkPropertyGroupLayout></TKDataFormGridLayout>
     
            <TKEntityProperty tkPropertyGroupProperties name="city" index="0" columnIndex="0">
                <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="country" index="0" columnIndex="1">
                <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="street" index="1" columnIndex="0">
                <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="streetNumber" index="1" columnIndex="1">
                <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
            </TKEntityProperty>
        </TKPropertyGroup>
        <TKPropertyGroup tkDataFormGroups collapsible="true" name="Bank Info" hidden="false">
            <TKDataFormGridLayout tkPropertyGroupLayout></TKDataFormGridLayout>
     
            <TKEntityProperty tkPropertyGroupProperties name="bankName" index="0" columnIndex="0">
                <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="bankId" index="1" columnIndex="0">
                <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="bankVerificationCode" index="0" columnIndex="1">
                <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkPropertyGroupProperties name="bankExpirationDate" index="1" columnIndex="1">
                <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
            </TKEntityProperty>
        </TKPropertyGroup>
    </RadDataForm>
    TypeScript

    import { Component, OnInit } from "@angular/core";
     
    @Component({
        moduleId: module.id,
        selector: "tk-dataform-grid-layout",
        templateUrl: "dataform-grid-layout.component.html"
    })
    export class DataformGridLayoutComponent implements OnInit {
    private _person: PersonExtended;
        public names=["John", "Sophia", "Emma", "Peter", "Olivia"];
        public names2=["John", "Sophia", "Emma", "Peter", "Olivia"];
     
        constructor() {
        }
     
        ngOnInit() {
            this._person = new PersonExtended("John", "Peter", "john@company.com", "New York", "5th Avenue", 25, "USA", "Bank of America", "00xx00xx00", 123, "2016-11-09");
        }
     
        get person(): PersonExtended {
            return this._person;
        }
    }
     
     
    export class PersonExtended {
        public name: string;
        public name2: string;
        public email: string;
        public city: string;
        public street: string;
        public streetNumber: number;
        public country: string;
        public bankName: string;
        public bankId: string;
        public bankVerificationCode: number;
        public bankExpirationDate: string;
     
        constructor(name: string, name2: string, email: string, city: string, street: string, streetNumber: number, country: string, bankName: string, bankId: string, bankVerificationCode: number, bankExpirationDate: string) {
            this.name = name;
            this.name2 = name2;
            this.email = email;
            this.city = city;
            this.street = street;
            this.streetNumber = streetNumber;
            this.country = country;
            this.bankName = bankName;
            this.bankId = bankId;
            this.bankVerificationCode = bankVerificationCode;
            this.bankExpirationDate = bankExpirationDate;
        }
    }

    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. Michael
    Michael avatar
    7 posts
    Member since:
    Dec 2016

    Posted 12 Dec 2016 Link to this post

    Thanks for your multiple selection workaround, I will try it !

     

    I'm little bit worried about the feature I've create in nativescript ui feedback  :

    Feature link

     

    Nobody seems to read it, 0 response...

    Maybe I use the wrong words to be listened ? Can you give me some advices to be considered ?

     

    Thanks for all

  7. Petya
    Admin
    Petya avatar
    983 posts

    Posted 14 Dec 2016 Link to this post

    Hello Michael,

    We verified the suggested functionality and it is planned for the next nativescript-telerik-ui-pro release. You can expect that in early 2017, though I cannot give an exact date.

    Regarding your concerns that you're not receiving a response in the repository, it's actually intended for users that need means to track the status of a verified issue or a particular feature request. Most of the issues that land there are a result of a forum thread in this community or a private support ticket with us.

    Here are some guidelines that I hope will help you figure the proper channel when you have questions:
    - If you would like to request a new feature, the best place would be the nativescript-ui-feedback repository. The Product Manager and development team responsible for this product monitor the repository regularly, though we don't answer questions there. I will also make sure the ReadMe in the feedback repository is updated to avoid future misunderstanding.
    - If you've encountered an issue and a component is not behaving according to the official docs, the feedback repository is one of your options. Make sure to include clear steps to reproduce the problem as well.
    - If you are in need of assistance, have an issue for which you are searching a workaround or just need some guidance on the usage of the components, you can use this forum. Our team tries to follow the forums closely and we also encourage other users to participate, so you will almost always receive a response within a couple of days.
    - As an alternative, depending on whether your license includes support, you can open a new support ticket with us and we are going to reply within 24 hours of its creation.

    Regards,
    Petya
    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.
Back to Top