Hello! Is there a way to swap the value of a component boolean property on a prototype? Something like, on click on a button, I want to set the collapsed boolean property of my component to true.
Hi, Rolando.
Yes. You can swap the value of the boolean property using boolean variables.
First, create a boolean variable in your local variables.
Then, on the instance of your component apply the variable on the boolean property.
Lastly, on the button that you will click, add interactions and use the set variable and change the Boolean variable to true.
What if there are multiple instances of the same component and we only want to control one of them at a time. I have a similar situation where I have multiple accordions with a hidden / expanded boolean property tied to collapsed / expanded.
Similarly, I have cards with a border tied to a Boolean property. I want the boolean property to change to try when I click the CTA on the card. Tying to a variable would mean all accordions/cards change state even if I interact with just one of them and the variable value changes.
However, I want to do it to only one of the many instances on the page. Is there a way to achieve this. I basically just want to toggle a Boolean property of just one instance on click.
Then just attach the variable only to that one instance. Because if you attached the variable to all instances, when you change the value of the variable, all of them would change. So, you have to control which variables to attach on which component and so on.
Wouldn’t that mean only one of the many product cards on the page would work as expected while the others don’t? Makes user testing a pain as you have to “lead” the user to that one card which isn’t really the best way to conduct research.
Not really, if you create another variable for it which is not connected to the other variable. It should work fine.
The only reason all of your components change when you set the boolean is because all of them is connected to that boolean.
In short, separate all the boolean for all of them or like create 1:1 boolean if you don’t want any of them to change when you make changes on one instance. It’s like you have 3 light bulbs connected to one switch and you wonder why all the bulbs turned on when you only want one of them to turn on.
I don’t see how this is a scalable solution. The whole point of interactive components is reusability, where we set up the interaction once and then works consistently across screens. This also makes it easier to change behavior as you only have to modify your interaction once - in the main component.
That’s what the question is about. For interactive components, I can do an “On click change variant A to variant B” but I somehow cannot do an “On click change boolean property true to false”. So, if I have an icon in the button, that should show up on click. I HAVE to create two variants one with the icon and one without. Even though I could just attach that icon to a boolean property. This basically beats the whole point of boolean properties.
If I understood your suggestion correctly, I would have to create a new variable and then set an “set variable on click” interaction every time I’m adding an instance of the button, even if the interaction is identical.
Seems like this doesn’t make the component that reusable as there’s a lot of rework. Also, if tomorrow there’s a decision to say add a delay to this interaction, I’d have to manually go back and change the “set variable on click” interaction on each and every instance (I could have 1000s across pages). Unless I’m missing the point completely, I don’t see how this is a feasible solution.
2 Likes
Normally, I won’t add interactions to repeatable components aside from hover or pressed, because I don’t want any of the button to have the same function even though they are being used in many places.
Basically, in my button components there will be no onClick but if that button will function as an accordion only, I could make another tier of component called accordions and add the function in there (which i can also set with boolean variables if I want to).
That’s exactly the point! What if I wanted an icon to show up only on hover? I would be forced to create an additional variant with the icon visible. What’s the point of Boolean properties then? It seems like Boolean properties cannot be “reused” or leveraged for states like hover and pressed.
This is where the frustration is coming from. If I have a primary, secondary and tertiary button, I HAVE to create 3 additional variants even if it’s just the icon that’s visible, in spite of having Boolean properties at my disposal. To me simply making Boolean properties change on click would reduce the need for additional variants and be a much more efficient solution.
I don’t get the point of restricting this.
4 Likes