How to make an Icon be visible if a bolean field is true, and hide if that same field is false?

Ask the community
, ,
1

I have a Dynamic Page that has a table in content manager. That table has a field that is Boolean. Its a true or false. There is a Dynamic Page (read-only) that is visible to clients, they can see this information, but I want to put an icon that will disappear if the boolean field is false. Visible if the boolean field is true. Basically, I want to treat it like a lightbulb that will appear only if the field is true. I might even use a text field that says “Available Now” with the same conditions (only visible if true in the boolean field). I know very little of Wix coding but I am a quick learner. Could someone help me with this conditioning coding?

I am trying this that I saw on another post but get an error and I don’t understand enough to know why…

469×512 13.7 KB

2

Hi there :wave:t2: Are you trying to hide an element on a dynamic page, or is it within a repeater?

3

I’m asking because your post sounds like it’s an element on a dynamic page, but your code is for a repeater

4

@lmeyer Its a repeater within a dynamic page that has the element I want to hide and make visible according to the boolean field’s true/false

5

I do something similar on my site, below is the code I use for both a dynamic page and a repeater, depending on your scenario.

You will need to change the element names to match what you have on your pages, and change “fieldKey” to be the Field Key of the column in your database you are looking for.

For dynamic page:

$w.onReady(function () {
    $w("#yourDataset").onReady(() => {
        var item = $w("#yourDataset").getCurrentItem();
        // Change "yourFieldKey" to the Field Key of the database column you want to find
        if (item["yourFieldKey"] === true) {
            $w("#yourElement").show();
        } else {
            $w("#yourElement").hide();
        }
    });
});

For repeater:

import wixData from 'wix-data';

$w.onReady(function () {
$w('#yourRepeater').onReady(() => {
        $w("#yourRepeater").onItemReady(($item, itemData) => {
            let field = itemData.yourFieldKey; // Change "yourFieldKey" to the Field Key of the database column you want to find
            if (field === true) {
                $item("#yourElement").show();
            } else {
                $w("#yourElement").hise();
            }
        });
    });
})
6

I tried but I dont know why its not working

$w . onReady ( function () {
$w ( “#dataset1” ). onReady (() => {
var item = $w ( “#dataset1” ). getCurrentItem ();
// Change “yourFieldKey” to the Field Key of the database column you want to find
if ( item [ “disponibleAhora” ] === true ) {
$w ( “#text126” ). show ();
} else {
$w ( “#text126” ). hide ();
}
});
});

7

So I have on Dynamic page where I want to do this and I also have a Page with a Repeater where I want to do this. So I do have both scenarios.

8

I can do Microsoft Access Database coding and also Microsoft Excell. But this is foreign to me

9

@2110jrv

//DATASET-ID--> #dataset1 ??? <--- checked?
//DATASET-connection <--- checked ?
//DATABASE LIVE and PREVIEW synced?
//DB-PERMISSIONS checked?
//Text-ID ---> #text126 <--- checked?
//DATAFIELD-ID --> disponibleAhora <--- checked ?

$w.onReady(function () { // <------------- OK
    $w("#dataset1").onReady(()=> { // <------------- OK
        var item = $w("#dataset1").getCurrentItem(); 
        console.log(item); //<-- console-log --> ok ?
        console.log(item.disponibleAhora); //<-- console-log --> ok ?
       
        if (item.disponibleAhora) {$w("#text126").show('fade');} 
        else {$w("#text126").hide('fade');}
    });
});

//Perhaps ....
var item = $w("#dataset1").getCurrentItem(); 
console.log(item[0]) //?????
10

thank you @lmeyer I will definitely try this one on my page as well… I’ve been seeking help for a while trying to do the same thing. One question, if it’s not a boolean field but I want to check if the field contains a certain string, how would the IF statement look like? I guess that === should be replaced by something else?

11

@mitocarecenter It depends on what type of field you’re using. If you’re looking for a text field then you would replace true with the text that matches the database field in quotation marks, like below:

if (item["yourFieldKey"] === "Bean Burritos") {
     $w("#yourElement").show();
} else {
     $w("#yourElement").hide();
}