Hide a repeater if dataset is empty

Discussion Ask a question
,
1

I am setting up a repeater to show upcoming events. Is it possible to add some code so that if there are no upcoming items it will show my text “there are no upcoming events” (note: my dataset is filtered to see only future events).

I’m ok with the code to show the text, but I need help with an IF statement to check if the dataset isn’t bringing up anything.

Thanks!

2

Wanda, you will have to do a bit of coding. Do you get the content of the repeater from code or from setting values in the settings boxes at design time?
If last, you will have to do a data query in code, and if the .totalCount value of the queryresult is 0, you .hide the repeater and .show your textbox (which you design with hiidenonload=true in editor). If not, you fill the repeater, also thru code.
Let me know if this makes sense.

3

Hi Giri,

I set up the filters via the dataset settings (not in the code).

I am still fairly new to code - can you show me what it would look like to do the query in the code for the .totalCount? The concept makes sense, just not sure how to implement it.

Thanks!

4

Wanda, while I´m waiting for someone else to help me, might as well help you.
When I started with WIx Code, I didn´t really understand the difference between wix-data and wix-dataset. But the difference is important for what follows. Wix-data is a low level interface to add/delete/update/query a collection. Wix-dataset is the magical glue between a form and a collection. It makes life a lot easier to do forms with wix-dataset: you can bind form fields to a collection field, change values, update, create new, etc. The same would have been possible with wix-data, but with a lot of coding. So basically, the two are different tools for the same job. Maybe this will help: if you need to do forms, use wix-dataset (and you drag a wix-dataset icon onto your form page). If not, wix-data is your friend.

In a repeater, you display stuff, so you do not really need wix-dataset: there is no input. So let´s start.
First, create a new, normal page, with correct read/write permissions. Now, below, we are going to assume the following:

  1. you put a repeater (the first from the list, with the sailing boats) on your page, called #repeater1
  2. you put a box on your page called #boxMessage
  3. inside the box you put in a plain text field called #txtMessage and you put in a text like “Sorry, nothing to display here.”
  4. set the #boxMessage to HiddenOnLoad in the prop.panel. #txtMessage will also be hidden, because, when it snaps to the box, it is suddenly a child of boxMessage and if we set the box to hidden, everything inside the box is also hidden
  5. first, we start with the query using wix-data. Yoy have to import that one, so at the top of you code page, above the $w.onReady, you put :
import wixData from 'wix-data';
  1. now we are going to build a query on a collection called “Members” and we select everybody that is still “Active” (a boolean “isActive” in the collection) and we throw it towards the repeater with the .data
wixData.query("Members")
				.eq("isActive", true)
				.ascending("title")
				.find()
				.then((results) => {
					$w("#repeater1").data = results.items;
				})
				.catch((err) => {
					let errorMsg = err;
				});
  1. but how does the repeater know what to display where when we do it all in code? It doesn´t, so we have to tell it what to display where, how to “bind” it. For this, we use the repeater´s .onItemReady. We assume that inside the repeater, we have an image called repImage and a Title called repTitle.
    We also assume that the fields in the collection are called “title” and “Image”. Now we start the binding. Remember that you only have to “bind” ONE repeater item (let´s say, the “first”). All other repeater item are bound automatically.
  2. we check if there is an image in the row available with if (imgImage) {, so we do not run the risk of displaying an image if there is none. If there is one, we set the src-property of the image.
  3. so, when somebody clicks on the image, now where does that have to go to? Well, to a dynamic page called /Members/List/, where we also assume that the URL is made up of only the _id of the member. We put that in a string and with this value we set the .link property of the image.
			$w("#repeater1").onItemReady(($w, itemData) => {
				$w(`#repTitle`).text = itemData.title;
				let imgImage=itemData.Image;
				if (imgImage) {
					$w('#repImage').src = imgImage;
				}
				let strId = itemData._id;
				let linkToPage = "/Members/List/" + strId;
				$w('#repImage').link =linkToPage ;
			});

Maybe you have anpther setup for your dynamic page behind the click, or none at all, I don´t know. But this should get you going. Good luck.

2 Likes
5

Oops, forgot the “if no records”-part, Working on it.

6

We use the resultcount of the query result. If it is greater than 0, that means we have something to display. If not, we hide the repeater and show the boxMessage. So replace the second code block above with this.

			wixData.query("Members")
				.eq("isActive", true) 
				.ascending("title") 
				.find()
				.then((results) => {
				        let resultCount = results.totalCount;
				        if (resultCount > 0) {
				             $w("#repeater1").data = results.items;
				        }
					else {
					    $w("#repeater1").hide();
					    $w("#boxMessage").show();
					}
				})
				.catch((err) => {
					let errorMsg = err;
				});
7

so much effort (even it´s a long time ago) and not even a little thank you.
I WOULD like to say thanks for the effort.
It gave me a little insight-view to manage my problems ;-))
THANK YOU

1 Like