Dear Experts, 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();
}