How to make filterTriggers and filter options work?

[dhiraj]

I want to set up a chain of ASFDS drop downs and I'm not being able to figure out how to wire it up, all together.

My model on the $scope is called item. I've got an ASF form with ASFDS drop downs, the idea is that we will have chaining drop downs - when one is selected the next one will filter to match.

Take for example, this schema

{
        type: "object",
        properties: {
            ID: {type: "integer", readOnly: true, description: "Internal ID, display-only"},
            Name: {type: "string", minLength: 2, title: "Name", description: "Name or alias"},
            CityID: {type: "integer", title: 'City', description: "Postal Code belongs to this state"},
            StateID: {type: "integer", title: 'State', description: "City belongs to this state"},
            CountryID: {type: "integer", title: 'Country', description: "State belongs to this country"},
        }
    }

and this form:

form: [
        'ID',
        'Name',
        {
            'key': 'CountryID',
            'type': 'strapselect',
            'placeholder': 'Select country',
            'options': {
                'asyncCallback': 'promiseMasterDataForEntity',
                'entity': 'Country',
                'fields': ['ID', 'Name'],
                "map": {valueProperty: "ID", nameProperty: "Name"}
            }
        },
        {
            'key': 'StateID',
            'type': 'strapselect',
            'placeholder': 'Select state',
            'options': {
                'asyncCallback': 'promiseMasterDataForEntity',
                'entity': 'State',
                'fields': ['ID', 'Name', 'CountryID'],
                "map": {valueProperty: "ID", nameProperty: "Name"}
            }
        },
        {
            'key': 'CityID',
            'type': 'strapselect',
            'placeholder': 'Select city',
            'options': {
                'asyncCallback': 'promiseMasterDataForEntity',
                'entity': 'City',
                'fields': ['ID', 'Name', 'StateID'],
                "map": {valueProperty: "ID", nameProperty: "Name"}
            }
        },
      {
            name: 'SAVE', control: {
            type: "submit",
            title: "Save"
        }
    ]

When the user changes country, state should be filtered. When the user changes state, city should be filtered. I've got all three ASFDSs showing all values, with asyncCallback fetches, all that works well. Problem is, how to do a change cascade filter?

I tried using the filter clauses, but could not get it to work. If you could provide more examples, of how to do this, or more details on the filter clauses, I would really appreciate it and make it work.

Thanks!

[nicklasb]

Hi,

It is pretty straightforward, it is just specifying what field triggers the filtering ("filterTriggers": ["items.CountryID"]) and what condition to apply ("filter" : "items.CountryID==item.CountryID").

I would recommend looking at the example: https://github.com/OptimalBPM/angular-schema-form-dynamic-select/blob/master/app.js#L186

Also, the help section on the filtering is helpful(although I just saw an error there, "items" should be "titleMap"): https://github.com/OptimalBPM/angular-schema-form-dynamic-select#filters

[nicklasb]

Oh, I saw that your model is called "item", thought it was "items". That is a problem, as that conflicts with the local "item"-variable in the condition. I would advice you to rename the model to "model" or something else. This is not just for the sake of ASDFS, but because the name "item" doesn't say much about it and that it is usually what it is called in the ASF-documentation. (If in doubt, do as everyone else)

[dhiraj]

It looks like changing the model name seems to have helped! :)

I'm looking deeper, but I was able to get Country->State filtering working, thanks!

[dhiraj]

I've got it mostly working, but there is a problem with 3rd (and further levels) of nested ASFDS controls.

In the same Country->State->City scenario, I've got all 3 working in the normal case using == matching on IDs.

Problem: Suppose the user sets Country, State and City once. Then, when Country is set again, State should get filtered by Country and become unset; this happens, and then City should get filtered by State == undefined (this does not happen). City continues to show the value selected within the State from the earlier State setting, before the user set the Country.

This can lead to an incorrect value being submit to the backend Server, when like in my case only City is submit and the Country and State values are discarded.

Thoughts?

[nicklasb]

I don't know why City doesn't react when State is being unset. I can't debug your application, but a breakpoint in the select filter should be able to let you find out where the problem arises: https://github.com/OptimalBPM/angular-schema-form-dynamic-select/blob/master/src/angular-schema-form-dynamic-select.js#L367

[nicklasb]

Have you gotten anywhere with this?

[dhiraj]

No, I couldn't put more time on this, until now. I will probably revisit this after about 3 weeks, will update. In the meantime, you can close this issue right now.