Web UI

Web UI Searches

Updated: February 22, 2017 Page Information Edit on GitHub

Nuxeo Web UI comes with the Default Search and Expired Search both plugged on server side page providers default_search and expired_search by default.

Default search Expired search

Within the Web UI, a search is composed of 2 main parts:

  • the search form displayed on the left in the drawer panel.
  • the search result panel displayed on the right in the main content.

The search form itself has 2 rendering modes:

  • filter mode where you can set filter and criteria. Each time a filter changes, it updates the results displayed in the main container.
  • queue mode where search results are displayed with a vertical scroll (like in the expired search screenshot above).

A toggle button allows you to switch between filter mode and queue mode.

The search form is a dynamically loaded element. For instance, nuxeo-default-search.html contributes the Default Search and the nuxeo-expired-search.html contributes the Expired Search.

$NUXEO_SERVER/nxserver/nuxeo.war/ui% tree
.
├── document
│   ├── ...
├── elements.html
├── favicon.ico
├── i18n
│   ├── ...
├── images
│   ...
├── index.jsp
├── manifest.json
├── nuxeo-admin
│   ├── ...
├── nuxeo-dam
│   ├── ...
├── nuxeo-drive
│   ├── ...
├── nuxeo-home.html
├── nuxeo-liveconnect
│   ├── ...
├── nuxeo-user-group-management
│   ├── ...
├── search
│   ├── nuxeo-assets-search.html
│   ├── nuxeo-default-search.html
│   ├── nuxeo-expired-search.html
│   ├── nuxeo-saved-search-actions.html
│   ├── nuxeo-search-form.html
│   └── nuxeo-search-results.html
├── ...
...

Referring to Web UI deployment documentation, you can override these nuxeo-default-search.html and nuxeo-expired-search.html in order to customize the Default Search and Expired Search filter form. To do so, your own marketplace must deploy and override the proper HTML files in $NUXEO_SERVER/nxserver/nuxeo.war/ui/search.

Add New Searches

You can insert a new search in the left drawer menu thanks to the SEARCH_MENU_BUTTONS slot.

The DAM Example

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>

Here are some explanations about nuxeo-menu-icon properties:

route="search:assets"

will trigger a navigation to /search/assets.

Navigating to /search/assets will display the search filters form defined by nuxeo-assets-search.html in the left drawer menu content. Note that this is only possible because it is convention-based:

  • nuxeo-assets-search.html is deployed in the $NUXEO_SERVER/nxserver/nuxeo.war/ui/search directory.
  • the name of nuxeo-assets-search.html is in the form nuxeo-{searchName}-search.html where {searchName} is assets and matches the second part of the routing directive:

    route="search:assets"
    

    on the nuxeo-menu-icon.

    Please refer to the Web UI routing documentation for further details.

icon="icons:perm-media"

defines the icons to be displayed in the left drawer menu.

label="dam.assets.heading"

is the key label to be retrieved from i18n resources to be used as tooltip in the left drawer menu.

As just explained, to create a search, you just need to deploy a new nuxeo-{searchName}-search.html element in your $NUXEO_SERVER/nxserver/nuxeo.war/ui/search directory. However, it is important that this elements provides the proper information to perform the search.

Property Description Example
provider the name of the page provider to be used, defined server side default_search page provider
schemas a comma-separated value list of schema names to be fetched when loading documents retrieved by the search schemas needed for default search
displayQueue boolean property. If true, then the queue will be displayed by default instead of search filters expired_search displays a queue by default

It is not possible to customize the screen showing search results in the main container yet.

a day ago Manon Lumeau fix image on quick overview page
History: Created by Manon Lumeau