Unpoly lets you use overlays to break up a complex screen into subinteractions.
Subinteractions take place in overlays and may span one or many pages while the original screen remains open in the background. Once the subinteraction is done, the overlay is closed and a result value is communicated back to the parent layer.
Imagine a simple application that manages projects and companies:
The application could look like this:
The follow case illustrates the problems with a sequential screen flow:
We can improve this flow with a subinteraction:
The diagram illustrates the difference between the two control flows:
See closing overlays for an extensive explanation.
A common callback is to reload an element in the parent layer:
<a href="/companies/new"
up-layer="new"
up-accept-location="/companies/$id"
up-on-accepted="up.reload('.company-list')"> <!-- mark-line -->
New company
</a>
<div class="company-list">
...
</div>
Another common callback reloads <select>
options and selects the new foreign key.
<select name="company">...</select>
<a href="/companies/new"
up-layer="new"
up-accept-location="/companies/$id"
up-on-accepted="up.validate('select', { params: { company: value.id } })"> <!-- mark-line -->
New company
</a>
This example uses up.validate()
to preview a form submission without persisting the results.
You may also want to navigate to a new screen once an overlay was accepted:
<a href="/companies/new"
up-layer="new"
up-accept-location="/companies/$id"
up-on-accepted="up.navigate({ url: '/projects/new?company_id=' + value.id' })"> <!-- mark-line -->
New company
</a>
You already have a CRUD interaction for companies You can now embed the existing company form into your project form
The embedded interaction does not need to know when it's "done" or what to do when it's done. Instead the parent layer defines an acceptance condition and callback action.