I’m working on a product card that contains multiple containers, each with form elements like text inputs, dropdowns, etc. I want to allow users to edit a single field at a time directly from the product card. For example, if a user clicks on the container with the “Name” text input, it should smoothly transition from read mode to edit mode.
Currently, I’m using an app variable to track whether a container is in edit mode. However, I don’t want to create a separate variable for each field. Using just one variable activates edit mode for all fields at once, which isn’t ideal.
What would be the best approach to manage edit mode for individual fields?
One thought I had is to change the data type of your existing App Variable to be an Integer - and then change the value to 0 if nothing is in edit mode, then 1, 2, 3 and so on based on the field which is in edit mode. You can then assign a specific integer value to each field, and use this integer value in the logic to determine if this specific field is in edit mode or not.
However, this may be difficult for later upkeep, especially if there are several developers working on the same solution, as this is not a super intuitive approach. The most intuitive is of course with boolean values, but this would require many different variables, as you said.
One concept that could help if you don’t choose the Integer option is to make use of View Variables, to avoid cluttering your App Variable list. You can learn more about View Variables from our webinar, starting from timestamp 32:07 in the video.
I wrote app variable by mistake. I use view variable. But as I see I must create several view variables as well.
My solution now
What I did now is to create a View Variable (String) which holds all the fields and whether or not they should be in edit mode: “name:true;description:false;model:false…”, and then convert this string into a dictionary. So I can check what field should be in edit mode.
However, how can I update this dictionary easily? I want one general action that updates the dictionary based on what field is being edited. For example if model is being edited, then name must be set to false in the String and model set to true.
This could be done with a JavaScript function inside an Update Object action node, for instance? With a general update action which uses an action parameter to pass in the field which should be set to true. The function can then set everything to false first, and then switch one item in the dictionary to true based on the input from the action parameter.