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
2. Forms?
5. A Wizard Form is a form that is broken into several steps. Erik Rasmussen – @erikras
6. When to use a Wizard Form? •Really long forms •Dynamic forms Erik Rasmussen – @erikras
7. Wizard Form Implementation •Array of "pages" •next = () => index += 1 •previous = () => index -= 1 •State Machine Erik Rasmussen – @erikras
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
10. Erik Rasmussen – @erikras
11. Wizard Form State Machine Erik Rasmussen – @erikras
12. Erik Rasmussen – @erikras Wizard Form State Machine
13. Erik Rasmussen – @erikras Wizard Form State Machine
14. Erik Rasmussen – @erikras Wizard Form State Machine
15. Erik Rasmussen – @erikras Wizard Form State Machine
16. Erik Rasmussen – @erikras Wizard Form State Machine
17. Erik Rasmussen – @erikras Wizard Form State Machine
18. Erik Rasmussen – @erikras Wizard Form State Machine
19. Erik Rasmussen – @erikras Wizard Form State Machine
20. Erik Rasmussen – @erikras https://react- fi nal-form.org REACT FINAL FORM
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
22. Erik Rasmussen – @erikras Let's Code!
23. http://github.com/erikras/potionocean Erik Rasmussen – @erikras
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
25. Erik Rasmussen – @erikras Centered centered.app
26. Erik Rasmussen – @erikras One month free – Premium Service centered.app Discount Code: SHIFT