Home > Developer Documentation Center > Web UI Framework > Content Views > Content View How-To Index > How to Define a New Content View
Web UI Framework

How to Define a New Content View

Updated: October 16, 2020

A content view is the definition of a list of documents displayed in the interface. The lists of documents displayed in the UI are the results of a query, that you can customize, and the definition of the information displayed on the documents. In Nuxeo applications, content views are used in most cases when there is a list of content.

For instance:

  • to display the content listing of folderish document types (Workspace, Section, Folder...),
  • in the virtual navigation views,
  • to display the advanced search results,
  • for additional document listing that you can now configure and add as a tab on any document type.

A content view definition form is composed of two parts:

  • Query and form tab: Define the query that will be run to filter the content listing. You can also define a filter that will enable user to filter the results of your query.
  • Results tab: Design the table of results and the sorting options.

So, designing a new content view takes three steps:

  1. defining the filter query,
  2. defining the form for user to input some additional filtering,
  3. defining the results table.

Set Your Query Filter

You can define the query that will be executed to filter the content repository and display only the documents relevant in the current repository. The query uses NXQL, the Nuxeo Query Language, a SQL-like query language.

When configuring a content view in Studio, a default query filter is pre-filled in, that you can complete with more conditions (or even totally modify if you understand what you are doing). This default query filter is:

ecm:mixinType != 'HiddenInNavigation' AND ecm:isVersion = 0 AND ecm:currentLifeCycleState != 'deleted'

This filter:

  • excludes from search results the documents supposed to be hidden in navigation (ecm:mixinType != 'HiddenInNavigation'),
  • and excludes the documents whose lifecycle state is "deleted"(ecm:currentLifeCycleState != 'deleted'),
  • and sets that only the current version of the document should be displayed (ecm:isVersion = 0) so as to avoid displaying all versions of a same document in the search result.

You can add as many filter criteria as you need. If the criterion is fixed, such as a specific lifecycle state or author, you just need to add your filter criterion at the end of the list pre-filled in list. For instance, you could add a criterion saying that you want to exclude from the results the documents created by Administrator:

ecm:mixinType != 'HiddenInNavigation' AND ecm:isVersion = 0 AND ecm:currentLifeCycleState != 'deleted' AND dc:creator != 'Administrator'

If the criterion is not a fixed value but depends on the context of the document, you should put "?" as a value and add a query parameter. For instance, if you want to display only the document created by the current user:

  1. add dc:creator = ? (or dc:creator IN (?) with multivalued parameters) in the query filter,
  2. add a query parameter with value: #{currentUser.name}

When your query filter has several "?" parameters, you must add the query parameters in the same order as the criteria in the query filter.

Note for people being familiar with Nuxeo products customization: the syntax that is to be used in those parameters is the same EL syntax as the one used in XHTML files. You have access to the SEAM context. Other sample expressions:

  • #{currentDate.toString()}: that can be used with date properties, like dc:created > DATE ?
  • #{currentDocument.dc.rights}
  • #{empty currentDocument.getProperty("dublincore","subjects") ? '%' : currentDocument.getProperty( ("dublincore","subjects" )} for multivalued property

More information on NXQL and examples are available on the NXQL dedicated page.

Define the Filter Form

You can set a filter form that can be used:

To design the filter form:

  1. Check the Show as filter form box if you want to create a filter form displayed on top of content table.

    1. Set the number of columns and rows using the Add column, Add row or Set Table Size buttons.
    2. Drag and drop the widget corresponding to the criterion you want to display from the widget list onto an empty table cell. !STUDIO_drop_search_field.png|border=1,width=550! The widget is added in the content cell.
    3. Click on the icon !STUDIO_edit_icon.png|border=1! to edit the widget and edit the search field's label, search operator, sort criterion... !STUDIO_widget_search_operator_edition.png|border=1,width=300!
    4. When done editing, click on the Save button.
    5. Repeat these steps until your form is complete.

  2. Click on the Save button to save your changes.

Configure the Result Layout

Search results, and so content listings, are presented in a table. You can configure the columns,and so the information on the documents, that should be displayed in your content view.

To configure a result layout:

  1. Go on the Results tab.
  2. Set the results parameters you want to be applied (see below for more information on the results parameters).

  3. Define the information that will be displayed to users in the result table:

    1. Set the number of columns and rows using the Add column, Add row or Set Table Size button. The blue first row of the table is the columns title row.
    2. Drag and drop the widget corresponding to the information you want to display from the widget list onto an empty table cell. The widget is added in the content cell. It is also automatically added in the title cell.
    3. Edit the title widget by clicking on the icon  on the first row. You will also have to give the sort criterion that will be used for that column.
    4. Edit the widget information itself by clicking on the icon  on the second row.

    5. Do it again for each widget you want to drop.

      You can also add multiple rows: in that case one result line will be layered on various real lines in the result table. Yet this is not a very common use case

      If you are editing the advanced search results layout, repeat these steps for the additional results columns that users will be able to select.

  4. When you have configured your default columns and the additional columns, click Save.

Results parameters

The first part of the result configuration form is dedicated to setting up some general parameters about the results that will be displayed.

Parameter Description
Number of results per page Indicate how many documents should be displayed on a page.
Enable common actions Indicate if the default document list toolbar (buttons Copy, Paste, Delete...) should be displayed from this view.
Enable additional actions You can define new buttons or actions that will be displayed next to the default document list toolbar: Click Create a new action to define a new user action (button, icon or link) to be displayed below the list of documents. See the tutorial Create a button that triggers the task assignment for an example of user action configuration.
Default sort Indicate what should be the default sort criterion.
Use additional standard listing layouts Check the box if you want to display the icons , and to enable users to switch from the table presentation of documents to the other default presentations.

Use The Content View

There are several ways of using the content view you configured in your Nuxeo Platform application.:

  • In the faceted search feature, so as to add a new filter set. You just need to click on the "Faceted search" checkbox, in the Flag section of the Query&Form Tab of your content view in Studio.
  • In the DAM view, so as to add a new filter set. You just need to click on the DAM checkbox, in the Flag section of the Query&Form tab of your content view in Studio.
  • In any custom tab, using the Content View widget.
Related How-tos
Related Documentation