Web UI

Web UI Routing

Updated: March 18, 2024

Web UI Routing Mechanism

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

Its main content is composed of:

 <iron-pages id="pages" selected="[[page]]" fallback-selection="error" attr-for-selected="name" selected-attribute="visible" class="flex">


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


     <nuxeo-collection-results name="collection" id="collectionResults" on-navigate="_navigateFromCollection"></nuxeo-collection-results>

     <nuxeo-admin name="admin" user="[[currentUser]]" selected-tab="[[selectedAdminTab]]" entity="[[entity]]"></nuxeo-admin>



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, when clicking on a collection in the Collection left menu, it will call the _navigateFromCollection method:

page('/browse' + e.detail.doc.path);

defined by routing.html. 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>

Another example use case of the routing mechanism are: