Web UI

HOWTO: Insert a New Tab

In this tutorial you will learn how to add a new tab to your custom document type. This tab 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.

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:

contract-owner-vd.png
contract-owner-vd.png

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

The search by date range:

creation-date-range-vd.png
creation-date-range-vd.png

  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.

Once you are all set, click on Configure layouts in Designer at the top-right of your screen. You are now in Studio Designer, where you can configure the layouts of your Search.

Configure Layouts

In the Studio Designer, you are now in the UI tab, under Layouts > Page Providers. You will find the page provider created previously.

  1. Click on form and then Configure, it will automatically create the nuxeo-othercontracts-search-form layout.
  2. Click on result and then Configure, the nuxeo-othercontracts-search-results layout is created.

Configure Labels

You now need to add your labels to your translations file to display them correctly in the UI. To do so:

  1. Click on the UI table.
  2. Click on Translations.
  3. Create a new messages.json file.
  4. Create a new entry in the JSON file with key label.ui.aggregate.<label> and the label as value. Here it's:
    {
     "label.ui.aggregate.from_now-1y_to_now-1M":"Last year",
     "label.ui.aggregate.from_now-1M_to_now-7d":"Last month",
     "label.ui.aggregate.from_now-7d_to_now-24H":"Last week",
     "label.ui.aggregate.from_now-24H_to_now":"Last 24H"
    }
    

You can now save your changes and go to the Designer.

Create a Listing

From the Page Provider screen for otherContracts:

  1. In Bind more elements, select Tab.
  2. Name it other-contracts.
  3. Fill in the creation form like this:
    other-contract.png
    other-contract.png
  4. Fill in the Element & Attributes section like this:
    other-contract-elements-attributes.png
    other-contract-elements-attributes.png
  5. Fill in the Filters section like this:
  6. Current user has one of the permissions: Edit
  7. Current document has one of the types: Contract
  8. Save your changes.

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

other-contract-result.png
other-contract-result.png

a month ago GitHub Fix release date on deprecated addons
History: Created by GitHub

We'd love to hear your thoughts!

All fields required