I managed to follow example https://stcroppe.wixsite.com/steveonsoftware/example-code/wix-dataset-filtering-multiple-columns to clear multiples inside dropboxes, I am not a coder so i followed example exactly as it is and achieved desirable results. The problem is that i need to sort dropdown boxes results in alphabetical order. I just cant put my head around where to add trigger .sort() and .ascending() to. Please help. Sincerely, Paul
import wixData from 'wix-data';
import wixWindow from 'wix-window';
$w.onReady(function () {
});
// Javascript Class to manage dropdown data filtering
// When an object created from this class is given a dataset with the fields 'county', 'town', 'brand', 'title' and 'evcar'
// The object will generate unique column lists formatted to be passed directly to a $w.DropDown.options property.
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.countys = [];
this.towns = [];
this.brands = [];
this.titles = [];
this.evcars = [];
}
// Returns a unique list based on the values in the countys column
// The list contains objects with key value pairs for the keys 'label' and 'value'
countysList() {
if (this.countys.length === 0) {
// We haven't initialised countyList yet yet so set it up
this.countys = this.uniqueColumnListForField('county');
}
return this.countys;
}
// Returns a unique list based on the values in the town column
// The list contains objects with key value pairs for the keys 'label' and 'value'
townsList() {
if (this.towns.length === 0) {
// We haven't initialised townList yet yet so set it up
this.towns = this.uniqueColumnListForField('town');
}
return this.towns;
}
// Returns a unique list based on the values in the brand column
// The list contains objects with key value pairs for the keys 'label' and 'value'
brandsList() {
if (this.brands.length === 0) {
// We haven't initialised brandList yet so set it up
this.brands = this.uniqueColumnListForField('brand');
}
return this.brands;
}
titlesList() {
if (this.titles.length === 0) {
// We haven't initialised titleList yet so set it up
this.titles = this.uniqueColumnListForField('title');
}
return this.titles;
}
evcarsList() {
if (this.evcars.length === 0) {
// We haven't initialised evcarList yet so set it up
this.evcars = this.uniqueColumnListForField('evcar');
}
return this.evcars;
}
// Helper method for extracting column records and making them unique
// All list methods use this to generate list containing objects with
// key value pairs for the keys 'label' and 'value' which is expected
//by the $w.DropDown.options property
uniqueColumnListForField(field) {
let result = [];
let uniqueValues = []; // Used to ensure values in the list are unique
this.list.forEach(item => {
let fieldValue = item[field];
// Only store field values that we haven't yet seen. Skip null values
if (fieldValue && !uniqueValues.includes(fieldValue)) {
uniqueValues.push(fieldValue); // Remember this value to maintain uniqueness
// Save the resulting information in the format required by the DropDown options list.
result.push({ 'label': fieldValue, 'value': fieldValue });
}
});
return result;
}
}
let dropDownRecords = new dropDownData();
$w.onReady(function () {
//We initialise the drop downs here once the data we need is available.
$w('#dataset1').onReady(() => {
updateDropDownOptions();
});
});
// We update the drop down lists from the currently filtered dataset.
// The data set is filtered by values from the drop down lists
function updateDropDownOptions() {
// Use getItems to load all items available from the filtered dataset
// When we apply a filter (see updateRepeaterFilter()) this gets called to reload the drop downs
$w('#dataset1').getItems(0, $w('#dataset1').getTotalCount())
.then((results) => {
// Update our dropdown object with the new data record list
dropDownRecords.updateRecordList(results.items);
// Load/Reload dropdown data sets from our dropdown list data object
$w('#countyList').options = dropDownRecords.countysList();
$w('#townList').options = dropDownRecords.townsList();
$w('#brandList').options = dropDownRecords.brandsList();
$w('#titleList').options = dropDownRecords.titlesList();
});
}
// Function to filter dataset based upon the filter drop down values
function updateRepeaterFilter() {
// Empty filter will remove existing filters so if none of the dropdowns have values all
// Table records will be available to the repeater.
let repeaterFilter = wixData.filter();
// If we have any filter values we simply join them together using .eq()
if ($w('#countyList').value) {
repeaterFilter = repeaterFilter.eq('county', $w('#countyList').value);
}
if ($w('#townList').value) {
repeaterFilter = repeaterFilter.eq('town', $w('#townList').value);
}
if ($w('#brandList').value) {
repeaterFilter = repeaterFilter.eq('brand', $w('#brandList').value);
}
if ($w('#titleList').value) {
repeaterFilter = repeaterFilter.eq('title', $w('#titleList').value);
}
// Update the filter on the dataset
$w('#dataset1').setFilter(repeaterFilter)
.then(() => {
// When we get here the dataset will be filtered so we need to reset the drop downs from the
// newly filtered record list
updateDropDownOptions();
});
}
// Helper functions triggered when we make a filter list selection in a drop down
export function countyList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w('#townList').enable();
}
export function townList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w('#brandList').enable();
}
export function brandList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w('#titleList').enable();
}
export function titleList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w('#input1').show();
$w('#input2').enable();
$w('#input3').enable();
$w('#input4').enable();
}
export function input4_change(event) {
$w('#radioMain').enable();
}
// Because the filter for the repeater uses multiple fields and these result in restricting the dropdown
// Option lists we need to reset the drop down lists to undefined to get all of the options back and
// repopulate the repeater.
// We could have a reset option as a button next to each drop down or add a drop down option of reset but this
// works for the purposes of this example
export function resetButton_click(event, $w) {
// Reset the filter list undefined forces the dropdown placeholder text to be displayed.
$w('#textBox1').value = undefined;
$w("#textBox1").resetValidityIndication();
$w('#countyList').selectedIndex = undefined;
$w("#countyList").resetValidityIndication();
$w('#townList').selectedIndex = undefined;
$w("#townList").resetValidityIndication();
$w('#townList').disable();
$w('#brandList').selectedIndex = undefined;
$w("#brandList").resetValidityIndication();
$w('#brandList').disable();
$w('#titleList').selectedIndex = undefined;
$w("#titleList").resetValidityIndication();
$w('#titleList').disable();
$w('#input1').value = undefined;
$w('#input1').hide();
$w('#input2').disable();
$w('#input2').value = undefined;
$w('#input2').resetValidityIndication();
$w('#input3').disable();
$w('#input3').value = undefined;
$w('#input3').resetValidityIndication();
$w('#input4').disable();
$w('#input4').value = undefined;
$w('#input4').resetValidityIndication();
$w('#radioMain').disable();
$w('#radioMain').value = undefined;
$w('#radioMain').resetValidityIndication();
$w('#radioInternal').disable();
$w('#radioInternal').value = undefined;
$w('#radioInternal').resetValidityIndication();
// With no drop down values selected the repeater filter will be cleared and all repeater items
// will be displayed
updateRepeaterFilter();
}
. I tried to explain it in my example as best as i could on a live example.