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.

Hyland University

Watch the Web UI Customization and Nuxeo Frontend Development University course.

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	Additional Current document views
DOCUMENT_VIEWS_PAGES	Additional Current content of the "View" tab
BLOB_ACTIONS	Additional Current document blobs actions
RESULTS_SELECTION_ACTIONS	Additional actions for selected items
RESULTS_ACTIONS	Additional actions/views for results
TRASH_RESULTS_SELECTION_ACTIONS	Additional actions when trashed documents are selected
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
PUBLISH_PAGES	Dialog opened when using the document publishing action
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.
`user`	The current user.
`clipboard`	The application clipboard content.

Discover how to insert a new user action on Web UI with Studio Designer.

DOCUMENT_VIEWS_ITEMS

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

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.
`user`	The current user.

DOCUMENT_VIEWS_PAGES

The DOCUMENT_VIEWS_PAGES slot displays the content of the default "View" tab.

The DOCUMENT_VIEWS_PAGES slot define the pages introduced by the DOCUMENT_VIEWS_ITEMS slot.

Slot Model Properties

Property	Description
`document`	The current document.
`user`	The current user.

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
`user`	The current user.

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.
`user`	The current user.

TRASH_RESULTS_SELECTION_ACTIONS

This slot allows to provide additional action buttons when selecting one or more trashed documents.

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
`user`	The current user.

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`	The current user.

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.
`user`	The current user.

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.
`user`	The current user.

Document Publishing

PUBLISH_PAGES

This slot displays actions when using the Publish Document action and can be used to override the dialog to publish documents.

Slot Model Properties

Property	Description
`document`	The current document.
`i18n`	The i18n function helper to localize labels.
`user`	The current user.

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.
`user`	The current user.

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.
`user`	The current user.

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.
`user`	The current user.

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.

HOWTO: Customize Slots

Concept

Summary

Details

Document Browsing Slots

DOCUMENT_ACTIONS

DOCUMENT_VIEWS_ITEMS

DOCUMENT_VIEWS_PAGES

BLOB_ACTIONS

RESULTS_SELECTION_ACTIONS

RESULTS_ACTIONS

TRASH_RESULTS_SELECTION_ACTIONS

Main Application Menu Slots

ADMINISTRATION_MENU and ADMINISTRATION_PAGES

USER_MENU

DRAWER_PAGES and PAGES

Document Publishing

PUBLISH_PAGES

Document Creation

DOCUMENT_CREATE_ACTIONS

CREATE_POPUP_ITEMS and CREATE_POPUP_PAGES

FILE_UPLOAD_ACTIONS

Search and Collection Browsing Slots

COLLECTION_ACTIONS

Other Slots

ANALYTICS_ITEMS and ANALYTICS_PAGES

THEMES