Web UI

HOWTO: Insert a New Pill

Updated: October 22, 2018 Page Information Edit on GitHub

This page is scheduled for review and update. Check back soon for updated content!

In this tutorial you will learn how to add a new pill to your custom document type. This pill will help you to find other contracts created for the same contract owner. To do so, we'll be using a custom page provider linked to the Contract document type.

A pill in Web UI is the equivalent of a tab on JSF UI.

Prerequisites

Once you are all set, you can navigate to Modeler to start creating your search.

Create a Page Provider

  1. In Studio Modeler, go to Customization, go to Page Providers, click on New and name it otherContracts.
  2. In the Query filter add the following line AND ecm:primaryType='Contract'. This will enable to only search contract documents.
    You should end up with something like this:

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

Now we will add aggregates to customize the search.

The search by owner of the contract:

  1. Add another new Predicates
  2. Click on Edit binding and select schema:contract > owner

The search by date range:

  1. Next to Aggregates click on Add A popup window appears.
  2. Fill the popup window like this:
    Field dc:created
    Date Ranges
    • Label: Last year From: now-1y To: now-1M
    • Label: Last month From: now-1M To: now-7d
    • Label: Last week From: now-7d To: now-24H
    • Label: Last 24h From: now-24H To: now
  3. Save your changes.

Configure Layouts

Once you are all set, you can navigate to the Studio Designer to configure your layouts.

  1. Go to Layouts > Page Providers > otherContracts
  2. Click on form and then Configure, it will automatically create the nuxeo-othercontracts-search-form layout.
  3. Do the same with the result button, click on Configure, the nuxeo-othercontracts-search-results layout is created.

Create a Listing

Go to the Designer:

  1. Click on UI > Document Pages
  2. Hover over the Create button and select the Listing type
  3. Name it other-contracts.
  4. Fill in the creation form like this:
  5. Fill in the Element & Attributes section like this:
  6. Fill in the Filters section like this:
    1. Current user has one of the permissions: Edit
    2. Current document has one of the types: Contract
  7. Save your changes.

You can now deploy your project on your instance and see what it looks like!

2 months ago Loubna Benzaama Fix Showcase Content add-on doc
History: Created by Loubna Benzaama

We'd love to hear your thoughts!

All fields required