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 defined on Nuxeo.RoutingBehavior.

  this.navigateTo(detail.doc);

This will trigger the display of the nuxeo-browser element in the main iron-pages, showing 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 which is the navigation tree in the left menu uses urlFor on each tree node to navigate to the associated document.

<a href$="[[urlFor(item)]]">
  <span><iron-icon icon="icons:chevron-left"></iron-icon></span>
  <span class="parent">[[item.title]]</span>
</a>

By default, Web UI navigation is based on document path, but it can be configured to be based on document UID instead. To enable navigation by UID (instead of path), the org.nuxeo.web.ui.router.key.document property can overridden with an XML contribution as follows:

<component name="org.nuxeo.web.ui.properties.contrib">
  <extension target="org.nuxeo.runtime.ConfigurationService" point="configuration">

    <!-- Navigation by UID -->
    <property name="org.nuxeo.web.ui.router.key.document">uid</property>

  </extension>
</component>

Other use case examples of the routing mechanism are:

the USER_MENU slot
when adding a new search