Web UI Framework

Content Views Display

Updated: October 16, 2020

This chapter presents how content views are displayed on a page.

Here is a typical content view display:

Typical Content View Display
Typical Content View Display

Content View Widget Type Definition

From Studio, the easiest way to render a content view is to insert the Content View Widget Type in a tab.

Content View Actions Definition

Content view actions are visible on the top right corner. Since 6.0, these actions use the category CONTENT_VIEW_ACTIONS.

By default, some filters apply to these actions. These filters have access to the Seam/JSF context, and they also have access to the additional variable contentView, representing the current content view instance being displayed.

This allows to use expressions like #{contentView.showRefreshCommand} or #{contentView.currentResultLayout.showCSVExport}, but additional variables have also been added to the context, to help filtering on rendering information coming from a content view widget configuration, for instance. Default filters usually use this variable if defined, and fallback on the content view configuration if not.

Here is the list of the default actions:

  • selectContentViewPageSize displays the selector presenting the number of elements per page, variable showPageSizeSelector is available to control its filter, defaulting to condition #{nxu:test(empty showPageSizeSelector, contentView.showPageSizeSelector, showPageSizeSelector)}, for instance)
  • selectContentViewResultLayout displays links to alternative listing presentations of results,
  • refreshContentView displays a link to refresh the content view, keeping filtering and other presentation criteria, variable showRefreshCommand is available in context,
  • contentViewCSVExport displays a link to the CSV export, variable showCSVExport is available in context,
  • contentViewPDFExport displays a link to the PDF export, variable showPDFExport is available in context,
  • contentViewRSSExport displays a link to the RSS export, variable showSyndicationLinks is available in context,
  • contentViewATOMExport displays a links to the ATOM export, variable showSyndicationLinks is available in context,
  • contentViewEditColumns opens a fancybox to select visible columns, variable showEditColumns is available in context,
  • contentViewEditRows opens a fancybox to select visible rows (similar to the previous action, but using a different wording when listed data is not presenting columns, for instance thumbnail listings), variable showEditRows is available in context,

If you'd like to disable or override these actions behaviour, please read the chapter explaining how to redefine an action.

You should make sure to add the following requirement to your extension point contribution to ensure proper override:

<require>org.nuxeo.ecm.platform.contentview.jsf.actions</require> 

Most of the original contributions are declared in:

Actions are displayed using a Toolbar Actions widget, allowing to use any action type (including fancy boxes).

Content View Selection Actions Definition

Content view selection actions are displayed on the bottom left corner. The default category used is CURRENT_SELECTION_LIST but this can be configured on the content view.

Selection actions rely on a selection list to retrieve the list of checked documents. The default list is named CURRENT_SELECTION, default actions will rely on it.

These filters have access to the Seam/JSF context, and they also have access to the additional variable contentView, representing the current content view instance being displayed, as well as selectedDocuments, corresponding to the list of selected documents.

If you'd like to disable or override these actions behaviour, please read the chapter explaining how to redefine an action. Using the UI development mode can help you find the action identifier for easier override.

These actions display allows to use any action type (including fancy boxes).

Advanced Display

To handle document content views categories, rendering is done using methods set on generic Seam components:

A typical usage of content views, to render the results, would be:

<nxu:set var="contentViewName" value="my_content_view_name">

  <ui:decorate template="/incl/content_view.xhtml" />

</nxu:set>

The template /incl/content_view.xhtml handles generic rendering of the given content view (content view title, pagination, result layout selection, list rendering, actions rendering) . It inserts names region that can be overridden when using the ui:decorate tag.

The current version of this template is here: https://github.com/nuxeo/nuxeo-jsf/blob/release-6.0/nuxeo-platform-webapp-base/src/main/resources/web/nuxeo.war/incl/content_view.xhtml.

It is not recommended to override this template for better maintenance, but it might be useful to override one of its sub-templates if this cannot be handled by action configuration override.

Here is the sample rendering of the search form defined on a content view named "document_content_filter":

<nxu:set var="contentView"
  value="#{contentViewActions.getContentViewWithProvider('document_content_filter')}"
  cache="true">
  <c:if test="#{contentView != null}">
    <nxl:layout name="#{contentView.searchLayout.name}" mode="edit"
      value="#{contentView.searchDocumentModel}" />
  </c:if>
</nxu:set>

Here is a typical way of refreshing or resetting a provider named "advanced_search" from the interface:


<div>
  <h:commandButton value="#{messages['command.search']}"
    action="search_results_advanced"
    styleClass="button">
    <nxu:actionListenerMethod value="#{contentViewActions.refresh('advanced_search')}" />
  </h:commandButton>
  <h:commandButton value="#{messages['command.clearSearch']}"
    action="#{contentViewActions.reset('advanced_search')}"
    immediate="true"
    styleClass="button" />
</div>

 


Other Related Documentation

Content Views (Studio)