top of page

Forum Posts

Christopher Harris
Jul 29, 2020
In Coding with Velo
Site: https://charris505.editorx.io/shp3/portfolio I've been using the following tutorial to create multi-column filtering using a single dataset: https://stcroppe.wixsite.com/steveonsoftware/example-code/wix-dataset-filtering-multiple-columns The actual filtering functionality works just fine, but the #categoryDropdown and #stateDropdown return duplicate values and I can't for the life of me figure out what's wrong. Update: I'm hoping to better understand the fundamental error that is preventing the unique values from being passed to the dropdowns using the code below. Any help you can provide troubleshooting would be greatly appreciated! Connect dropdown list items = yes Connect a dataset = #portfolio Labels and values connect to: #stateDropdown = State (text), 'state' fieldkey #categoryDropdown = Category (text), 'category' fieldkey Full Code // Filtering functionality class dropDownData { constructor(recordList = []) { this.updateRecordList(recordList); } // Call this function to initialise the object data set and reset the column lists. updateRecordList(recordList) { this.list = recordList; this.resetFieldLists(); } resetFieldLists() { this.category = []; this.state = []; } // Returns a unique list based on the values in the category column. categoryList() { if (this.category.length === 0) { this.category = this.uniqueColumnListForField('category'); } return this.category; } // Returns a unique list based on the values in the state colum stateList() { if (this.state.length === 0) { this.state = this.uniqueColumnListForField('state'); } return this.state; } // Helper method for extracting column records and making them unique. All list methods use this to generate a list containing objects with key value pairs 'label' and 'value,' which is expected by the $w.Dropdown.options property uniqueColumnListForField(field) { let result = []; let uniqueValues = []; // Ensures values are unique this.list.forEach(item => { let fieldValue = item[field]; // Only stores field values that we haven't seen yet and skips null values if (fieldValue && !uniqueValues.includes(fieldValue)) { uniqueValues.push(fieldValue); result.push({'label':fieldValue, 'value':fieldValue}); } }); return result; } } let dropDownRecords = new dropDownData(); // Initialize the dropdown once the data is available. $w.onReady(function () { $w('#portfolio').onReady(() => { updateDropDownOptions(); }); }); // Update the dropdown lists from the currently filtered dataset. The data set is filtered by values from the dropdown lists. function updateDropDownOptions () { // Use getItems to load all items available from filtered dataset. When a filter is applied, (see updateGalleryFilter()) gets called to reload the dropdowns $w('#portfolio').getItems(0,$w('#portfolio').getTotalCount()) .then((results) => { // Update the dropdown object with the new data record list dropDownRecords.updateRecordlist(results.items); // Update the counter on the screen $w('#textResults').text = results.totalCount; // Load/Reload dropdown data sets from the dropdown list data object $w('#categoryDropdown').options = dropDownRecords.categoryList(); $w('#stateDropdown').options = dropDownRecords.stateList(); }); } // Function to filter dataset based upon the filter dropdown values function updateGalleryFilter() { // Empty filter will remove existing filters so if no dropdowns have values seelcted, then all table records will be available to the gallery. let galleryFilter = wixData.filter(); if ($w('#categoryDropdown').value) { galleryFilter = galleryFilter.eq('category', $w('#categoryDropdown').value); } if ($w('#stateDropdown').value) { galleryFilter = galleryFilter.eq('state', $w('#stateDropdown').value); } //Updates the filter on the dataset $w('#portfolio').setFilter(galleryFilter) .then(() => { // When we get here the dataset will be filtered so we need to reset the dropdowns from the newly filtered record lsit updateDropDownOptions(); }); } // Helper functions triggered when we make a filter list selection in a dropdown export function categoryDropdown_change (event) { updateGalleryFilter(); } export function stateDropdown_change(event) { updateGalleryFilter(); } export function resetButton_click(event) { $w("#categoryDropdown").selectedIndex = undefined; $w("#stateDropdown").selectedIndex = undefined; updateGalleryFilter(); }
0
2
196

Christopher Harris

More actions
bottom of page