Stacked overlays and double returns?

[Faros65]

Hello,

I am rather new to XD and currently working on a desktop application design (no mobile variant). At the moment I've run into the following situation that I cannot resolve:

1. I have three screens (artboards) from which I can open the same window to create/input a certain new data item.

This works well with overlay and the return to previous function upon "Save".

2. The problem is that this overlay also has a "Cancel" button, upon which a pop-up of the type "Really cancel?" appears. "No" would be a return to the overlay to continue work (1 step back), "Yes" to the underlying artboard (i.e. 2 steps back).

Is there any way to achieve this with artboards, overlays, and connections? Thanks in advance!

[Rishabh_Tiwari]

Hi there,

Thanks for reaching out. I tried reproducing this use case on my end and if I understood this correctly we can achieve this. Please have a look at this sample prototype: https://xd.adobe.com/view/6ae8a620-9f80-43b4-b29c-34ade9dc535d-3fbb/

Let us know if this helps or if you need any further assistance.

Regards

Rishabh

[Spas K. · Accepted solution]

Hi Faros.

What you want can be achived using component states.

Your overlay card can be built as a component with 2 states.

Hitting Save would return to previous artboard.

Hitting Cancel would switch to the second state of the component, with your "Are you sure?" dialog.

The "Yes" button in the second state would be wired to 'Previous Artboard', and the "No" button will switch back to the default state.

Hope this helps.

Cheers!

[Faros65]

Hi Spas,

the overlay states hint was great. It works well now - thanks a lot!

All the best

Faros

(Side note: XD really put up a fight until I could achieve this. First I could not insert a component, the pop-up, properly into one state of the other component, the overlay, then it took some attempts until XD offered me to switch from the main state to the pop-up state through clicking on one single button, although it prefectly worked the other way round. Weird.)