Dataform values provider with array of custom objects

[yalva]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum?

Yes/No I've posted the issue on the forum 5 days ago, it has 25 views with no responses, so decide to log here.

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Dataform values provider with array of custom objects not working as expected.

Dataform values provider with array of custom objects not working as expected

I’ve “Picker” type entity on dataform with values provider as below

get provinceProvider(){ if(!this._provinceProvider){ this._provinceProvider = { key: “id”, label: “name”, items:[{ “id”: “2”, “name”: “The Eastern Cape” }, { “id”: “3”, “name”: “The Free State” }, { “id”: “4”, “name”: “Gauteng” }, { “id”: “5”, “name”: “KwaZulu-Natal” }, { “id”: “6”, “name”: “Limpopo” }, { “id”: “7”, “name”: “Mpumalanga” }, { “id”: “8”, “name”: “The Northern Cape” }, { “id”: “9”, “name”: “North West” }, { “id”: “10”, “name”: “The Western Cape” }] }; } return this._provinceProvider; }

Labels are correctly getting displayed, but when I pick an item underlying source property “provinceId” is getting assigned the “label” instead of the “id”, below is the value of provinceId printed to console during dfPropertyCommitted.

I"m expecting the value of “4” to be assigned to “provinceId” but "Guateng" got assigned to it.

Which platform(s) does your issue occur on?

iOS/Android/Both (if applicable tell us the specific version of the platform) I'm only using Android at the moment.

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: (the version of nativescript-telerik-ui/-pro in the package.json) "nativescript-ui-dataform": "^3.6.0",
• CLI: (run tns --version to fetch it) 4.0.1
• Cross-platform modules: (the version of tns-core-modules in the package.json) "tns-core-modules": "^4.0.0"
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json) "tns-android": { "version": "4.0.1" }

Please tell us how to recreate the issue in as much detail as possible.

Create a page with Dataform Add an entity with "picker" type to the form Assign a valuesprovider to the "Picker" entity with Array of custom objects as explained in problem statement above. Run the application and select a item from picker, id of the selected item is supposed to be assigned to the entity of source object, but label text is getting assigned to the entity.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

I've added to problem statement. (You can paste entire code snippets or attach a runnable project)

[tsonevn]

Hi @yalva, I tested this case while using the attached JSON object and the example provided by nativescript-ui-samples , however, I was unable to recreate the problem. Regarding that, could you send us sample project, which could be used for debugging?

[yalva]

Hi @tsonevn I've created a play project and you can see the issue my running the project, you can see the log where it prints province name instead of id with this code console.log("onPropertyCommitted: " + args.propertyName + " " + property.value);

Project link https://play.nativescript.org/?template=play-tsc&id=mVnzFm&v=9

[tsonevn]

Hi @yalva, Thank you for the sample project. I tested it on my side, and I was able to recreate the issue for Android. You can keep track on the issue for further info.

[yalva]

I may have understood wrongly, actual object property itself getting assigned with "id", but the property.value in PropertyCommitted event is getting assigned with the "Label"

export function dfPropertyCommitted(args) { var property = args.entityProperty; console.log("onPropertyCommitted: " + args.propertyName + " " + property.value); console.log("Source object property value: " + page.bindingContext.person.provinceId);
}

above function printed this

[Lenovo TAB3 7 Essential]: onPropertyCommitted: provinceId The Eastern Cape [Lenovo TAB3 7 Essential]: Source object property value: 2

[yalva]

Hi @tsonevn

I think I've further narrowed the issue down to page events,

if I initialise view model in navigatingTo event its not working, but if its initialised in loaded or navigatedTo events it seems to work.

[yalva]

Another related error I'm facing is unable to set valuesProvider to array of custom objects in json metadata, it is working if I set it in xml

I've dynamically created source object and metadata objects

this is how I'm creating property annotation in a loop

let answerProvider = { key: "id", label: "answer", items: [ { "id": "1", "answer": "Yes" }, { "id": "2", "answer": "No" }, { "id": "3", "answer": "Don't Know" }] }

let propertyAnnotation = { name: "q"+ i editor : 'SegmentedEditor', valuesProvider: '{{answerProvider}}' // valuesProvider: this.answerProvder }; and this is the error: "Caused by: java.lang.ClassCastException: org.json.JSONObject cannot be cast to org.json.JSONArray"

Note that its working if I set the values provider is xml like valuesProvider="{{answerProvider}}".

This has become a stumbling block for me as I need to created dataform source at the run time.

[yalva]

Trying to use a converter and valuesProvider to work around this issue but if I set converter in json dataform is ignoring it.

[tsonevn]

Hi @yalva, It would be better if you open a new issue for every problem, which you are facing with the DataForm component. Thank you in advance for your cooperation. Regarding your case. can you check if you will reproduce the same scenario with the example here.

[tgpetrov]

Hi @yalva Last week we released a new version of nativescript-ui-dataform with some fixes in the value providers that I believe are related with your issue. Please check the 3.7.3 version and let me know if the issue persists. You can also have a look at this example, which covers a scenario with two Picker editors with related values. In the example we are logging the committed value in the console so you can confirm it is the id that is committed and not the label.

[mhmo91]

@tsonevn the issue is also happening on ios

[mhmo91]

that was working few months ago.. now i have to adjust my code back again to the new buggy behaviour.. in tons of components, frustrated!

[tgpetrov]

@mhmo91 Did you have a look at this example. It covers a scenario with two Picker editors with related values. In the console there are logs of the committed values so you can confirm it is the id that is committed and not the label. If you have a different setup, let us know how to reproduce the issue.

[mhmo91]

@tgpetrov i finally could see what's going on... i'm using Angular, and the desired behaviour is only happening if i initialized the valuesProvider in the same thread of the source model. for ex. assuming u are picking a player in a form this would not work because the model has been initialized in a later execution thread than the vaues provider array so the binding is going to work with the name not the key:

 ngOnInit(): void {
            this.players = [{key:0, name: 'John'},{key:1, name: 'Tommy'}]
            this.doSomething.subscribe((res) => {
                this.workerExpenseModel = new WorkerExpense();
            }, (error) => {
            });
    }

this will work:

 ngOnInit(): void {
            this.doSomething.subscribe((res) => {
                this.players = [{key:0, name: 'John'},{key:1, name: 'Tommy'}]
                this.workerExpenseModel = new WorkerExpense();
            }, (error) => {
            });
    }

FYI, i'm using "nativescript-ui-dataform": "^3.7.3",

[tgpetrov]

@mhmo91 I was able to reproduce the issue only on iOS. Here's what I did: 1) run this playground. 2) tap the button to load the form - on android correct value is loaded (UK), on iOS initial value is ignored (it shows Select Country, instead of UK) 3) select another country from the picker (committed value is printed in the console - on android the value is number (as expected), while on iOS the value is the country name)

We will soon release a new version of nativescript-ui-dataform with the fix.