Best practice for Master/Detail pages using ViewPorts?

Help Requests
1

In the Aurelia documentation on ViewPorts, the use an example that would imply a screen in which you have a list of items on the left and the detail of a selected item on the right.

config.map([
    { route: 'users', name: 'users', viewPorts: { left: { moduleId: 'user/list' }, right: { moduleId: 'user/detail' } } }
  ]);

In my mind, the VM for each ViewPort would have its own model. The left VM would have a users array and the right VM might have a user. However, if the user of the application selected a different user from the list, the detail would need to update.

I’m curious how this works with multi-viewports. Do you have to use events and the eventaggregator to communicate between the two viewports and VMs or is there some other means of accomplishing this?

1 Like
2

Maybe @jods4 or someone can help comment :smile:

For me, I normally use hierarchical router viewports only. It’s more straight forward to think/reason about sometimes. At the beginning of a project, just need to lay a routing table with all possible routes and good to go (far).

1 Like
3

You can take a look at https://vimeo.com/ondemand/beginningaurelia/180217788?autoplay=1

If I remember correcly it use a list on a side you can pick and display the details, should be explained in this video

1 Like
4

Does anyone have any more input on this? Does anyone actually use viewports? If so, do you use them in a master/detail scenario or do you typically use viewports independently of each other?

5

Hi Roddharris,

Yes, I use ViewPorts extensively in the app I am working on at present - and mostly in the master-detail scenario. As to communication, I used to use the Event Aggregator with custom messages for communication between the components in each ViewPort. However, at present I get the Detail view to load data directly from APIs based on route data. I found using EA made the components too dependent for this use-case.

In the example below I have a “panel” ViewPort which is a slide-out panel which lets me edit some of the content being displayed in the “main” ViewPort.

image
image793Ă—499 36.1 KB

The route to open both ViewPorts is:

image

The “panel” ViewPort ViewModel loads the agreement from an API using the route data then allows the user to edit the agreement. When the user hits the “Save” button in the “panel” - the API is called to update the agreement and router directed to a new route which just displays the “main” viewport which then reloads the agreement from API.

In some other scenarios I have used the Aurelia Store to allow different ViewPorts to maintain state.

I’m no expert by a long shot, so there are probably better ways to do this!

2 Likes
6

Is this Aurelia 1 or 2? I am currently using 2

7

Still on Aurelia 1 for this project. J