Home > Developer Documentation Center > Web UI > Web UI Tutorials > HOWTO: Insert a New Tab
Web UI

HOWTO: Insert a New Tab

Updated: March 18, 2024

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

Jump between any Studio feature or menu in a snap by typing its name. This action can be triggered by clicking the Jump To option on the bottom left of your Studio project, or using the Ctrl + K / ⌘ + K shortcut.

  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. In UI, 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.

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. Use the default messages.json or create your own language.
  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

Go to the Designer:

  1. Click on UI > Tabs
  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!