How to (Part 1 — Revised): Swap Registration Flow to a Live View with Phoenix 1.6+

Mark

Published in

Geek Culture

3 min readSep 27, 2021

Metamorphic Built to Code screen grab. © 2021 Moss Piglet. All rights reserved.

Background

Another quick update for everyone that’s been following along with our series of posts.

In the original post, we walked quickly through updating our “dead” registration flow to a “live” registration flow with a Phoenix 1.5+ application.

Well, now Phoenix 1.6 is officially out and available (it’s awesome) and so I wanted to bring this post up-to-date alongside our Part 2 Revised post.

If you are not using Phoenix 1.6+, then hop on over to my original post to see how to easily swap your registration flow over to a Live View flow.

Please note: this post will work best if you’ve already familiarized yourself with the original.

With that said, let’s dive in:

Prerequisites

For this quick tutorial, we’ll assume the following:

You have read/followed along with the original post
You have a working Elixir/Phoenix app setup with the live generator (or add the appropriate code — see the docs).
You have ran mix phx.gen.auth Accounts Person people (you can substitute other names, I just prefer to treat customers on Metamorphic as people).
Optional: You have setup email confirmation with Bamboo (Phoenix 1.6+ actually comes out of the box with Swoosh built in, so if you want to use Bamboo then you may want to run the --no-mailerflag and configure separately)

Okay, we’re going to dive in at the end of our original post, to transition our already working Live View registration flow over to the new ~H sigil, and streamline everything.

Let’s go!

Step 1

We last left off with our your_app_web/person_registration_live/new.ex file like so:

Currently, this file is calling the render/1 function and rendering our separate .leex file located at your_app_web/templates/person_registration/new.html.leex.

We are going to update this render/1 function so that we no longer need the separate template file (making it work with the new .heex syntax), then delete that file once we’re satisfied that everything is still working.

Let’s proceed:

And that’s it! Things worth noting here is our updated render/1 function with:

~H sigil formatting (replacing the ~L sigil from older versions of Phoenix and Live View)
In line with the above note, the syntax for calling the form function in our template is now <.form let={f} for={@changeset} url="#" phx_change="validate" phx_save="submit"> and closing the form with the </.form> syntax. This syntax makes it clearer that you are actually calling a function with the name “form”.
The phx_hook="SavedForm" is an optional example and you can remove it if you don’t plan to implement any JavaScript hooks via the JavaScript interoperability documentation.

Once you are confident that everything is working as you’d like, you can go ahead and delete your old template file your_app_web/templates/person_registration/new.html.leex.

Conclusion

You did it!

If you’ve followed along with our original post and now this one, then you have successfully swapped your registration flow over to a Live View flow with Phoenix 1.6+ or Live View 0.16+.

Now when you move on to implementing a multi-step form in Part 2 Revised, you can speed through as you’ll already be familiar with most of the ~H sigil syntax.

Again, if you still need support for the ~L sigil (older Phoenix or Live View versions), or are curious about that, then you can still implement a multi-step form with our original Part 2.

Thanks for following along and I hope you enjoy your journey with Phoenix 1.6+ and Elixir.

Always open to improvements and thoughts.