Question:
Hey there - I have a collection with MANY fields, each connected to an element on a dynamic page. I would like to get the page to automatically HIDE and also COLLAPSE any element that is connected to an empty field within the dynamic page’s current CMS item.
Is there any method you’ve tried to do this in scale? not just for 1 or 2 elements but for dozens of them all with slightly different names?
would appreciate any ideas
Product:
[Wix Studio Editor.]
What are you trying to achieve:
In order to make project pages with a random-looking order, I made my client a CMS with a template i duplicated 6 times, for example - there are 6 gallery fields in the collection, some might be empty within an item and some might be populated. those who are empty should not take any space on the page.
What have you already tried:
I had matched the ID’s of the fields and their connected elements in the page (e.g Title field ID: “#Title1”, and title element ID is “#Title1”) - not sure if it’s helping.
I wrote these functions for hiding null elements:
// Checks if field in CMS is empty//
function isEmpty(field) {
if (field === "" || field === null || field === undefined) {
return true;
} else {
return false;
}
}
//hides an element if the field in the arguments is empty//
function hideElement(field, element) {
if (isEmpty(field)) {
$w(element).hide();
$w(element).collapse(); //set height to 0
} else {
$w(element).show();
}
}
I also wrote this sort of code for about 20 fields -
let item = $w("#dynamicDataset")
$w("#myDataSet").onReady(() => {
hideElement(item["field"],"#element");