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

    View full-size slide

  2. A Wizard Form is


    a form that is broken into several steps.
    Erik Rasmussen – @erikras

    View full-size slide

  3. When to use a Wizard Form?
    •Really long forms

    •Dynamic forms
    Erik Rasmussen – @erikras

    View full-size slide

  4. Wizard Form Implementation
    •Array of "pages"

    •next = ()
    =>
    index += 1


    •previous = ()
    =>
    index -= 1


    •State Machine
    Erik Rasmussen – @erikras

    View full-size slide

  5. 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 full-size slide

  6. Erik Rasmussen – @erikras

    View full-size slide

  7. Wizard Form State Machine
    Erik Rasmussen – @erikras

    View full-size slide

  8. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

  9. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

  10. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

  11. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

  12. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

  13. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

  14. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

  15. Erik Rasmussen – @erikras
    Wizard Form State Machine

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. Erik Rasmussen – @erikras
    Centered
    centered.app

    View full-size slide

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

    View full-size slide