You're a Wizard Form, Harry.

A demonstration of how to use an XState state machine to manage which page the user is on in a wizard form.

Transcript

1. Infobip Shift 2021 – Zadar, Croatia
   You're a Wizard Form,
   Harry.
   Erik Rasmussen – @erikras
   

   View Slide

2. Forms?
   

   View Slide

3. View Slide

4. View Slide

5. A Wizard Form is
   
   
   a form that is broken into several steps.
   Erik Rasmussen – @erikras
   

   View Slide

6. When to use a Wizard Form?
   •Really long forms
   
   •Dynamic forms
   Erik Rasmussen – @erikras
   

   View Slide

7. Wizard Form Implementation
   •Array of "pages"
   
   •next = ()
   =>
   index += 1
   
   
   •previous = ()
   =>
   index -= 1
   
   
   •State Machine
   Erik Rasmussen – @erikras
   

   View Slide

8. View Slide

9. Potion Ocean - Requirements
   • Four pages:
   
   • Contact Info
   
   • Ingredients
   
   • Delivery Preference
   
   • Delivery Address
   
   • Validation on "Next"
   
   • ..but not on "Previous"!
   
   • Don't ask for Delivery Address if user chooses "Pick Up"
   Erik Rasmussen – @erikras
   

   View Slide

10. Erik Rasmussen – @erikras
    

    View Slide

11. Wizard Form State Machine
    Erik Rasmussen – @erikras
    

    View Slide

12. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

13. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

14. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

15. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

16. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

17. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

18. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

19. Erik Rasmussen – @erikras
    Wizard Form State Machine
    

    View Slide

20. Erik Rasmussen – @erikras
    https://react-
    fi
    nal-form.org
    REACT FINAL FORM
    

    View Slide

21. Form Library Handles
    •Accumulating our form values
    
    •Field-level validation
    
    •Block submit when there are invalid
    fi
    elds
    
    •Marking
    fi
    elds as "touched" when submit is
    blocked
    Erik Rasmussen – @erikras
    

    View Slide

22. Erik Rasmussen – @erikras
    Let's Code!
    

    View Slide

23. http://github.com/erikras/potionocean
    Erik Rasmussen – @erikras
    

    View Slide

24. Spells Cast
    •Split a long form into many smaller ones
    
    •Eased user cognitive load
    
    •Changed
    fl
    ow based on answers given
    
    •Flexible, robust logic
    
    •Easy to show to non-technical team members
    Erik Rasmussen – @erikras
    Flow
    

    View Slide

25. Erik Rasmussen – @erikras
    Centered
    centered.app
    

    View Slide

26. Erik Rasmussen – @erikras
    One month free – Premium Service
    centered.app
    Discount Code:
    SHIFT
    

    View Slide