HOWTO: Customize Slots

Concept

Nuxeo slots are mechanisms which extend part of the Nuxeo Web UI. A couple of nuxeo-slots are hardcoded in the web-ui source code in order to insert your own HTML elements and extend the Web UI to meet your specific needs.

The concept is simple. Let's assume we introduced the following slot somewhere in the Web UI:

<nuxeo-slot slot="MY_SLOT_NAME" model="[[mySlotModel]]"></nuxeo-slot>

then you can easily define your own content with:

<nuxeo-slot-content name="defaultMY_SLOT_NAME" slot="MY_SLOT_NAME">
  <template>
      <my-element my-element-property=[[aPropertyFromTheSlotModel]]></my-element>
  </template>
</nuxeo-slot-content>

and this content will be inserted in the DOM right before where the nuxeo-slot is located.

You can see that my-element has its my-element-property bound to aPropertyFromTheSlotModel which is made available by the nuxeo-slot model. The [[mySlotModel]] is an object which has a aPropertyFromTheSlotModel property.

For a better understanding, please refer to the DOCUMENT_ACTIONS and where we concretely detail how additional document actions are added by the Nuxeo Drive addon.

Summary

Here are the nuxeo-slots available in the Nuxeo Web UI.

Details

Document Browsing Slots

The following slots allow you to extend available pages and actions when browsing a given document. They are located in nuxeo-browser.html.

DOCUMENT_ACTIONS

This slot defines the available top right actions to be performed on the current document such as Add to collection, Share, Export, etc.

A typical use case for extending the Web UI is you'd like to add new document actions. Let's have a look on how it is done with the Nuxeo Drive addon which adds a new action to synchronize a document with the local file system.

First, the DOCUMENT_ACTIONS nuxeo-slot is defined in the nuxeo-browser.html element like this:

<div class="document-actions">
  <nuxeo-slot slot="DOCUMENT_ACTIONS" model="[[actionContext]]"></nuxeo-slot>
</div>

and the web UI defines the default slot content in nuxeo-document-actions.html

<nuxeo-slot-content name="defaultDocumentActions" slot="DOCUMENT_ACTIONS">
  <template>
    <nuxeo-add-to-collection-button document="[[document]]"></nuxeo-add-to-collection-button>
    <nuxeo-favorites-toggle-button document="[[document]]"></nuxeo-favorites-toggle-button>
    <nuxeo-share-button document="[[document]]"></nuxeo-share-button>
    <nuxeo-notifications-toggle-button document="[[document]]"></nuxeo-notifications-toggle-button>
    <nuxeo-clipboard-toggle-button document="[[document]]" clipboard="[[clipboard]]"></nuxeo-clipboard-toggle-button>
    <nuxeo-lock-toggle-button document="[[document]]"></nuxeo-lock-toggle-button>
    <nuxeo-preview-button document="[[document]]"></nuxeo-preview-button>
    <nuxeo-export-button document="[[document]]"></nuxeo-export-button>
    <nuxeo-download-button document="[[document]]"></nuxeo-download-button>
  </template>
</nuxeo-slot-content>

Now, the Nuxeo Drive addon is able to add its own actions there with nuxeo-drive.html:

<nuxeo-slot-content name="driveSyncToggleButton" slot="DOCUMENT_ACTIONS">
  <template>
    <nuxeo-drive-sync-toggle-button document="[[document]]"></nuxeo-drive-sync-toggle-button>
  </template>
</nuxeo-slot-content>

Next, in the above snippet, how is the bound document property resolved? The answer is found in nuxeo-browser.html which defines the model of the DOCUMENT_ACTIONS slot through the computed actionContext property defined here:

_actionContext: function() {
  return {document: this.document, clipboard: this.clipboard};
},

The DOCUMENT_ACTIONS has therefore the following:

Slot Model Properties

DOCUMENT_VIEWS_ITEMS and DOCUMENT_VIEWS_PAGES

The DOCUMENT_VIEWS_ITEMS slot allows you to define the available items to navigate the current document views such as View, Permissions and History.

The DOCUMENT_VIEWS_PAGES slot must define the pages introduced by the DOCUMENT_VIEWS_ITEMS slot. Each new item of DOCUMENT_VIEWS_ITEMS slot triggers a navigation to a page defined in this slot.

Slot Model Properties

BLOB_ACTIONS

This slot is available on a current document that has attached blobs. Default actions are Preview, Delete and Open with Nuxeo Drive (when the Nuxeo Drive addon is installed).

Slot Model Properties

BROWSE_ACTIONS

This slot is displayed when selecting one or more children documents of a Folderish current document. It provides bulked actions on the selection such as Add to collection, Delete selected items, etc.

Slot Model Properties

Main Application Menu slots

The Web UI revolves around a left drawer menu allowing to navigate to documents, searches, application administration, collections, etc. The following slots show how to extend this menu.

SEARCH_MENU_BUTTONS

This slot allows you to define additional searches accessible from the left menu.

The Nuxeo DAM addon defines its own Asset Search with the following:

<nuxeo-slot-content name="damSearchMenuButtons" slot="SEARCH_MENU_BUTTONS">
  <template>
    <nuxeo-menu-icon id="assetsSearchButton" name="assetsSearch" route="search:assets" icon="icons:perm-media" label="dam.assets.heading">
    </nuxeo-menu-icon>
  </template>
</nuxeo-slot-content>

See this documentation for further information on creating your own search for the Web UI.

Slot Model Properties

ADMINISTRATION_MENU and ADMINISTRATION_PAGES

This ADMINISTRATION_MENU slot allows you to add additional Administration sub menus.

Slot Model Properties

USER_MENU

This USER_MENU slot allows you to add additional User sub menu items.

On the above screenshot, you can see there's a Nuxeo Drive User menu item which is not part of the default Web UI. It is extended by the Nuxeo Drive addon which contributes the USER_MENU slot with nuxeo-drive.html:

<nuxeo-slot-content name="drivePageLink" slot="USER_MENU">
  <template>
    <nuxeo-menu-item route="page:drive" label="app.user.drive"></nuxeo-menu-item>
  </template>
</nuxeo-slot-content>

Note the:

route="page:drive"

Thanks to this property, clicking on this menu item will navigate to a page named drive. This page is also contributed to the Web UI with the PAGES slot extension also from nuxeo-drive.html:

<nuxeo-slot-content name="drivePage" slot="PAGES">
  <template>
    <nuxeo-drive-page class="flex" name="drive"></nuxeo-drive-page>
  </template>
</nuxeo-slot-content>

which will be inserted in nuxeo-app.html.

Slot Model Properties

DRAWER_PAGES and PAGES

The DRAWER_PAGES allows you to add new items to the main left drawer menu (see screenshot below) and works exactly the same as the USER_MENU.

Slot Model Properties

Document Creation

DOCUMENT_CREATE_ACTIONS

This slot displays actions when hovering over the bottom right Floating Action Button to create new documents. By default, it inserts nuxeo-document-create-shortcuts.html which shows shortcuts to the latest created document types wizard.

Slot Model Properties

FILE_UPLOAD_ACTIONS

This slot is used in the Nuxeo Live Connect addon which inserts additional import wizards to upload Files to cloud services.

Slot Model Properties

There are no properties for this slot.

Search and Collection Browsing Slots

The screen to browse Search results and Collection contents are very similar. When selecting items in the search results or the collection contents, some bulk actions are displayed in a top menu bar (like BROWSE_ACTIONS). These actions can be extended with the following slots.

SEARCH_ACTIONS

Slot Model Properties

COLLECTION_ACTIONS

Slot Model Properties

Other Slots

ANALYTICS_ITEMS and ANALYTICS_PAGES

The ANALYTICS_ITEMS slot allows to define the available items in the analytics dashboard (accessible from the Admin menu) such as Document distribution, Repository content, Workflow, etc.

Slot Model Properties

There are no properties for this slot.