Best practice for column based UIs?

Hello!

This is my first post here, I tried to research as much as possible and didn’t find anything like our use case and after a few days of experiments I decided to move the conversation here.

So we have a part of our application what consists of a couple of lists displaying nested data and a form for editing. A simple recreation:

The first column has a list of groups, the second has a list of items that can be assigned 0, 1 or more groups and the form in the third column is used for editing an item or to create a new one.

I realise that this is a bit too specific but the concept can be applied for other scenarios.

Whatever I do I can’t escape the need of loading the models for the first two columns multiple times with RSVP.Hash and copying layout code around instead of using {{outlet}} for the nested routes.

For example

  • the route listing all items, should also list the groups, but there’s no logic in nesting them in this case
  • the route listing the items of a group, on the other hand can easily use nesting
  • and then there’s the form which has two states for editing and creating an item, but with this structure it also needs to display the groups and items and mark which are selected.

I think it would help if you explained what kind of application your trying to build more thoroughly… whats it actually going to be used for in the real world and what features do you need it to accomplish? Based on the screen shot and descriptions its not quite clear to me what your trying to solve.

This module is a contact manager of sorts. The users can:

  • add, edit delete contacts trough the form on the right
  • view the contacts in the list in the middle
  • create, edit and delete groups from the list on the left
  • assign groups to the contacts
  • list only contacts for specific group by clicking on it, and the related contacts are listed in the middle again

It’s simple crud, but I can’t come up with a good way to apply Ember’s way of handling data and routes on the design with those 3 columns. And we have another action using the same structure for another data type,so I am tryimg to come up with somewhat universal solution for this case.

I’ve done similar linked lists and blocks of forms that pass data around with Backbone in the past, but it’s way different.

I hope it’s clear enough now. I can’t go in too much more detail.

So basically ‘the Ember way’ would be to have 3 routes. Each managing their own model.

  this.route('groups', function(){
    this.route('items', {path: ':groupId'}, function(){
      this.route('item', {path: ':itemId'});
    });
  });

The templating is tricky because you have this unconventional 3 column UI, but here’s how you could solve it if you’re using bootstrap grid system

//groups.hbs
<div class="row">
    <div class="col-xs-3">
        //groups listing here
    </div>
    <div class="col-xs-9">
        {{outlet}}
    </div>
</div>

//groups/items.hbs
<div class="row">
    <div class="col-xs-6">
        //items listing here
    </div>
    <div class="col-xs-6">
        {{outlet}}
    </div>
</div>

//groups/items/item.hbs
//item stuff here

Thank you very much for replying, our designer did the layout beforehand and I didn’t even think about adjusting the structure like that.

Unfortunately, there’s still the case when I need to display all contacts no matter in which group they are and also there can be contacts that do not belong to a group at all. I am sorry, I got wrapped up in the explanation and didn’t make that clear enough.

At first we went about it using one template and 3 components for each category feeding data to them using RSVP.Hash in the routes, however that lead to code repetition and unnecessary requests to the server.

Sorry for the very late reply. I really turns out we just did not understand that well how ember worked.

We were able to use something very similar to what was proposed, without needing to load multiple models on one route. The was only a little tweak to accommodate the case where all items should be displayed and edited.

Here is a Twiddle with a little simplified version of the final solution:

Thanks again for the input! :slight_smile: