HOWTO: Display a Children Documents Listing

In Nuxeo Web UI, if you want to build a custom page providers to retrieve children document, typically for a folderish document type for example, you should use predicates instead of query parameters that were used on JSF UI side.

In this tutorial we want to display interesting business properties when listing the children documents of a contract portfolio:

• Owner
• Policy
• Start date
• End date

Prerequisites

• A Contract document type
• The Nuxeo Web UI addon is installed on your instance.
• In Studio Modeler > Settings > Application Definition, make sure that Nuxeo Web UI is in the Packages to Install list.

Create a Contract Portfolio

1. In Studio Modeler, under Configuration, click on the Content Model section, then Document Types.
   Click on the New button.
2. Fill in the creation form as follows and click on Next:
   • ID: contractsPortfolio
   • Extends: Folder
   • Label: Contracts Portfolio
3. Fill in the Definition tab:
   • Select an icon for your portfolio, from your resources or from your desktop
   • Accepted Children Types: contract
   • Document Facets: Document is folderish
4. Save your changes by clicking on Save at the top right corner of the page.

Now click on Configure layouts in Designer at the top right of the page and configure the 5 layouts under your contractsPortfolio document type by clicking on CONFIGURE on each layout and save your changes.

Create a Page Provider

1. Now in Studio Modeler, under Configuration, Click on Page Providers, then on New button.
2. Fill in the creation form as follows and click on Next:
   • Feature ID: portfolioContent
   • Use ElasticSearch Index: Yes
3. Fill in the query filter like this:

ecm:mixinType != 'HiddenInNavigation'
AND ecm:isVersion = 0
AND ecm:isTrashed = 0

1. Add a predicate on field: Schema > System > ParentId and take note of the name that has been given to it (likely to be system_parentId)

×

Configure a Listing

1. In modeler, on your portfolioContent page provider screen, click on Configure layouts in Designer You are now in Studio Designer.
2. On the results field, click on Configure
3. On the table results listing, click on Edit
4. At the bottom right of the page, click on Switch to table editor
5. Remove the Modified and last Contributor columns by clicking on the delete icon
6. In the right column, select contract > owner : string in view mode and drag and drop it after the title column.
7. Do the same with the contract > policy : string, contract > start : date and contract > endDate : date
   

8. On the Owner and Policy column, click on the eye icon .
   The 2 columns become grey. We will see after the deployment what this feature does.

   You should end up with the following screen:
   

   ×
   

9. Save your changes by clicking on the Save button at the top right of the page

Create a Tab

1. In Studio Studio Designer, go to UI > Tabs.
2. Hover over the Create button and select Listing.
3. Fill in the page like this:
   • Name: portfolioContentListing
   • Label: Content
   • Order: 1
   • Provider: portfolioContent
   • Schemas: dublincore, contract
   • Search-name: portfoliocontent
4. Unfold the down arrow at the bottom of the Elements & Attributes section

5. Add the following line next to the params field:
   {"system_parentId": "[[document.uid]]"}

   ×
   
   Some explanations for params

   • Elements are configured using JavaScript (JS). We are putting a JS object here ({"key": "value", "anotherKey": "anotherValue"}) that will be inserted in the element.
   • system_parentId is the name of the predicate we defined in Modeler. We are saying here that we want to assign a value to it.
   • [[document.uid]] is the value we assign to our predicate. In this case, we are using one way binding (symbolized by the double square brackets) to forward a value dynamically. The document.uid variable can be guessed easily once you know that you are parsing a document entity-type using JS.

6. At the bottom of the page, define the activation filter:

   • Document has one of the type: contractsPortfolio
     ×
     

7. Save your modification and deploy your Studio project

As we modified the Owner and Policy columns, they are available optionally. By clicking on Columns Settings icon, you can decide to display them or not.

×