How to apply variable on same instance of the component but use it diffrently

Hi everyone,

I’ve designed a textbox library that includes three states: normal, active, and disabled. I’ve assigned a variable string to each of these states. In my project, I’ve duplicated the textbox component multiple times within the same form and linked the variable to all instances.

However, I’m encountering an issue in preview mode. When one instance is clicked and changes its property from the normal state to the active state, all other instances also transition to the active state simultaneously.

I’ve considered creating multiple variables for each textfield, but this approach becomes impractical when dealing with a large number of textfields (more than 100) across the design.

I’d greatly appreciate any suggestions or solutions the community might have to address this challenge. Your help is invaluable!

Thank you

Hi.

Apparently, if you’re going to link them on the same variable and then change variable settings after an action, it will, of course, set for all the instances with the same variable.

What you can do if you do not want to use variable is to directly put the interaction on the instance.
image

The con is that you can’t use any condition in this instance (if you want to connect or change this instance when another instance is being interacted because that’s how variable works).

Hi @Raphael_M,
Thanks for your response, you have understood exactly what I wanted to say but can you please explain briefly what you are trying to say?

I’m sorry. My explanation is going all over. :sweat_smile:

So what I’m saying is all of the properties connected to the string-variable you are going to change will also change because that’s how variable works.

So, if you want to change a property of a specific instance, you either use another variable or just directly change it using the “change to” in the prototype.

image

Hi @Raphael_M,
Thanks for the reply.
Just to give you more context of what I am trying to do look at the video–


so as I showed in the video. I have created one master component and used its instances in the form. On clicking the Enable button, I can disable all input fields. This can be easily achieved by assigning the same variable to every instance.

The Variable I have created as—

Now the problem is if you see in the video, all the input field properties are getting changed from normal to active state, even if I click on any one input field. One way as you suggested creating an individual variable for each instance which will cause a problem in the big designs containing 1000+ input fields.

This is what I have given for the Switch Button—
Screenshot 2024-02-02 at 5.06.01 PM

Hope this makes more clear. Let me know if you have any solutions.

Thanks.

Hi.

Do you really have to use variables for this? Because you are directly setting everything connected to the Outline variable. If you want to only prototype one instance, don’t use variable. Like I said, its either you create multiple variables or manually prototype each instances.

So how does it happen?
Since you put all instances the same variable, and then you change the Variable’s value upon an action all Instances that has that variable connected to it will also change.

It’s like you are putting a “class name” on it and then you change the styling of the “class name” and then wonder why the other elements with the same “class name” also change.

So what you need to do is remove the set variable and just use the change to.

Hi @Raphael_M,
I understood what you are trying to say, but using variables for the instances is helpful when you have a lengthy form with 20 input fields. As shown in the video, clicking on one toggle switch disables all the input fields simultaneously because I have set the same variable for all the input fields, and in the prototype, it is set to disable mode in one click.
Thank you.

Hi.

If I’m not mistaken, this should be the problem you are trying to solve. I believe you also understood what I’m saying regarding the variables and has given you a way to prototype only one instance.

And indeed, variables are helpful for prototyping multiple instances/elements simultaneously in 1 action. Hope this make things clear.

Thank you!