If Multiple Reference Field Empty, Hide Table in Repeater

Ask the community
, ,
1

Hello, I think I am trying to do something fairly simple, but I’ve tried multiple things and nothing has worked.

I have a collection entitled “departmentposts”, which collects posts that site members want to share. As part of writing a post, members can “tag” other members. This pulls the tagged member’s data from the “members” database into the multiple reference field labeled “tags” in the “departmentposts” collection.

To display the posts, I have a repeater to include all of the post information. I also want to display the name of the tagged members. To do so, I added a table to the repeater, and used a filter to include the name of the tagged members in each post’s table. So far so good.

Here’s the problem: the table shows up even when no members have been tagged in the post. In other words, an empty table appears in the repeater even when the multiple reference field labeled “tags” is empty.

I simply want to collapse the table if the multiple reference field is empty, for each item in the repeater. I’ve tried a number of approaches but nothing seems to work.

Any one have a solution for me?

2

@kyanmatthewlynch Since you didn’t post any code, I’m guessing from your description that you are using a dataset to populate the repeater and it’s included elements. It’s not clear how you are applying the filter on the tagged members.

The wixData API would provide more flexibility to achieve what you want to do. I’m not saying it’s impossible to do with the dataset approach, but I am a little skeptical.

Here’s an example of how you could go about it with wixData.query providing the data for the repeater where schedVolunteers is the multiple reference field to apply to the table. It simply checks for the length of the schedVolunteers array to see if there were any references (volunteers) and collapses the table if there are none.

import wixData from 'wix-data';
$w.onReady(function () {
    wixData.query("schedCommittees")
    .ascending("committee")
    .include("schedVolunteers")
    .find()
    .then((res) => {
        $w("#repeater2").data = res.items;
    })
    $w("#repeater2").onItemReady(($item, itemData, index) => {
        $item("#txtCommittee").text = itemData.committee;
        $item("#txtDescription").text = itemData.description;
        $item("#table1").rows = itemData.schedVolunteers;
       if (itemData.schedVolunteers.length === 0){
            $item("#table1").collapse();
        }
    })
});
3

Thanks for your help, @tony-brunsman ! I was able to solve the issue with the following code:

$w.onReady( function () {

$w( “#repeater1” ).onItemReady(($item, itemData) =>{

wixData.queryReferenced( “departmentposts” , itemData, “tags” )
.then( (results) => {
if (results.items.length === 0 ) {

$item( “#table1” ).collapse()}
else {
$item( “#table1” ).expand()
}
})})})