Web UI

HOWTO: Customize Slots

Updated: March 18, 2024

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.

  • Note that every slot on Web UI exposes a property named user by default, which contains the current user object.

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.

Slot name Extension purpose Where
DOCUMENT_ACTIONS Additional Current document actions
DOCUMENT_VIEWS_ITEMS
DOCUMENT_VIEWS_PAGES
Additional Current document views
BLOB_ACTIONS Additional Current document blobs actions
RESULTS_SELECTION_ACTIONS Additional actions for selected items
RESULTS_ACTIONS Additional actions/views for results
ADMINISTRATION_MENU
ADMINISTRATION_PAGES
Additional Administration menu
USER_MENU Additional User menu
DRAWER_PAGES
DRAWER_ITEMS
PAGES
Additional main menu items
DOCUMENT_CREATE_ACTIONS Additional document creation actions
CREATE_POPUP_ITEMS
CREATE_POPUP_PAGES
Additional items on the creation pop-up
FILE_UPLOAD_ACTIONS Additional document import wizards
COLLECTION_ACTIONS Additional collection members selection actions
ANALYTICS_ITEMS
ANALYTICS_PAGES
Additional analytics pages
THEMES Additional UI themes

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-web-ui-bundle.html

<nuxeo-slot-content name="addToColDocumentAction" slot="DOCUMENT_ACTIONS" order="20">
  <template>
    <nuxeo-add-to-collection-button document="[[document]]"></nuxeo-add-to-collection-button>
  </template>
</nuxeo-slot-content>

<nuxeo-slot-content name="favoriteToggleDocumentAction" slot="DOCUMENT_ACTIONS" order="30">
  <template>
    <nuxeo-favorites-toggle-button document="[[document]]"></nuxeo-favorites-toggle-button>
  </template>
</nuxeo-slot-content>

...

<nuxeo-slot-content name="workflowDocumentAction" slot="DOCUMENT_ACTIONS" order="110">
  <template>
    <nuxeo-workflow-button document="[[document]]"></nuxeo-workflow-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 as follows:

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

The DOCUMENT_ACTIONS has therefore the following:

Slot Model Properties

Property Description
document The current document.
clipboard The application clipboard content.

The model of every slot exposed by Web UI as the current user available under the user property.

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

Property Description
document The current document.

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

Property Description
document The current document.
blob The blob description (i.e. {name: "nuxeo_fact sheet_0.1.png", mime-type: "image/png", encoding: null, digestAlgorithm: "MD5",…})
user The current user
xpath The blob property xpath

RESULTS_SELECTION_ACTIONS

  • Until Web-UI version 0.9, this slot was called BROWSE_ACTIONS and its properties may have changed.

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

Property Description
baseUrl The base URL of the Nuxeo server
nxProvider The name of the page provider
displayMode The current display mode (e.g., grid, table)
selectedItems Array of selected documents.
items Array of all loaded documents.
columns Array with the available table columns
document The current document

RESULTS_ACTIONS

  • Until Web-UI version 0.9, this slot was called DOCUMENT_LISTING_ACTIONS and its properties may have changed.

This slot allows to provide additional action buttons on folderish documents or results page such as grid view, table view, etc.

Slot Model Properties

Property Description
baseUrl The base URL of the Nuxeo server.
nxProvider The name of the page provider.
displayMode The current display mode (e.g., grid, table).
selectedItems Array of selected documents.
items Array of displayed documents, selected or not. (Note: more documents could be loaded if you keep scrolling for results).
columns Array with the available table columns.
document The current document.

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.

ADMINISTRATION_MENU and ADMINISTRATION_PAGES

The ADMINISTRATION_MENU and ADMINISTRATION_PAGES slot allow you to add additional Administration sub menus (see screenshot below) and works exactly the same as the USER_MENU.

Slot Model Properties

Property Description
document The current document.
tasks Pending tasks assigned to the current user.
taskCount Number of pending tasks assigned to the current user.
currentTask Current task being processed by the current user if any.
clipboardDocCount Number of documents in the clipboard.
clipboard The clipboard element.
userWorkspace The user workspace path.

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

Property Description
document The current document.
tasks Pending tasks assigned to the current user.
taskCount Number of pending tasks assigned to the current user.
currentTask Current task being processed by the current user if any.
clipboardDocCount Number of documents in the clipboard.
clipboard The clipboard element.
userWorkspace The user workspace path.

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

Property Description
document The current document.
tasks Pending tasks assigned to the current user.
taskCount Number of pending tasks assigned to the current user.
currentTask Current task being processed by the current user if any.
clipboardDocCount Number of documents in the clipboard.
clipboard The clipboard element.
userWorkspace The user workspace path.

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

Property Description
hostVisible Boolean which is true if hovering over the FAB.
subtypes Array of the document types that can be created in the current location.

CREATE_POPUP_ITEMS and CREATE_POPUP_PAGES

The CREATE_POPUP_ITEMS slot allows you to define the additional items on the document creation pop-up, such as CSV Import.

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

Property Description
parent The document that was opened when the pop-up was triggered or the folderish document where it is contained.
i18n The i18n function helper to localize labels.

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 RESULTS_SELECTION_ACTIONS). These actions can be extended with the following slots.

COLLECTION_ACTIONS

Slot Model Properties

Property Description
collection The current document, corresponding to the current opened collection
items Array of displayed collection members, selected or not. (Note: more members could be loaded if you keep scrolling for results)
selectedItems Array of selected collection members.

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.

THEMES

The THEMES slot allows to define additional themes for the user interface, selectable in the themes page (accessible from the user menu).

Slot Model Properties

There are no properties for this slot.