Triggering an interactive modal from a side modal

[ankigupta92]

Hello, I am looking for feedback on guiding users through series of actions by using side modal and regular modal. In one of the options I am exploring, the side modal has a CTA that triggers a regular modal to create additional fields. This way the user can trigger the add field modal multiple times to keep adding new fields and when ready will click on the side modal CTA to save all the information at once. I have had to explore this additional modal pattern because of the amount of info that might be needed per new field. Here's the figma link showing that flow.
I also have additional design options explored in the same section, would love to get some interaction design guidance on this!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Side Modal with success/error messaging - Answer (updated: 01/19/2023, similarity score: 87%)
• Adding filter with a variety of filtering options (updated: 06/06/2023, similarity score: 86%)
• Radio Group with actionable sub options (updated: 07/01/2022, similarity score: 86%)

[serifluous]

Hey @ankigupta92 ! A Modal on top of a Side Modal is possible if you've run out of other options, but it's probably not ideal.

A few questions first:

1. Can data extension fields be edited after the data extension is created? Or no part of the data extension can be edited after its created?
2. What effect does the user selecting a data extension or creating a new one have on the screen? Does that populate the list of required / optional fields underneath it? Is the user required to make the selection/creation in order to do something else?

[ankigupta92]

1. Data extension fields can only be edited until the "create data extension" CTA on the side modal is clicked. Once the CTA is clicked and the side modal closes, every field in the side modal becomes read-only. (I am proposing the individual data extension fields in a regular modal because to create 1 data extension field user might need to provide upto 10 additional detail fields and it will not scale well keeping it all in one side modal)
2. Dependencies are contextual to destination selected. There might be a dependency on the rest of the page not loading until data extension is created or selected. Another dependency is we need to save the new data extension separately for validation errors.

[serifluous]

For #2: I could still use a little help understanding the relationship between data extensions and destinations. Trying to read the docs around this—are data extensions only relevant when Salesforce Marketing Cloud is selected as a destination? Feel free to sign up for office hours if it'll be easier to walk through the flow in person!

[ankigupta92]

Sounds good, I signed up for next week's OH!

[roxanagomez]

Hey @ankigupta92 - just wanted to share the office hours recording with you in case you'd like to revisit any of our conversations. Here's the video, you can also find it in the #help-design-system channel. A small recap:

• Explore opportunities to break down user tasks and simplify the flow to reduce reliance on stacked modals or side tracks that interrupt the main task. Consider whether complex inputs could be handled in a dedicated step or page instead.
• If restructuring isn't feasible, and all interactions must stay within the side modal, then using a modal on top of the side modal is acceptable, as a fallback, not a first choice.

Thanks again for coming to office hours!