Skip to main content
Shane
February 26, 2021

LAUNCHED: State management for prototypes

  • February 26, 2021
  • 205 replies
  • 21529 views

Just struck a pretty simple use case/scenario where I need the component to reset it’s state when I leave the frame. This has been touched on elsewhere, but this is such a common and key use that I thought I’d put it in it’s own thread.

Scenario:
I’ve got a dropdown menu with three items in it, with each item changing what columns are visible in a table and some other control states. I have three frames, each with a view of the table setup as it should be, and want to use the dropdown items to navigate between the frames - basically faking the table state change. All of this works perfectly, however when I navigate back to a previous table view state, the dropdown component is already in it’s open state - not what I want.

Current workaround: none that I can come up with (other than not using interactive components at all for this, and just using multiple frames for the dropdown open/closed states as I would previously)

Suggestions:

  1. Have a “reset component on leaving this frame” setting for instances of a component on a frame - useful for this situation and others, but needs to be a setting so that components that should keep their state between frames can do so (light/dark toggle maybe? Something like that).
  2. Do it all in a single frame, with the dropdown component changing the the state of the table component - no frame navigation required. Would work nicely for the particular use case I’m working with here, but not sure it would solve all similar situations.
  3. Do both 1 and 2. This solution is my preferred solution 😉 😆

EDIT:
Other threads that relate:

205 replies

J.D_Compton
New Member
August 5, 2021

These items are related, I believe … Keep interactive component state between frames

Shane
ShaneAuthor
August 5, 2021

Related but opposite, yes 😋 I think the threads are convergent in outlook, so happy for a mod to merge them if that makes sense. Saying that, they are linked at the head post already though.

Maksim_Timonov
August 25, 2021

may be add “default” state for comp. Reset to default state after: change page, delay time and ect.

My case: navigation. in 1 page i can change active state (swap comp) by click. for example tab menu. After move to next page and back - comp “remember” last state/last swap. I want to reset state if i move to this page.

Shane
ShaneAuthor
August 25, 2021

Sorry, don’t quite get that. For example, if you have a tab menu with three states, wouldn’t you have three comps (frames), one for each state, with the tab menu having a different active tab in each? I feel like in that case you wouldn’t want or need to reset the navigation “default” state for each frame, but maybe I’m missing something here…

SohrabNiroo
New Participant
October 6, 2021

I think the workaround is to create a frame in the size of the whole drop-down above all of the layers in dropdown, then make the opacity to 0 and give it an action of mouse leave= Close, the buttons will work perfectly under it and if the mouse be not in the area the drop-down closes natively, and remember for a state remembrance you just have to have 2,3,4,… closed DRP with different names of your DRP options and after adding it to your default frame in the interactive C choose which one to play.

SohrabNiroo
New Participant
October 6, 2021

If you give an example of what you did, maybe I can assist you more, I have dozen of dropdowns in my design and they all work perfectly, but remember if you want dropdowns to have actions like table change, the only way added to the above is to create a frame with each table and drop-downs actions above them as interactive components, this gives a nice DRP and actions but it will hunt your RAM, a small price to pay for perfection if you run on a good PC

Randy_Tyner
New Member
November 3, 2021

I have an prototype with a volume slider in every artboard. It has its own states and I can interact with it perfectly, but when I change artboards, it resets to the initial state of the volume slider and when I change back it goes to the value you I changed it too. It is really annoying.

I am designing an app for an automotive application. In it have applets on the screen that really want to keep their own state independent of the top level state. Currently that is not possible.

But I also want to be able to change the state of a component and have that event bubble up to the main artboard so that I can use that event to drive a change in the main artboard. ex: a component changes state and gets bigger and that triggers other components to change their state to get smaller. I can do that by creating every variation at the parent level, just annoying.

Randy_Tyner
New Member
November 3, 2021

Actually, I do not understand why an interaction on a component where the interaction is define inside the component doesn’t affect every instance of the component. It is one thing if I edit the variant of the instance, but If I drop an instance on an artboard, it should be honoring the current variant of the component… I guess that is the difference between dropping an instance of a component and dropping an instance of a variant of a component. I prefer to think of it as dropping an instance of the component.

Technically, if I have a component instance on several artboards and a subcomponent of that component instance has variants, I can change the subcomponent variant in the master of the subcomponent and it will update everywhere it is instanced is used unless overridden, so that logic exists in design time. It is just not maintained at runtime. At runtime, I can change the variant state of the deep subcomponent via an interaction and it is not the same as changing that variant state directly in the subcomponent at design time… I would think that design time and runtime should act the same way. Changes in the deep subcomponent stick in all instances unless overridden at a higher level.

Michele_Sogari
November 5, 2021

Yes, this issue is making me drop interactive components too.

Dave_Leggett
November 8, 2021

I think this is the right path, but not as a dropdown because more than one state may be available.

In the Design tab, within the component panel, there should be a checkbox to “Always load with these states”. Every time you revisit that instance, it will load with the states specified.