Building Real-Time Web Applications with Phoenix LiveView/

...

/

The Modal Component

The Modal Component

Learn how LiveView components are used to manage LiveView with state management in this lesson.

We'll cover the following...

While we’ll take a deeper dive into components in upcoming lessons by building our own, the following walk-through will give us a basic understanding of what LiveView components are, how they are used to organize LiveViews, and what role they play in LiveView change management. We’ll understand them as yet another LiveView feature we can use to write simple, organized code that handles complex single-page activities. With that understanding, we’ll be prepared to build our own components in the following lessons.

Layer architecture of the generated code

We’ll begin with a quick look at how the generated component code is organized into layers that compartmentalize presentation and state. This figure shows how the pieces fit together:

The Product Edit page will have three distinct layers. The first layer is the background. That’s implemented with the base index template and Index LiveView, and it’s responsible for rendering the products table in the background. It’s the full LiveView we’ve been examining.

The next layer is the modal dialog. Its job is to provide a window container, one that prevents interaction with the layers underneath and contains the form component. It consists of HTML markup with supporting CSS and a small modal component. Components are like little LiveViews that run in the process of their parent LiveView. This first component will render a container with arbitrary markup and handle events for closing the dialog.

The final layer is the form component. Its job is threefold: it holds data in its socket, renders itself, and processes messages that potentially change its state.

Now, let’s dive into the modal dialog layer.

How to call the modal component

The code flow that renders the product form modal is kicked off in the very same Product Index template we’ve been examining. If the ProductLive.Index LiveView’s state contains the :edit or :new live-action, then the index template will invoke some code that renders the modal component.

Here’s another look at the lines of code that calls the modal component from the index template:

Press + to interact
<%= if @live_action in [:new, :edit] do %>
   <%= live_modal @socket, PentoWeb.ProductLive.FormComponent,
      id: @product.id || :new,
      title: @page_title,
      action: @live_action,
      product: @product,
      return_to: Routes.product_index_path(@socket, :index)%>
<% end %>

These few lines of code behave differently than the code we’ve traced so far, so we’re going to take our time to walk through what’s happening. They get us moving toward our product form component. There are three concepts crammed together tightly here, and we’re going to take them apart one piece at a time.

The first concept

The first concept is the conditional statement predicated on the value of the @live_actionassignment. You’ll use this technique to selectively display data on a page depending on what route a user has navigated to. Recall that the ...