Web UI

Web UI Routing

Updated: January 16, 2017 Page Information Edit on GitHub

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>

     ...

</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, 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>
</a>

Another example use case of the routing mechanism are:

3 months ago Karin Touchie NXDOC-1034: Review Web UI documentation
4 months ago GitHub Fix capitalization
4 months ago Guillaume Renard NXDOC-1012: add documentation on search + introduce routing + deployment
4 months ago Guillaume Renard NXDOC-1012: fix wrong senetence + review date
4 months ago Guillaume Renard NXDOC-1028: document routing mechanism
4 months ago Guillaume Renard NXDOC-1028: add screenshot for routing in navigation tree
4 months ago Guillaume Renard NXDOC-1054: reorders pages and adds labels
History: Created by Guillaume Renard