Hide image and text on dynamic page if there's no input in database

Ask the community
,
1

I’ve got a dataset with several collections of wedding rings. Each collection contains 5 to 10 models.

In the dataset it looks like this:

4590×328 121 KB

On the dynamic page I’ve created 10 placeholder with text boxes and it looks like this:

1650×878 79.2 KB

In this example this collection contains 9 models. How do I hide the last placeholder image and text when there’s no ring model number 10 in the dataset?

Does anyone have an example code for me?

2

Take a look on the VELO-API and search for —> isEmpty

3

Sorry, I’ve looked for that but couldn’t find the answer.

4

Anyone?

5

Perhaps you should first show the related code to your problem?

When you are using → a dynamic page then you surely use a dynamic-dataset.
That means every-time when you switch from item to item…

$w.onReady(()=>{
	$w('#dataset1').onReady(()=>{
		let item $w('#dataset1').getCurrentItem(); console.log(item)
	});
});

You would get always just the one chosen current item as result.
Now you can solve your issue in several ways…

  1. using —> isEmpty
  2. using —> isNotEmpty
  3. using an if-else-query

Let me show you the example with the if-else-query…

$w.onReady(()=>{
	$w('#dataset1').onReady(()=>{
		let item $w('#dataset1').getCurrentItem(); console.log(item)
		if(item) {
			console.log("Item found!"
			//place here your code to show() the related IMAGE
		)}
		else{
			console.log("Item not found!")
			//place here your code to hide() the related IMAGE
		}
	});
});
6

Thank you @russian-dima !

I’ve added the code but unfortunately I get an error. Can you tell me what went wrong?

1260×396 22.2 KB

$w.onReady(()=>{
  $w('#dynamicDataset').onReady(()=>{
 let item $w('#dynamicDataset').getCurrentItem(); console.log(item)
 if(item) {
      console.log("Item found!")
      $w('#image11').show();
 )}
 else{
      console.log("Item not found!")
      $w('#image11').hide();
 }
 });
} );
7

@bymichiel
Fix:

$w.onReady(()=>{
	$w('#dynamicDataset').onReady(()=>{
	     let item $w('#dynamicDataset').getCurrentItem(); console.log(item);
	     if(item){console.log("Item found!");
	         $w('#image11').show();
	     }
	     else{console.log("Item not found!");
	         $w('#image11').hide();
	     }
	});
});
8

@russian-dima Thanks, will try that one.