I have a repeater connected to a collection. Sometimes the collection will have no entries and I’d like to detect this and hide the section completely.
I have tried using the rendered function from the repeater structure, as I figure the elements in the repater aren’t being displayed when the collection has no data, so they can’t be in the DOM, but its not working. What is the quickest, most efficient way to detect an empty repeater?
To clarify, you are or are not using and code right now to populate your repeater?
Sorry Amanda, I am not populating the repeater with code. It’s driven by a dataset on the page.
Okay, no problem! Just wanted to make sure I understood the methodology.
So, I’m not sure the expected behavior when using a dataset and would have to look into that more but I can explain how to do this if you want to use code.
In the case below I have a repeater element that is just text in the repeaters. Let me know if something like this would work in your case. I am using a backend jsw function to get my data but you do not have to do this, it depends on the collection/privacy/permissions
$w.onReady(async function () {
//set your repeater to an empty array, it will not show up on page load bc it doesn't have any data
$w('#commentsRepeater').data = []
/get your data - in my case this is coming from a backend function I am awaiting
const results = await getData();
//set the repeater data to the results
$w('#commentsRepeater').data = results
//then in the onItemReady map the specific repeater elements to the itemData
$w('#commentsRepeater').onItemReady(($item, itemData,index) => {
$item("#commentsText").text = itemData.comment;
})
This is just one way to attempt it btw, but the takeaway is that in code, you can set the repeater to an empty array if the query returns no data. If the array is empty there will be nothing visible and if you really want to double down you could also use collapse or hide.