Web UI

HOWTO: Insert a New Tab

Updated: February 12, 2019 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 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.

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!

10 days ago Manon Lumeau Review format and broken margin
a month ago Loubna Benzaama Change how-to-new-pill in how-to-new-tab
History: Created by Loubna Benzaama

We'd love to hear your thoughts!

All fields required