Content Views in the Nuxeo Platform support two different display layouts out of the box, “List view” and “Thumbnail view”:
Since the Nuxeo Platform 6.0, Content Views can be used not only for browsing the contents of the repository but also from the amazing new Search tab. (You do this by enabling the “Search content view” property in Nuxeo Studio). This awesome enhancement means that no matter where you are (browsing or searching), you can choose to view the content in a consistent manner, and the greatly improved Thumbnail view is accessible anywhere. Let’s dive deeper into how you can take control of content view presentation with these enhancements.
Thumbnail View
The Thumbnail view is the default layout for search results.
List View
But the List can be used as well.
Yeah, So What?
So Content Views are used everywhere. What you may also notice is that results shown from the Workspace tab are displayed using the “List view” by default, while Search results are displayed using the “Thumbnail view”. So obviously there is some mechanism to control which layout is used by default. Wouldn’t it be nice if you can control this?
For example, you may have a folder in the repository that contains only pictures, so it would be nice to display the thumbnails by default. On the other hand, when searching for text-based documents it may be totally uninteresting to see the thumbnail previews. The extra step of toggling the results display every time you log in can be tedious.
It turns out the solution is deceptively simple. With a little contributing you too can control the presentation of your Content View results!
Controlling the Default Content View Result Layout
The available result layouts for a Content View are defined in the resultLayouts element of the contribution. For example (this is taken from the “DefaultContentListingInNavigation” Content View that is included in most any Studio project):
**<resultLayouts>**
<layout iconPath="/icons/document_listing_icon.png" name="[email protected]" showCSVExport="true" showEditColumns="true" showSpreadsheet="true" title="document_listing" translateTitle="true" />
<layout iconPath="/icons/document_listing_icon_2_columns_icon.png" name="document_listing_thumbnail" showEditRows="true" showSpreadsheet="true" title="document_thumbnail_listing" translateTitle="true" />
**</resultLayouts>**
As you can see two layouts are defined. In this case the first one corresponds to the “List view” and the second is the “Thumbnail view”. And in fact the order is the key to controlling the default view. To modify the default view all we need to do is reorder the layout elements.
For Search Content Views, the Nuxeo Platform automatically places the thumbnail layout first. For all others it places the list layout first.
Here is an overview of the necessary steps to control this:
- Create and deploy your Content View.
- Locate the existing contribution and copy the “resultLayouts” element (including the child layouts).
- Add a contribution to your Studio project with these changes.
- Re-order the “layout” elements such that the one you want appears first.
The tricky bit can be locating the contribution so I’ll cover that in more detail.
The Nuxeo Platform Explorer
If you’ve ever been to http://explorer.nuxeo.com/ (and if you haven’t, you should!) you know that Nuxeo offers a way to browse all of the default contributions that make up the Nuxeo Platform. What’s really cool is that this functionality can be installed in any Nuxeo server via the Platform Explorer addon. With this addon installed you can see the complete contributions from your own Studio project as well!
Here’s how to locate the contribution for a Content View created via Nuxeo Studio:
Install the Platform Explorer addon.
Browse to /nuxeo/site/distribution/current on your server. For example http://localhost:8080/nuxeo/site/distribution/current.
Select the “Extension points” category:
Search for “contentviews” and select the “contentViews” extension point.
Locate the contribution from your Studio project and click “View XML source”. For example:
Locate your Content View within the given XML and copy the “resultLayouts” element. Tip: the “name” attribute will have the same value as the ID of the Content View in the Studio project.
Create a Contribution
Back in Nuxeo Studio you will need to create a new XML Extension and add a contribution to the Content View Service.
This is just a matter of wrapping the resultLayouts element that you copied with the extension point and content view elements like:
**<extension point="contentViews" target="org.nuxeo.ecm.platform.ui.web.ContentViewService">****
<contentView name="DefaultContentListingInNavigation">**
<resultLayouts>
<layout iconPath="/icons/document_listing_icon.png" name="[email protected]" showCSVExport="true" showEditColumns="true" showSpreadsheet="true" title="document_listing" translateTitle="true" />
<layout iconPath="/icons/document_listing_icon_2_columns_icon.png" name="document_listing_thumbnail" showEditRows="true" showSpreadsheet="true" title="document_thumbnail_listing" translateTitle="true" />
</resultLayouts>
**</contentView>**
**</extension>**
Then order the “layout” elements so that the desired default comes first. The previous example has the List view first, so to get Thumbnail view by default just reverse them:
<extension point="contentViews" target="org.nuxeo.ecm.platform.ui.web.ContentViewService">
<contentView name="DefaultContentListingInNavigation">
<resultLayouts>
**<layout iconPath="/icons/document_listing_icon_2_columns_icon.png" name="document_listing_thumbnail" showEditRows="true" showSpreadsheet="true" title="document_thumbnail_listing" translateTitle="true" />**
<layout iconPath="/icons/document_listing_icon.png" name="[email protected]" showCSVExport="true" showEditColumns="true" showSpreadsheet="true" title="document_listing" translateTitle="true" />
</resultLayouts>
</contentView>
</extension>
And that’s it! Now you have complete control over how Content View results are displayed. Keep in mind that if the result layouts are changed (for example you can disable the ability to modify the result layouts via studio), you may need to update this contribution to keep it in sync.