Deeply nested breadcrumbs with sibling states, UI-

Question

I have inherited a project recently that uses UI-Router to route between states in a management portal site. There are certain complexities to this portal that require our states to primarily be siblings, rather than related parent/child. This has created an issue getting breadcrumbs to work using ncyBreadcrumb. Before I ditch ncy and develop something of my own, I am wondering if there is a way to resolve my issues.

The classic ui-router example is the contact list. You may have an index state, underneath which you have contacts.list and contacts.details. Both of the contacts states are nested within index which probably has some common layout (and could well be an abstract state). Now, in this simple two level hierarchy, it is fairly strait forward to use ncyBreadcrumb and force the detail state to be a "breadcrumb child" of the list state.

My portal application has a little more complexity. We have a root portal state, which contains our basic layout...a horizontal bar at the top, a navigation bar to the left side, and the main content area (our ui-view). We have several listing states, which show tables of information sourced from a "root" context. We also have several detail states, which show some panels containing details of the selected item, say "cluster", and they also show a table of the child items for that particular item. All of our detail views can be routed two in one of two ways, and depending on exactly how the user navigates through the portal, the breadcrumb may need to show more than a two-level hierarchy of states.

Here is an example of a shorter, direct navigation to an instance detail:

1. User logs in, starts at portal.environments, sees environment details and subenvironments table.
2. User clicks Instances in left navigation, is routed to portal.instances, sees instances table containing all instances in the entire system.
3. User clicks an instance, is routed to portal.instanceDetails, sees the details for that instance.

In this state, the breadcrumb should show something like:

Instances > XYZ Instance Detail

Now, that is one of two ways of getting to the detail on a cluster. The other way is to drill down through all of it's parents. Clicking the Instances menu item in the sidebar shows you every instance in the system under management. Instances can be grouped into auto scaling groups, which can be organized into clusters, which are themselves organized into stacks, which are themselves organized into sub environments, which are themselves organized into environments. Each of these levels can either be navigated to directly from the menu in the sidebar, showing every one of that item in the system, or they can be navigated to from their parent.

So, again with our instance, we could also do:

1. User logs in, starts at portal.environments, sees environment details and subenvironments table.
2. User clicks a sub environment in that table, is routed to portal.subEnvironmentDetails, sees the details for that sub environment and a table of all of the stacks in that sub environment.
3. User clicks a stack, is routed to portal.stackDetails, sees the details for that stack and a table of clusters in that stack.
4. User clicks a cluster, is routed to portal.clusterDetails, sees the details for that cluster and a table of auto scaling groups in that cluster.
5. User clicks an auto scaling group, is routed to portal.autoScalingGroupDetails, sees the details for that autoscaling group and a table of instances in that group.
6. User clicks the same instance, and is routed to portal.instanceDetails, sees the same details as in the first, more direct path presented above.

In this case, the breadcrumb should be more like this:

Environments > Sub Environment A > Stack B > Cluster C > ASG D > Instance XYZ

Further, one can enter the chain at any point. The navigation could be stacks -> stack -> cluster -> asg -> instance, or just clusters -> asg -> instance. Because of the rather non-structured variations by which a user could navigate to the same exact item, we are having trouble getting ncyBreadcrumb to work. For one, while I could set the parent of a state dynamically in the breadcrumb config for that state...how do I set the states of all the parents up the chain? So far, I've only been able to get two levels of breadcrumb working...and usually the link to the parent state is incorrect (it is missing details to route properly).

Is it possible to use ui-router and ncyBreadcrumb to generate breadcrumbs for such a flexible navigation? Detail states are not children of any one state...they are children of at least two parent states...depending on how navigation was initiated. The parent of the state may itself be a child of something else, again depending on exactly how navigation was initiated.

Answer 1

What I did is:

.state('app.visit', {
  url: "/visit/:id?date",
  templateUrl: "views/dialog.newvisit.html",
  controller: 'DialogNewVisitController',
  resolve: {
    currentState: function($rootScope) {
      $rootScope.saveCurState();
    }
  },
  ncyBreadcrumb: {
    label: 'Visit',
    parent: function($rootScope) {
      return $rootScope.getCurState().name;
    },
  }
})

And them somewhere defined:

$rootScope.getCurState = function() {
    return $rootScope.curState;
}

$rootScope.saveCurState = function() {
    $rootScope.curState = $state.current;
}