Web UI Routing

Web UI Routing Mechanism

The nuxeo-app.html is the very top element of the Web UI.

Its main content is composed of:

a paper-drawer-panel which has:
a paper-listbox defining the left drawer menu buttons.
- collapsible iron-pages defining the left menu content associated to each menu button.
a paper-header-panel defining the main content with iron-pages:

<iron-pages id="pages" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">

    <nuxeo-slot slot="PAGES" model="[[actionContext]]"></nuxeo-slot>

    <nuxeo-home name="home" tasks="[[tasks]]"></nuxeo-home>

    <nuxeo-browser name="browse" id="browser" document="[[currentDocument]]" selected-tab="{{docAction}}" clipboard="[[clipboard]]"></nuxeo-browser>

    <nuxeo-search-results name="search" id="searchResults" search-form="[[searchForm]]"></nuxeo-search-results>

    ...

</iron-pages>

On iron-pages, you can see the selected attributes bound to the page property. When this page property changes its value, the iron-pages will display the content element which has the same name.

For instance, on nuxeo-home, when clicking a recently viewed document, it will call the navigateTo method

  this.navigateTo('browse', detail.doc.path);

defined on Nuxeo.RoutingBehavior. It will navigate to the /browse part of the Web UI and therefore display the nuxeo-browser element in the main iron-pages which shows the clicked document.

Routing Behavior

The Nuxeo.RoutingBehavior is a behavior which provides convenient methods such as urlFor to insert inner links in the Web UI.

For instance, nuxeo-document-tree.html which is the navigation tree in the left menu uses urlFor on each tree node to navigate to the associated document.

<a href$="[[urlFor('browse', item.path)]]" class="layout horizontal">
  <span><iron-icon icon="icons:chevron-left" class="flex"></iron-icon></span>
  <span class="parent">[[item.title]]</span>
</a>

Another example use case of the routing mechanism are:

the USER_MENU slot
when adding a new search