Display button based on boolean variable stored in collection.

Ask the community
, ,
1

Hi,

I want to display a Button in a Repeater based on a boolean variable that is stored in a Collection field. If the field is checked, display the button, basically.

I read a couple of threads that recommend using $w and scope but can’t really sort it out.

Some reference i gathered:

export function button1_click(event, $w) {
  if(some condition is true) {
  	$w("#button1").show();
  }
  else {
  	$w("#button1").hide();
  }
}

The $w scope selector parameter in the function is what makes Repeated Item Scope work.

$w('#myDataset').onReady(() => {
    let itemObj = $w("#myDataset").getCurrentItem(); 
    if (itemObj) {
        $w('#button2'). link = itemObj........;
    }
    else {
        $w('#button2').hide();
    }
});

Many thanks,
Mircea P.

2

try this…

$w.onReady( function () {
$w(“# myDataset “).onReady(() => {
$w(”#repeater1”).forEachItem(($w) => {
const booleanValue = $w(“# myDataset “).getCurrentItem()._nameOfCollectionBooleanField //change this field name
if (booleanValue === true ) {
$w(”#button2).hide();
} else {
$w(”#button2).show();
}
})
})
})

3

Hi Mircea!

Your second bit of code is almost correct.
If the boolean field exists in your collection then you need to address it from inside the itemObj.

Meaning that if your field is called bool for example - your code would look like this:

$w('#myDataset').onReady(() => {     
  let itemObj = $w("#myDataset").getCurrentItem();      
  if (itemObj.bool) {         
    $w('#button2').show()     
  }     
   else {         
       $w('#button2').hide();     
   } 
});

Let me know if it worked for you.

Doron.

4

I have tried the solution. Unfortunately, it hides the button in all the items of the repeater, also the ones that have the box unchecked. Also, modified it a bit. it was :

if (booleanValue === true ) {
$w(" #button2 ).SHOW();
} else { $w(" #button2 ).HIDE();

but this is minor.

THE CODE USED:

$w.onReady( function () {
$w(“#dataset4”).onReady(() => {
$w(“#repeater3”).forEachItem(($w) => {
const booleanValue = $w(“#dataset4”).getCurrentItem()._RegistrationFeesButtonBoolean //change this field name
if (booleanValue === true ) {
$w(“#button2”).show();
} else {
$w(“#button2”).hide();
}
})
})
})

Many thanks,
Mircea.

5

Hi. Thanks for your hellp , first of all.

I tried the code, but it was returning :

There was an error in your script
The element selector function (usually $w) cannot be used before the page is ready

SO I AUGMENTED IT WITH WHAT OUR FORUM COLLEAGUE WROTE ABOVE:

$w.onReady( function () {
$w(“#dataset4”).onReady(() => {
$w(“#repeater3”).forEachItem(($w) => {
let itemObj = $w(“#dataset4”).getCurrentItem();
if (itemObj.ButtonBoolean) {
$w(‘#button2’).show()
}
else {
$w(‘#button2’).hide();
}
})
})
})

It doesn t return any errors, but, still, all the Buttons in the repeater dissapear. It’s like, it doesn’t read the information from the databse.

Mircea.

6

@mircea-peleanu
console.log(booleanValue);

see if it returns a value of true or false to the console

7

also i suspect you have written the wrong field Id for your collection as you have wrote
" RegistrationFeesButtonBoolean "

field Ids always start with a lower case character

8

@mikemoynihan99

wrote it with lower case buttonBoolean. same result.

9

@mikemoynihan99

console.log(booleanValue);

sry for my stupidity. where do i insert this line of code?

thank you, again…

10

@mikemoynihan99

inserted the console log. this is what it prints.

undefined
undefined
undefined

11

@mikemoynihan99

managed to get it working with this:

const booleanValue = $w(“#dataset4”).getCurrentItem().buttonBoolean

FINAL CODE:
$w.onReady( function () {
$w(“#dataset4”).onReady(() => {
$w(“#repeater3”).forEachItem(($w) => {
const booleanValue = $w(“#dataset4”).getCurrentItem().buttonBoolean //change this field name
if (booleanValue === true ) {
$w(“#button2, #button3, #button4”).show();
} else {
$w(“#button2, #button3, #button4”).hide();
}

})
})
})

Thank you so much!

12

@mircea-peleanu
good to hear you got it working