How to Implement a Multiple Filtered Dropdown in Frappe Listview?

Frappe Framework
1

Hello everyone,

I’m currently working on a project where I have two list views: one for a parent document and another for its child document. In the parent list view, I have one field, which I’ve implemented using a select field.

For the child list view, I want to incorporate a dropdown that isn’t tied to any specific field but rather filters based on multiple fields once a selection is made. so selection 1 could be filtering based on field 1 and field 2, and then selection 2 could be field 2 and field 4.

The code below shows what I got if I were to use a child with a fieldname which I added as temporary, and basically just added additional filter that will be pushed and added. But the code only will filter based on the parent and child, and the additional filters are ignored.

Could anyone guide me on how to achieve this? Specifically, I’d like to know how to implement a dropdown in Frappe that filters based on multiple fields upon selection.

Thank you in advance for your help!

listview.page.add_field({
            fieldname: 'field 1',
            label: __('Parent'),
            fieldtype: 'Select',
            options: [
                {"label": "option 1", "value": '1'},
                {"label": "option 2", "value": '2'},
                {"label": "option 3", "value": '3'}
            ],
            change: function () {

                var childOptions = [
                    {"label": "child option 1", "value": '1'},
                    {"label": "child option 2", "value": '2'},
                    {"label": "child option 3", "value": '3'},
                    {"label": "child option 4", "value": '4'}
                ];
                
                // empty and repopulate child dropdown
                if (listview.page.fields_dict.child_dropdown) {
                    var childDropdown = listview.page.fields_dict.child_dropdown;
                    childDropdown.df.options = childOptions;
                    childDropdown.refresh();
                }

                listview.refresh();
            },
        });

        listview.page.add_field({
            fieldname: 'child_dropdown',
            label: __('Child'),
            fieldtype: 'Select',
            change: function() {

                var childValue = listview.page.fields_dict.child_dropdown.get_value();
                var currentFilters = listview.filter_area.filter_list.filters;
                var additionalFilter = [];

                if (childValue) {    
                    if (childValue === '1') {
                        additionalFilter.push([adding more filters]);
                    } else if (childValue === '2') {
                       additionalFilter.push([adding more filters]);
                    } else if (childValue === '3') {  
                        additionalFilter.push([adding more filters]);
                    } else if (childValue === '4') {
                        additionalFilter.push([adding more filters]);
                    }
                }
                
                currentFilters.push(additionalFilter);
                listview.filter_area.filter_list.add_filter(currentFilters);
                listview.refresh();
            }
        });
    }`

> Blockquote