search

bmvantunes / youtube-2020-june-multi-step-form-formik

A repository with a multi-step form using Formik, Yup and Material-UI
https://youtu.be/l3NEC4McW3g
MIT License
101 stars 68 forks source link

How do I implement nested steps within an individual Material UI Stepper Step (A Step Within A Stepper Step [Child Steps within Parent Steps] ) #9

Closed CharlestonREM closed 3 years ago

CharlestonREM commented 3 years ago

I want to use nested Step Components within a Material UI Stepper Component

This is the behavior that the client expects. I am using Material UI, and Formik within a NextJS context. I am using the tutorial as a reference. image

Wireframes

Below are some wireframes that help illustrate what each the three top-level parent steps, and the third screenshot illustrates that the last parent step (step 3) has three, nested child steps.

Parent Step One - Tell Us About Your Property NO CHILDREN STEPS

This is the first step in the form. The customer will provide info on the land or standing structure that will have media produced (depending on there choice certain products will not be options they can select).

Screenshot 1: This is the first step in the form

image

Parent Step Two - Select Your Services A PORTAL WITH MULTIPLE PRODUCTS AND PACKAGES

This step will actually be a non-linear portal to seeing categorized products. There are four service categories with products and sub-packages. The goal is to be able to pick and select products and add them to the cart.

Screenshot 2: This is the homepage/ portal

image

Parent Step Three - Provide Some Info 3 CHILD STEPS

This step will actually be a non-linear portal to seeing categorized products. There are four service categories with products and sub-packages. The goal is to be able to pick and select products and add them to the cart.

Screenshot 3: This is the place we collect info within 3 child "steps"

image

Here is the rundown on the Material Ui Stepper Component. https://material-ui.com/components/steppers/

Here is a stack question I posted: https://stackoverflow.com/questions/64883191/how-do-i-implement-nested-steps-within-an-individual-material-ui-stepper-step-a

CharlestonREM commented 3 years ago

here's a link to our convo on the youtube video: https://www.youtube.com/watch?v=l3NEC4McW3g&lc=UgznujbWOFE-dexzLSJ4AaABAg

CharlestonREM commented 3 years ago

here is the link to the comment

image

image

CharlestonREM commented 3 years ago

I put up a live forked version with @bmvantunes suggested implementation

Here's a live example of my forked repo: https://youtube-2020-june-multi-step-form-formik-neon.vercel.app/

Here's my forked repo implementing multiple Formik Step elements I cloned from the original project: https://github.com/CharlestonREM/youtube-2020-june-multi-step-form-formik

@bmvantunes is this similar to what you had in mind?

How do I hide the steps in the UI (if this is what you had in mind)?

I am concerned because i want step 2 to be a portal that works like a four option checkbox. However when they click on one of the four service options (i.e. when they "check" it), it takes them to another step of options/choices of actual product packages. Really this is like dynamic steps added based on choice/selection... I don't know if that's more the route I should go.

CharlestonREM commented 3 years ago

UPDATE

I am posting a similar issue in the Formik-Material UI Repo: