This is a simple example of utilizing the StatesLanguage library with LiveView for a multi-step form.
Creating visual representation
I've generated a
example_workflow.dot file and
example_workflow.png using the following commands.
mix states_language.dot priv/state_machines/example_workflow.json > example_workflow.dot dot -Tpng example_workflow.dot -o example_workflow.png
and the resulting png
I'm not going to go over how to setup LiveView, their docs do a great job of that.
I've tried to provide some decent documentation module and function docs to explain what's going on in the files listed above.
This is a very rudimentary use-case. All the templates are inline in our
example_workflow.ex state machine, and the live view rendering simply replaces the whole form area. There are much better ways to utilize LiveView for rendering complex forms and handling errors, but the main point of this repo is to showcase utilizing StatesLanguage alongside LiveView. I leave the process of productionizing this to the reader.
To simulate the error transitions, enter either a "1" or a "2" into either of the account lookup types, phone number or account id. Any other values will result in a successful lookup.
To start your Phoenix server:
- Install dependencies with
- Install Node.js dependencies with
cd assets && npm install
- Start Phoenix endpoint with
Now you can visit
localhost:4000 from your browser.