Hello, i saw somewhere someone create a toggle (boolean) to turn a property on or off e.g show icon or hide icon, and on toggling that boolean, another toggle would switch off.
I was wondering if anyone has done this and where i can go to learn how to do it.
It would be v helpful.
Another example:
I have two property boolean switches.
One is to show/hide an orange pin.
One is to show/hide a grey pin.
I would never show both at the same time.
How can i create a condition whereby if i decide to toggle and show the orange pin, it automatically switches the other boolean toggle and switches grey pin off?
Hi @Ming_Liu, Thank you for reaching out about boolean properties. It’s wonderful to hear that you’re looking for learning materials, and I’ll do my best to assist you!
I understand that you have a component set with two boolean properties. If you already have properties on your component set, using the [Change to] action could be an option to show/hide orange and gray pins.
I hope you find these resources helpful, but I may have overlooked something. In that case, could you please tell us more? Would you mind sharing a quick video recording or screenshots of your current design in progress? This may help the community better understand what you want to achieve.
If others from our community have different approaches, feel free to jump in! We welcome your ideas and insights.
Hey there, thanks so much for replying.
That’s v useful to know but i was more talking about at the design stage and not in the prototyping stage.
What i’m looking for is this:
When I’m designing i toggle the redpin on, the graypin automatically toggles off. You can’t ever have both ON, it’s one or the other. That way anyone in my team can’t switch both pins on. Is there a way to do that?
One idea that comes to mind is to use interactive components. Interactive components are an extension of variants, which means you can add instances of interactive components to your designs just like any other component. The great thing is the instances already have interactions applied for prototyping.
I understand that you’re looking to have interactions between the redpin component’s boolean property and the graypin component’s boolean property without using prototyping. It may be a bit challenging to achieve those interactions without prototyping.
I’ll check with my team internally to see if we can offer more assistance on this. Once we have any information, we will update you!
We also welcome any insight or suggestions from our community, so please feel free to jump in!
Would it be possible to do this with only one switch to flip from one to the other? It’s nice to have it automatically switch the other one off but is there a way to do this were it’s a only showing a single switch?
Hey @Vince11, wonder if you wouldn’t mind giving advice to my use case?. I have 4 map pins, only one should ever be visible at a time - turning one on would hide any of the other pins that are visible. I can’t quite figure out how to do that with the solution you posted. Would I need each pin to have a visible and non visible state, and then stack them like you suggested?
Hello @Hensmon, I tried out the method suggested by @Vince11 (Build Pin Component > Build Pin Stack Component). Using this approach with 4 pins will yield the following result.
I’m not sure if I understand your use case correctly. I would create the four different pins as variants of the component. Then you can simply display the desired variant via a dropdown.
Of course. That would simply be the first step: Build the switch component with the values true and false. You can then place this component as often as required and each switch can be controlled individually.
