Hi All
I have a table linked to a collection and I have filter options to filter the table by various fields.
I have used Velo to populate
Min and Max Lumens boxes next to the Lumens sliders.
CCT & Beam has has the list of available options from the CCt(k) column % Beam angle columns.
This works well when it works. But it does not work on all records, below are 4 pages.
The first 2 work but the second 2 don't.
The Lumen, CCT and beam boxes don't populate and if I try to filter in any way all the data disappears.
I have through the data and there does not seam to be pattern to which work and which don't.
I am a bit of a noob so any help would be greatly appreciated as this is driving me nuts.
// API Reference: https://www.wix.com/corvid/reference
// “Hello, World!” Example: https://www.wix.com/corvid/hello-world
import wixData from 'wix-data';
$w.onReady( function() {
const RangeCur = $w("#dynamicDataset").getCurrentItem().rangeName
let filters = wixData.filter().contains("title", RangeCur);
// $w("#input1").value = results.items[0].lumenlmMax
wixData.aggregate("Partcodes")
.filter(filters)
.max("lumenlm")
.min("lumenlm")
.run()
.then((results) => {
$w("#LmsHigh").value = results.items[0].lumenlmMax
$w("#slider2").max = results.items[0].lumenlmMax
$w("#slider2").value = results.items[0].lumenlmMax
$w("#slider2").min = results.items[0].lumenlmMin
$w("#slider1").max = results.items[0].lumenlmMax
$w("#slider1").value = results.items[0].lumenlmMin
$w("#slider1").min = results.items[0].lumenlmMin
$w("#LmsLow").value = results.items[0].lumenlmMin
console.log(results.items[1].lumenlmMax)
console.log(results.items[1].lumenlmMin)
})
.catch( (error) => {
});
} );
//$w("#dataset4").setSort( wixData.sort().descending("lumenlm"))
export function DowlightItems_rowSelect(event2, $w) {
$w("#DownlightItems").onRowSelect( (event) => {
let rowDat = event.rowData;
console.log(rowDat)
} );
$w("#dataset4").onCurrentIndexChanged( (event) => {
let itemData = $w("#dataset4").getCurrentItem();
console.log(itemData)
} );
}
$w.onReady(function () {
$w("#CodesBtn").onClick(() => {
$w('#statebox8').changeState("ProductCodes");
$w('#CodesBtn').style.backgroundColor = "#044C94";
//$w('#CodesBtn').style.height;
$w('#OptionBtn').style.backgroundColor = "#ECAC2C";
$w('#DownloadsBtn').style.backgroundColor = "#ECAC2C";
} );
$w("#OptionBtn").onClick(() => {
$w('#statebox8').changeState("Options");
$w('#OptionBtn').style.backgroundColor = "#044C94";
//$w('#OptionBtn').style.shadow
$w('#DownloadsBtn').style.backgroundColor = "#ECAC2C";
$w('#CodesBtn').style.backgroundColor = "#ECAC2C";
} );
$w("#DownloadsBtn").onClick(() => {
$w('#statebox8').changeState("Downloads");
$w('#DownloadsBtn').style.backgroundColor = "#044C94";
$w('#OptionBtn').style.backgroundColor = "#ECAC2C";
$w('#CodesBtn').style.backgroundColor = "#ECAC2C";
} )
});
export function SearchCode_input(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
FiterRun()
}
export function LmsHigh_input(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
FiterRun()
}
export function LmsLow_input(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
FiterRun()
}
export function CCtDD_input(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
FiterRun()
}
function ResetFilters(){
$w("#LmsHigh").value = $w("#slider2").max
$w("#LmsLow").value = $w("#slider2").min
$w("#slider1").value = $w("#slider1").min
$w("#slider2").value = $w("#slider2").max
$w("#CCtDD").value = ""
$w("#SearchCode").value = ""
$w("#BeamAngle").value = null
FiterRun()
}
function FiterRun() {
$w("#dataset4").setFilter(wixData.filter()
.contains("title", $w("#text35").text)
.contains("title", $w("#SearchCode").value) //search box
.ge("lumenlm", Number($w("#LmsLow").value) )
.le("lumenlm", Number($w("#LmsHigh").value) )
)
if($w("#CCtDD").value !=="")
$w("#dataset4").setFilter(wixData.filter()
.eq("ccTk", $w("#CCtDD").value)
.contains("title", $w("#text35").text)
.contains("title", $w("#SearchCode").value) //search box
.ge("lumenlm", Number($w("#LmsLow").value) )
.le("lumenlm", Number($w("#LmsHigh").value) )
)
if($w("#BeamAngle").value !=="")
$w("#dataset4").setFilter(wixData.filter()
.eq("beamAngle", $w("#BeamAngle").value)
.contains("title", $w("#text35").text)
.contains("title", $w("#SearchCode").value) //search box
.ge("lumenlm", Number($w("#LmsLow").value) )
.le("lumenlm", Number($w("#LmsHigh").value) )
)
if(($w("#BeamAngle").value !=="") && ($w("#CCtDD").value !==""))
$w("#dataset4").setFilter(wixData.filter()
.eq("ccTk", $w("#CCtDD").value)
.eq("beamAngle", $w("#BeamAngle").value)
.contains("title", $w("#text35").text)
.contains("title", $w("#SearchCode").value) //search box
.ge("lumenlm", Number($w("#LmsLow").value) )
.le("lumenlm", Number($w("#LmsHigh").value) )
)
}
export function slider1_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w("#LmsLow").value = $w("#slider1").value
FiterRun()
}
export function slider2_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w("#LmsHigh").value = $w("#slider2").value
FiterRun()
}
export function BeamAngle_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
FiterRun()
}
export function CCtDD_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
FiterRun()
}
export function Sortit_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
if($w("#Sortit").value === "Wattage (low-high)")
$w("#dataset4").setSort( wixData.sort().ascending("systemPowerW")
)
if($w("#Sortit").value === "Wattage (high-low)")
$w("#dataset4").setSort( wixData.sort().descending("systemPowerW")
)
if($w("#Sortit").value === "Lumens (low-high)")
$w("#dataset4").setSort( wixData.sort().ascending("lumenlm")
)
if($w("#Sortit").value === "Lumens (high-low)")
$w("#dataset4").setSort( wixData.sort().descending("lumenlm")
)
if($w("#Sortit").value === "Length")
$w("#dataset4").setSort( wixData.sort().ascending("lengthmm")
)
}
$w.onReady(function () {
// Run a query that returns all the items in the collection
const RangeCur2 = $w("#dynamicDataset").getCurrentItem().rangeName
wixData.query("Partcodes")
// Get the max possible results from the query
.contains("title", RangeCur2)
.limit(1000)
.find()
.then(results => {
// Call the function that creates a list of unique titles
const uniqueTitles = getUniqueTitles(results.items);
// Call the function that builds the options list from the unique titles
$w("#BeamAngle").options = buildOptions(uniqueTitles);
});
// Builds an array from the "Title" field only from each item in
// the collection and then removes the duplicates
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.beamAngle);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
});
$w.onReady(function () {
// Run a query that returns all the items in the collection
const RangeCur2 = $w("#dynamicDataset").getCurrentItem().rangeName
wixData.query("Partcodes")
// Get the max possible results from the query
.contains("title", RangeCur2)
.limit(1000)
.find()
.then(results => {
// Call the function that creates a list of unique titles
const uniqueTitles = getUniqueTitles(results.items);
// Call the function that builds the options list from the unique titles
$w("#CCtDD").options = buildOptions(uniqueTitles);
});
// Builds an array from the "Title" field only from each item in
// the collection and then removes the duplicates
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.ccTk);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
});
export function ResetFilter_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
ResetFilters()
}
/**
* Adds an event handler that runs when an input element's value
is changed.
* @param {$w.Event} event
*/
I don't know much about the API, but there are others that also do it, like this one:
ConvertAPI
Brilliant Got this working now, cant seem to find a way to push images to it.
Again thank you that's great.
One more Q do you know if its possible to create pdf's from data and images.
There are two ways of doing that.
Using .unshift() that is similar to .push() but it pushes the new array item to the beginning of the array:
function buildOptions(uniqueList) { const newOptions = uniqueList.map(curr => { return { label: curr, value: curr } }) newOptions.unshift({ label: "All", value: "all" }) //Unshift method. return newOptions }
Or using the .sort() method, that sorts alphabetically:
function buildOptions(arr) { const newOptions = arr.map(curr => { return { label: curr, value: curr } }) newOptions.push({ label: "All", value: "all" }) //Regular push. newOptions.sort((a, b) => a.label > b.label ? 1 : -1) //Sort function. return newOptions }
Perfect, is there way to put All to top of list?
That Works perfectly. Thank you so much been stuck on this for days.
1 more thing is the a way to add a 'All' option to the drop down boxes that filter the table?
Currently the CCT drop down has 2 options 3000 & 4000 I would like there to be a All option which will show all CCT's
So the table on my site is linked to the first collection and currently am using the range name which is shown in table 2 to filter PatCode in table 1.
What I have been trying to do is filter the second column which is type.
let filters = wixData.filter().contains("title", RangeCur);
I have tried
let filters = wixData.filter().contains("Procduct.type", RangeCur);
BTW I know Procduct is not a word but it is what the collection is called.
Wow, thank you.
I am defo gonna use this, I have found my issue now somehow by myself but I don't know how to fix it.
On the '.contains' line below rangeCur refers to the current items range name, which is in my types database and then this filters my partcodes database by the 'title'(text) field. The problem is that the rangeCur does not always appear in the title field.
It seems like the title field should be replaced by the 'type' field which is a referenced field within my part codes database which refers back to the types database.
w.onReady(async function () { const RangeCur = $w("#dynamicDataset").getCurrentItem().rangeName // Run a query that returns all the items in the collection const query = await wixData .query("Partcodes") .contains("title", RangeCur) .limit(1000) .find()
Thank you I have changed the code so I only have 1 onready().
But this has not solved my problem. Here is my new code.
// API Reference: https://www.wix.com/corvid/reference // “Hello, World!” Example: https://www.wix.com/corvid/hello-world import wixData from 'wix-data'; $w.onReady( function() { const RangeCur = $w("#dynamicDataset").getCurrentItem().rangeName let filters = wixData.filter().contains("title", RangeCur); // $w("#input1").value = results.items[0].lumenlmMax wixData.aggregate("Partcodes") .filter(filters) .max("lumenlm") .min("lumenlm") .run() .then((results) => { $w("#LmsHigh").value = results.items[0].lumenlmMax $w("#slider2").max = results.items[0].lumenlmMax $w("#slider2").value = results.items[0].lumenlmMax $w("#slider2").min = results.items[0].lumenlmMin $w("#slider1").max = results.items[0].lumenlmMax $w("#slider1").value = results.items[0].lumenlmMin $w("#slider1").min = results.items[0].lumenlmMin $w("#LmsLow").value = results.items[0].lumenlmMin console.log(results.items[1].lumenlmMax) console.log(results.items[1].lumenlmMin) }) .catch( (error) => { }); //$w("#dataset4").setSort( wixData.sort().descending("lumenlm")) $w("#CodesBtn").onClick(() => { $w('#statebox8').changeState("ProductCodes"); $w('#CodesBtn').style.backgroundColor = "#044C94"; //$w('#CodesBtn').style.height; $w('#OptionBtn').style.backgroundColor = "#ECAC2C"; $w('#DownloadsBtn').style.backgroundColor = "#ECAC2C"; } ); $w("#OptionBtn").onClick(() => { $w('#statebox8').changeState("Options"); $w('#OptionBtn').style.backgroundColor = "#044C94"; //$w('#OptionBtn').style.shadow $w('#DownloadsBtn').style.backgroundColor = "#ECAC2C"; $w('#CodesBtn').style.backgroundColor = "#ECAC2C"; } ); $w("#DownloadsBtn").onClick(() => { $w('#statebox8').changeState("Downloads"); $w('#DownloadsBtn').style.backgroundColor = "#044C94"; $w('#OptionBtn').style.backgroundColor = "#ECAC2C"; $w('#CodesBtn').style.backgroundColor = "#ECAC2C"; } ) // Run a query that returns all the items in the collection const RangeCur2 = $w("#dynamicDataset").getCurrentItem().rangeName wixData.query("Partcodes") // Get the max possible results from the query .contains("title", RangeCur2) .limit(1000) .find() .then(results => { // Call the function that creates a list of unique titles const uniqueTitles = getUniqueTitles(results.items); // Call the function that builds the options list from the unique titles $w("#BeamAngle").options = buildOptions(uniqueTitles); }); // Builds an array from the "Title" field only from each item in // the collection and then removes the duplicates function getUniqueTitles(items) { // Use the map method to create the titlesOnly object containing all the titles from the query results const titlesOnly = items.map(item => item.beamAngle); // Return an array with a list of unique titles return [...new Set(titlesOnly)]; } // Creates an array of objects in the form {label: "label", value: "value"} from the array of titles function buildOptions(uniqueList) { return uniqueList.map(curr => { // Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle} return {label:curr, value:curr}; }); } // Run a query that returns all the items in the collection const RangeCur3 = $w("#dynamicDataset").getCurrentItem().rangeName wixData.query("Partcodes") // Get the max possible results from the query .contains("title", RangeCur3) .limit(1000) .find() .then(results => { // Call the function that creates a list of unique titles const uniqueTitles = getUniqueTitles(results.items); // Call the function that builds the options list from the unique titles $w("#CCtDD").options = buildOptions(uniqueTitles); }); // Builds an array from the "Title" field only from each item in // the collection and then removes the duplicates function getUniqueTitles(items) { // Use the map method to create the titlesOnly object containing all the titles from the query results const titlesOnly = items.map(item => item.ccTk); // Return an array with a list of unique titles return [...new Set(titlesOnly)]; } // Creates an array of objects in the form {label: "label", value: "value"} from the array of titles function buildOptions(uniqueList) { return uniqueList.map(curr => { // Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle} return {label:curr, value:curr}; }); } } ); export function SearchCode_input(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: FiterRun() } export function LmsHigh_input(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: FiterRun() } export function LmsLow_input(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: FiterRun() } export function CCtDD_input(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: FiterRun() } function ResetFilters(){ $w("#LmsHigh").value = $w("#slider2").max $w("#LmsLow").value = $w("#slider2").min $w("#slider1").value = $w("#slider1").min $w("#slider2").value = $w("#slider2").max $w("#CCtDD").value = null $w("#SearchCode").value = null $w("#BeamAngle").value = null FiterRun() } function FiterRun() { $w("#dataset4").setFilter(wixData.filter() .contains("title", $w("#text35").text) //.contains("title", $w("#SearchCode").value) //search box //.ge("lumenlm", Number($w("#LmsLow").value) ) //.le("lumenlm", Number($w("#LmsHigh").value) ) ) if($w("#CCtDD").value !=="") $w("#dataset4").setFilter(wixData.filter() .eq("ccTk", $w("#CCtDD").value) .contains("title", $w("#text35").text) .contains("title", $w("#SearchCode").value) //search box .ge("lumenlm", Number($w("#LmsLow").value) ) .le("lumenlm", Number($w("#LmsHigh").value) ) ) if($w("#BeamAngle").value !=="") $w("#dataset4").setFilter(wixData.filter() .eq("beamAngle", $w("#BeamAngle").value) .contains("title", $w("#text35").text) .contains("title", $w("#SearchCode").value) //search box .ge("lumenlm", Number($w("#LmsLow").value) ) .le("lumenlm", Number($w("#LmsHigh").value) ) ) if(($w("#BeamAngle").value !=="") && ($w("#CCtDD").value !=="")) $w("#dataset4").setFilter(wixData.filter() .eq("ccTk", $w("#CCtDD").value) .eq("beamAngle", $w("#BeamAngle").value) .contains("title", $w("#text35").text) .contains("title", $w("#SearchCode").value) //search box .ge("lumenlm", Number($w("#LmsLow").value) ) .le("lumenlm", Number($w("#LmsHigh").value) ) ) } export function slider1_change(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: $w("#LmsLow").value = $w("#slider1").value FiterRun() } export function slider2_change(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: $w("#LmsHigh").value = $w("#slider2").value FiterRun() } export function BeamAngle_change(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: FiterRun() } export function CCtDD_change(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: FiterRun() } export function Sortit_change(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: if($w("#Sortit").value === "Wattage (low-high)") $w("#dataset4").setSort( wixData.sort().ascending("systemPowerW") ) if($w("#Sortit").value === "Wattage (high-low)") $w("#dataset4").setSort( wixData.sort().descending("systemPowerW") ) if($w("#Sortit").value === "Lumens (low-high)") $w("#dataset4").setSort( wixData.sort().ascending("lumenlm") ) if($w("#Sortit").value === "Lumens (high-low)") $w("#dataset4").setSort( wixData.sort().descending("lumenlm") ) if($w("#Sortit").value === "Length") $w("#dataset4").setSort( wixData.sort().ascending("lengthmm") ) } export function DowlightItems_rowSelect(event2, $w) { $w("#DownlightItems").onRowSelect( (event) => { let rowDat = event.rowData; console.log(rowDat) } ); $w("#dataset4").onCurrentIndexChanged( (event) => { let itemData = $w("#dataset4").getCurrentItem(); console.log(itemData) } ); } export function ResetFilter_click(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: ResetFilters() } /** * Adds an event handler that runs when an input element's value is changed. * @param {$w.Event} event */
Hello there, can you please try to have only one $w.onReady() method in your code? See if it gets any better. I can see your code can be optimize, but first we need to try this before anything else.
There are also a lot of repeated code. I'm trying to refactor a bit your code. As I can see, you could sort the data using the high order function .filter() because you already call all data from your dataset.