Phoenix LiveView Multi-step Form - Post

[dbernheisel]

https://bernheisel.com/blog/liveview-multi-step-form

Have reactions to the post? Let's discuss!

[strokovnjaka]

Hi! I'm interested in what is the correct way of doing the first step, e.g. when a group is chosen displaying only its members (or something)?

[strokovnjaka]

I have a select tag and based on its selection different inputs should be displayed for entering different data. Do you do that in liveview/component or javascript? How are changesets handled? The code for MyAppWeb.EventLive.WhoComponent along with its leex would probably make things clear for me, can you make it public?

[dbernheisel]

I see, I do have a small example where if a checkbox is checked, then show or hide additional fields. This is managed by a LiveComponent in my example. Here is the gist:

• Have an Ecto Changeset
• Render the changeset form like normal
• Extract the changeset's field value and assign to the component
• Ask if that value is true/false/whatever, and if so render the additional form fields

    <%# IS ONLINE ONLY %>
    <div>
      <%= checkbox f, :is_online_only %>
      <div>
        <%= label f, :is_online_only, "Online-only Event" %>
        <p>Online-only event?</p>
      </div>
    </div>

    <%# ADDRESS AUTOCOMPLETE %>
    <div class="<%= if @is_online_only, do: "hidden" %>">
      <%= label f, :formatted_address, "Physical Address" %>
      <%= error_tag f, :formatted_address %>

      <div>
        <%= text_input f, :formatted_address, placeholder: "Enter a location" %>
      </div>
    </div>

Then, in my component that is rendering this form above:

  alias Ecto.Changeset
  use Ecto.Schema

  @primary_key false
  embedded_schema do
    field :formatted_address, :string
    field :is_online_only, :boolean, default: false
  end

  @impl Phoenix.LiveComponent
  def update(assigns, socket) do
    changeset = changeset(assigns.record, %{})

    {:ok,
      socket
      |> assign(assigns)
      |> assign(:changeset, changeset)
      |> assign(:is_online_only, Changeset.get_field(changeset, :is_online_only))
    }
  end

  def changeset(record, params) do
    # usual ecto changeset.
  end

Hopefully that helps!

[strokovnjaka]

Great, thanks, I really appreciate your help!

I have it a bit more complicated, with polymorphic entities that are user defined in db.
Say you have:

defmodule ExtremityType do
  schema "extremity_types" do
    field :name, :string
  end
end
defmodule Extremity do
  schema "extremities" do
    field :size, :float
    belongs_to :extremity_type, ExtremityType
  end
end
defmodule AnimalType do
  schema "animal_types" do
    field :species_name, :string
    has_many :extremity_types, ExtremityType
  end
end
defmodule Animal do
  schema "animal_types" do
    belongs_to :animal_type, AnimalType
    has_many :extremities, Extremity
    field :name, :string
  end
end

Then you begin to put together animals by defining:

• extremity types with names ["head", "leg", "tail", "house", "tentacle"],
• animal types [{"Lion", [head, leg, tail]}], {"Snail", [house, leg]}, {"Octopus", [head, tentacle]}]

So, when you want to define a specific animal, let's say Simba, you do:

• animal "Simba" belongs_to animal_type "Lion", with extremities [head: {size: 12}, leg: {size: 15}, tail: {size: 25}]

The form for inputing Simba (or any other animal) would consist of a select tag that lets you choose AnimalType.
After you choose "Lion", the form should display inputs for extremity_types of "Lion", i.e. head, leg and tail sizes.
I'm struggling to get the changesets to work.

Are you aware of any recipes for doing such "polymorphism"? I searched the internets but could not really find anything useful.

I would appreciate any hints or ideas.

Thanks again!

[dbernheisel]

Nothing comes to mind specific to polymorphism, but if you look at the blog post, there's a function I use assign_computed which can perform these DB queries based on the current values of your form.

  defp assign_computed(socket, changeset) do
    socket
    |> assign(:timezone, Changeset.get_field(changeset, :timezone))
    |> assign(:start_at, Changeset.get_field(changeset, :start_at))
    |> assign(:duration, Changeset.get_field(changeset, :duration))
    |> assign(:start_time_autocomplete, start_autocompletes(changeset))
    |> assign(:end_time_autocomplete, end_autocompletes(changeset))
  end

start_autocompletes/1 isn't in the blog post, but I imagine you'd take the values from the Changeset and perform database lookups to populate options for the form. Maybe this could inspire you for your problem set.

Maybe something like this:

defp assign_extremity_options(socket) do
  changeset = socket.assigns.changeset
  current_animal_type = Changeset.get_field(changeset, :animal_type)
  extremities_for_animal_type = AnimalContext.extremities_for_type(current_animal_type)
  assign(socket, :extremity_options, extremities_for_animal_type)
end

Then use that assign to populate your dropdown box.

[strokovnjaka]

Thanks for the idea, seems like the way to go, I might learn something along the way!

[mchl0208]

I have come to your example and although the explanation is extremely good, I have some doubts:

• for the submission, should the liveViewComponent be inside a form?

<div class="container">
  <%= form_for(@changeset, phx_validate: :validate, phx_save: :save %>
    <%= live_component @socket, WhoComponent, id: "who", event: @event, current_user: @current_user%>
    <%= live_component @socket, WhatComponent, id: "what", event: @event, current_user: @current_user%>
  </form>
</div>

• What is this function t("Next")/t("Back")?

I'm trying to implement something like this only without the step by step. I separeted view in live_view_components (a giant form)... but no event is fired... Any idea? :(

[dbernheisel]

1. I found that having one root <form> implies that you have to override how form submission works; this makes it more complicated for the multi-step UI since those other components have other fields that may be empty. In your case, if you don't have a multi-step UI, then I imagine you can have a root form_for. This would just be the default way Phoenix handles forms in dead views.

2. The function of t("Next")/t("Back") is a translated (t) button to navigate forwards and backwards on the steps of the form. the t() function is implemented elsewhere in my code. It's an alias to gettext()

Also, heads up, this article is a bit old now, and one of the biggest things that changed in LiveView is handling forms and components. You might not want to use live_component nested inside a form_for anymore and consider components instead, such as the form component. https://hexdocs.pm/phoenix_live_view/form-bindings.html