Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You're a Wizard Form, Harry.

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.

Erik Rasmussen

September 08, 2021
Tweet

More Decks by Erik Rasmussen

Other Decks in Technology

Transcript

  1. Infobip Shift 2021 – Zadar, Croatia You're a Wizard Form,

    Harry. Erik Rasmussen – @erikras
  2. Forms?

  3. None
  4. None
  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
  8. None
  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