Hi,
So I have Portfolio I built with Dynamic pages. There is a an ALL page and a Title page.
I have some fields that are not populated for every item called Features. On the ALL page I’m able to show the populated fields and hide the empty fields. It works great.
My issue is with the Title page. I need to be able to do the same thing but this page does not use a repeater. I have tried modifying this in several ways, none of which work, all of the optional fields remain hidden. I am still super new to JS/ Velo. I thought I had a handle on this but, but obviously I don’t.
Link to folio: https://bluntchbuilders.wixsite.com/bluntchbuilders/portfolio
Link to Title Page: https://bluntchbuilders.wixsite.com/bluntchbuilders/portfolio/baganara
But it’s the same for all items.
export function box1_viewportEnter_1(event) {
$w("#box1").onViewportEnter( ($w, itemData, index) => {
if(itemData.feat2On === "true") {
$w("#text16").expand();
$w("#text16").show();
$w("#txtFet2").expand();
$w("#txtFet2").show();
}
else {
$w("#text16").hide();
$w("#text16").collapse();
$w("#txtFet2").hide();
$w("#txtFet2").collapse();
}
});
}
In the ALL page the code uses and onItemReady but I can’t find any item on the Title page with this property. So I thought on onViewportEnter would work but no, it’s a fail.
Thanks in advance for your help with this.
You were very close to your solution (almost😅).
First of all you have to know the difference between the dynamic-all-page and a normal dynamic-page.
A normal-dynamic-page always just shows-up JUST-ONE-ITEM (item by item).
The ALL-page shows-up all items —> Through a REPEATER.
Ok, but what i wanted to tell you, by providing this information?
On a normal dynamic-page you do not need to code the whole world to hide or show or to expand or collapse placed elements on your dynamic page.
Your if-else-part looks good…
if(itemData.feat2On === "true") {
$w("#text16").expand(), $w("#text16").show();
$w("#txtFet2").expand(), $w("#txtFet2").show();
}
else {
$w("#text16").hide(), $w("#text16").collapse();
$w("#txtFet2").hide(), $w("#txtFet2").collapse();
}
But this one will never work like that…
$w("#box1").onViewportEnter(($w, itemData, index)=>{
All you have to do is…
$w.onReady(()=>{//Starts when page is READY!!!
let currentItem = //define first your ITEM here......
//If-Else-Query-Process.....
if(currentItem.feat2On === "true") {
$w("#text16").expand(), $w("#text16").show();
$w("#txtFet2").expand(), $w("#txtFet2").show();
}
else {
$w("#text16").hide(), $w("#text16").collapse();
$w("#txtFet2").hide(), $w("#txtFet2").collapse();
}
});
How to define the current ITEM ???
let currentItem = $w("#myDataset").getCurrentItem(); console.log(currentItem)
Velo Ninja!! Thank you so much!! Not just for a working solution but for the coaching. I knew there was a difference in presentation, but I didn’t know about or understand the difference between the two pages in the way you’ve described it. Valuable lesson I’ll be able to use over and over again.
Again, much thanks for your help
Hi there,
First of all things, are you sure the field you’re checking is a string, not a boolean? You see ( “true” ) does NOT equal ( true ), the first one is considered a regular text, and the second one is the boolean that takes the true/false answer.
The second thing I want to point at is the repeater’s onReadyItem function, if you’re going to have ANY logic, validations, checking, or whatever the case may be, you’ll must have the repeater’s onItemReady well written.
First, use the link above to learn how it’s declared, then follow up with me to show you how to check the values and only show the title only if thre’s one.
You need to set the title to be collapsed on load (you can find this option in the element’s property panel), and let the code decide when to display it.
$w('#repeater').onItemReady(($item, data) => {
// We're checking if there's a title or not
if (data.title) {
// Do the following if there's a title
$item('#title').text = data.title;
$item('#title').expand();
}
})
Hope this helps~!
Ahmad
Thanks! I’m sure my “true” is text and not a bool. The === is for a literal.
My question above is for the TITLE page, not the title item of a repeater. Sorry for any confusion. But as you are kind enough to help and share here is what I’m using and everything works great like it should:
//I use this on my ALL page (with repeaters) and it works great
export function repFolio_itemReady($item, itemData, index) {
$w("#repFolio").onItemReady( ($w, itemData, index) => {
if(itemData.feat2On === "true") {
$w("#text16").expand(); //static title
$w("#text16").show(); //static title
$w("#txtFet2").expand(); //dynamic text
$w("#txtFet2").show(); //dynamic text
}
else {
$w("#text16").hide();
$w("#text16").collapse();
$w("#txtFet2").hide();
$w("#txtFet2").collapse();
}
});
}
And this is what my final code for my TITLE page looks like (no repeater):
$w.onReady(()=>{//Starts when page is READY!!!
let currentItem = $w("#dynamicDataset").getCurrentItem(); console.log(currentItem)
if(currentItem.feat2On === "true") {
$w("#text16").expand();
$w("#text16").show();
$w("#txtFet2").expand();
$w("#txtFet2").show();
}
else {
$w("#text16").hide();
$w("#text16").collapse();
$w("#txtFet2").hide();
$w("#txtFet2").collapse();
}
});
}
Links to the pages is at the top of this page, you can see going from one detail page to the next the number of features changes from item to item (page to page) as it should and the box expands and contracts as it should depending on the number of items displayed.
Thanks again!
