Collapsing image based on whether dataset image field is empty or not

Ask the community
, ,
1

Can anyone help me out?

I have a database collection for displaying profiles…with 4 image fields (with png icons). Each profile will have a variation of the 4 images.

I have the images inside a container inside the repeater item with a 1x4 grid displaying like this.

1084×1614 208 KB

I’m trying to simply expand and collapse the emblem images based off of whether there’s an image in the database field.

I’m new to learning code/let alone velo. But from forums and scouring and looking at the API references this is the code I’ve come up with. I’m not getting any errors, but it’s not working.

Seems like it should be simple. What am I missing?

Any help would be appreciated. I’d like to understand this, because it’s a pretty basic feature/thing I’ll need to do on lots of websites I’m designing.

Much appreciated in advance.

$w.onReady(() => {
    $w("#HubProfilesDataset").onReady(() => {
  // Gets the current item properties and stores them in a variable called item
        const item = $w("#HubProfilesDataset").getCurrentItem();
        // Checks if the current item has a value in the "certification1" field
        if (item.certification1 === undefined) {
        // Collapses or hides the image if there is no value for "certification1"
            $w("#cert1").collapse();
        } else {
                $w("#cert1").expand();}
        }
)});
2

Hi there :wave:t2: I do something similar on my site. Where you have this line of code:

if (item.certification1 === undefined) {

Replace it with this and it should work

if (item.certification1 === undefined || item.certification1 === null || item.certification1 === "") {
3

@lmeyer

Thank you much! Appreciate the response. I tried adding your additional code but it’s still not working even though I’m not getting any errors.

I’m wracking my brain trying to figure out why this is so difficult.

4

@LMeyer @Corey Weberling

There is no need to do it like this…

if(item.certification1===undefined||item.certification1===null||item.certification1==="")}

just do it like this…

if(item.certification1){  ... }
else { ... }

Meyer all you try to controll is already integrated in the function itself.
I also have had to learn this and also was doing it like you in the past.
But there is no need for it. → shorten your code and save time when coding :wink:

@Corey Weberling
Try to use some CONSOLE-Logs to inspect and analyse your code.
Find the line, which do not work, or do not give you any results.