This is a simple example of utilizing the StatesLanguage library with LiveView for a multi-step form.
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.pngand the resulting png
I'm not going to go over how to setup LiveView, their docs do a great job of that.
To get a better understanding of how this is implemented the relevant files to review are example_workflow.json, views/workflow.ex and workflows/example_workflow.ex.
I've tried to provide some decent documentation module and function docs to explain what's going on in the files listed above.
If you have any questions feel free to ask in the ElixirForum thread, or open an issue in this repo or the StatesLanguage repo.
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
mix deps.get - Install Node.js dependencies with
cd assets && npm install - Start Phoenix endpoint with
mix phx.server
Now you can visit localhost:4000 from your browser.