...

/

Subdividing Complex Views with Layouts

Subdividing Complex Views with Layouts

Learn how to add a common form view and implement the functionality of creating new contacts.

With our control panel in place, we want to be able to click the “New contact” button and display a modal form to create a new contact. We’ve already got a modal form to manage contact data. Our edit view contains a form and manages error message displays. If we think about it, that’s most of the behavior we want in our form for new contacts. In fact, the main difference will probably just be the title. We want to display “New Contact” instead of “Edit John Doe.”

Difference from our edit modal

Since we’re sharing a lot of functionality, such as error display management, but need some features to behave differently, e.g., the displayed title, the best approach would be to have some sort of form view that would contain the common logic. Our edit and new contact views could extend from that and add their specific behavior. Here’s the idea:

Press + to interact
Duplicated behavior vs. shared behavior
Duplicated behavior vs. shared behavior

In the current situation, we’d have to duplicate common functionality, such as error display management within the edit and new contact views. However, if we instead extend from a common view as on the right, we can define the shared behavior there and extend that view to create our new contact and edit views. All that we’ll have left to do in our new contact and edit views is to specify the functionality that is specific to that view. Sounds pretty good, doesn’t it?

...