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

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.

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. 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

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:
  4. Fill in the Element & Attributes section like this:
  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!

a month ago Manon Lumeau Fix NXDOC-1731: labels for aggregates
a month ago manonlumeau Update page to reflect JSF UI deprecation
History: Created by manonlumeau

We'd love to hear your thoughts!

All fields required