Skip to content
This is a simple example of utilizing the StatesLanguage library with LiveView for a multi-step form.
Elixir CSS JavaScript HTML
Branch: master
Clone or download
Latest commit e556cf4 Dec 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets initial commit Dec 5, 2019
config
lib tweak some doc layout Dec 5, 2019
priv initial commit Dec 5, 2019
test initial commit Dec 5, 2019
.formatter.exs initial commit Dec 5, 2019
.gitignore initial commit Dec 5, 2019
README.md tweak some doc layout Dec 5, 2019
example_workflow.dot initial commit Dec 5, 2019
example_workflow.png initial commit Dec 5, 2019
mix.exs initial commit Dec 5, 2019
mix.lock initial commit Dec 5, 2019

README.md

StatesLanguageLiveView

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

Example Workflow

About

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.

Follow-up

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.

Use

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.

You can’t perform that action at this time.