The ProductLive.Index LiveView also supports the Product Edit and Product New features by using the change management workflow to alter the socket state with event handlers. In this way, a single LiveView can easily handle multiple pieces of CRUD functionality.

We’ll examine the change management workflow now, starting with the Product Edit functionality.

How to route to the Product edit

Let’s trace the code that fires when we point our browser at the /products/:id/edit route, starting with the route definition.

The router contains the following generated route for the Product Edit feature:

Get hands-on with 1400+ tech skills courses.