Trouble using advanced prototyping features with variant components, boolean variables, and conditional logic?

Ask the community
1

Hi all!

Working on a prototype for a form where the interaction needs to be:

  • user can check a checkbox and a set of fields appears
  • user unchecks the same checkbox and the set of fields disappears

My checkbox component is built with variants and conditional logic where “Yes” means the box is checked, and “No” means the box is unchecked. There’s also already a prototyping “Change To” interaction on them.

I created my boolean variables and set them to the fields I need to show and hide so that their Layer panel uses “showLayer” variables.

I’m running into the issue during prototyping when I try to use the Conditional interaction to set the “showLayer” variable to true or false AND also use the Change To interaction have the checkbox check and uncheck. It works for the first click (as in the checkbox will turn checked and the fields appear), but I can’t get the checkbox to uncheck and have the fields disappear on the second click. Only the fields show and hide but the checkbox remains checked the entire time. Screenshot attached of my prototyping interaction.

Screenshot 2023-07-26 at 3.09.10 PM
Screenshot 2023-07-26 at 3.09.10 PM1748×942 73.7 KB

Any help is GREATLY appreciated! Thank you!!

2

Move the existing “Change to” action to the if block, and add a new “Change to” action to the else block and change the variant.

4

Hmmm I tried that and I’m still having the same issue. The checkbox checks and the fields appear upon first click, but only the fields hide and the checkbox still remains checked on any subsequent click. I need it to uncheck as well.

5

Can you please tell me if this interaction is added to an instance or to a variant in a component set?

Try adding and changing this interaction in variants in the component set to the following:

// "No" variant
if (ShowLayer == false) {
    Set ShowLayer to true;
    Change to Yes
}

// "Yes" variant
if (ShowLayer) {
    Set ShowLayer to false;
    Change to No
}
6

Yes i have that set on the variants of the main component itself, not the instance!

Now when i set it, the checkbox is checking and unchecking, but the layers are not showing and hiding, only showing. I can’t get the layer to hide even though the box while check and uncheck. :sweat_smile:

7

Could you share a link to an example file?