[Feature request] DataForm: define JSON valuesProvider for picker within JSON metadata

[felixkrautschuk]

According to the docs, defining a JSON valuesProvider for a picker editor is only possible in XML with JavaScript code-behind.

It would be nice, if we were able to do this from JSON metadata as well, like this:

...
{
       "index": 3,
       "name": "city",
       "displayName": "Choose your city",
       "editor": "Picker",
       "valuesProvider": [
             { key: 0, label: "n/a" },
             { key: 1000, label: "Dresden" },
             { key: 2000, label: "London" },
             { key: 3000, label: "Stockholm" },
             { key: 4000, label: "Vienna" }
       ]
}
...

Right now, only "A comma-separated list with values that are acceptable for values of the editor of this property" is allowed.

[tsonevn]

Hi @felix-idf, This scenario seems to be supported and you could define valuesProvider inside a JSON object as it shown here and the data should be loaded as expected in the DataForm. You could Review the example here, where this scenario is demonstrated and the metadata info has been loaded from JSON object.

Let me know if I am missing something or if your scenario is different.

[felixkrautschuk]

Hi @tsonevn , yes, it is possible to define a simple valuesProvider in JSON metadata for the DataForm, but not a JSON-valuesProvider with key-value pairs, like I showed in my first post. The sample [here](https://github.com/telerik/nativescript-ui-samples/blob/release/sdk/app/dataform/view-models/person-metadata.json#L29 shows just a simple array as valuesProvider, but we want to use this within JSON metadata. Unfortunately, the result is:

[tsonevn]

Hi @felix-idf, Indeed the key-value pairs are not supported while defining metadata via JSON object. Regarding that, I am changing the label of the issue to feature.

[glen-stephens]

I vote heavily for this!

[carlosdelfino]

Plase, Other option is use Enum from Typescript, and {{}} notation.

[wfe8006]

I am facing the same issue too (with Vue Nativescript), is there a workaround for this?

[odparraj]

a temporary solution is to establish valuesProvider in load form event and not in json metadata, so json metadata defines the structure of the form and we avoid defining all xml

[odparraj]

@ViewChild('radDataForm') radDataForm: RadDataFormComponent;

...

<RadDataForm (loaded)="addOptions()" #radDataForm [source]="form" [metadata]="formMetadata"> ... { "name": "city", "displayName": "City", "editor": "Picker" } ...

addOptions(){ console.log('Adding data ...'); let property= this.radDataForm.dataForm.getPropertyByName('city'); property.valuesProvider= [ { key: 1121, label: "Shanghai" }, { key: 3651, label: "Lagos" }, { key: 5213, label: "Moscow" }, { key: 6214, label: "São Paulo" }, { key: 6985, label: "Sydney" } ]; }

[wfe8006]

Found another one tha loads the JSON data from external source: https://github.com/msaelices/ns-ui-vue-demo/blob/master/app/views/DataForm.vue

But still it would be nice to support it natively.

[pourquoi]

thanks @odparraj, my vuejs workaround version:

<RadDataForm ref="form" @loaded="onFormLoaded" :source="source" :metadata="metadata" />
...

export default {
    data() {
        return {
            source: {
                city: 834,
                address: ''
            },
            metadata: {
                isReadOnly: false,
                commitMode: "Immediate",
                validationMode: "Immediate",
                propertyAnnotations: [
                    {
                        name: 'city',
                        displayName: 'City',
                        index: 0,
                        editor: 'Picker',
                        _choices: [
                            { id: 123, name: 'Shanghai' },
                            { id: 12313, label: 'Lagos' },
                            { id: 834, label: 'Moscow' }
                        ]
                    },
                    {
                        name: 'address',
                        index: 1,
                        editor: 'Text'
                    }
                ]
            }
        };
    },
    methods: {
        onFormLoaded() {
            this.metadata.propertyAnnotations.forEach(a => {
                if (!a._choices) return
                let property = this.$refs.form.$el.nativeView.getPropertyByName(a.name);
                property.valuesProvider = a._choices.map(c => {
                    return { key: c.id, label: c.name }
                })
            })
        }
    }
}