Nuxeo Online Services

UI

Updated: January 29, 2019 Page Information Edit on GitHub

Nuxeo University
Watch the related course on Nuxeo University:
Video on a simple Nuxeo Project Creation

The UI tab gives you access to several elements to customize the UI section that you want, dashboard, menus, themes, default document view, integrate new custom pages, add new actions, add translations, etc.

Layouts

Five layouts are available on documents such as local and built-in types to let you customize the creation, edition, import, metadata and the view of your documents. Once customized, layouts are displayed with a bold font.

  • Local Types: Lists the document types that you have created.
  • Built-in Types: Lists the document types available by default on the platform.
  • Workflows: Lists the workflows that you have created.
  • Page Providers: Lists the page providers that you have created.

Configuring Multivalued Fields

When drag and dropping a multivalued field or a complex multivalued field into a layout, the corresponding element is automatically set to nuxeo-data-table. Clicking on the element, then on the pencil icon will allow you to edit it.

Data Table Element
Data Table Element

From there, the field (or each sub field in the case of a complex multivalued field) is shown as a table with a column containing the element. Clicking on an element will display its properties on the right side of the screen so that you can configure it.

Table Editor Element Properties
Table Editor Element Properties

You may edit the field's label directly in the column title. Labels can be translated by entering the [[i18n('your.translation.key')]] pattern.

Table Editor Layout Complex Multivalued
Table Editor Layout Complex Multivalued

Don't Add More Fields
Although the editor allows you to drag and drop additional fields in this context at the moment, you should only edit the existing fields to keep your layout working properly.

Finally, when dealing with complex multivalued fields:

  • Sub fields can be reordered by drag and dropping them around in the layout.
  • A sub field can be deleted by hovering on it and clicking the trash icon.

Table Editor Delete
Table Editor Delete

Only Use the Trash Icon
When hovering on an element in a document or workflow task layout, only the trash icon should be used at the moment. Using the sortable toggle (arrows icon) or the visibility toggle (eye icon) may prevent your layout from working properly.

Tabs

You can add new document tabs and also hide and override default document to display specific information relevant to your users.

A tab is created along with a corresponding element at the top of the main view. A tab can be activated under a set of conditions (for a specific user or document property such as group, type, permissions, etc.) Once activated, selecting the tab will display the corresponding view.

  • Page: Uses the document page template to create a tab displaying information that you want and that are related to documents.
  • Listing: Uses the element nuxeo-result-view in the main view. You can use it to display custom document listings using a page provider.

Drawer

  • Left Menu Items: From generic pages to new search forms or browse pages with determined root path. These will add a new left menu item.

  • Main Menu Pages: You can integrate new custom pages if you need to display specific information, like access to your profile information, the configuration of cloud services or some kind of specific report. Items can be added to Administration or User Menu. Each contribution adds a menu entry to Administration or User menus and a corresponding element in the main view.

Actions

Allows you to create and edit buttons and links as elements and display them to any existing category/area, called slots, in Web UI.

  • Actions: Can display any element whether it is provided by Nuxeo or a custom element you wrote.
  • Operations: Use the element nuxeo-operation-button for quick and easy access.

Themes

Allows you to customize your own UI themes that users can select. It is based primarily on CSS custom properties, but can include any type of CSS.

Translations

Create and/or Manage your messages.json files from this view to add a new language to your platform.
This file is composed of the keys used in UI following by their value in the corresponding language.

Dashboard

You can customize the default Web UI dashboard and edit the default HTML code to include your custom elements.


17 days ago manonlumeau change pill in tab in links to how-to-new-pill
a month ago Loubna Benzaama Update src/studio/nuxeo-studio/administering-your-project/naming-conventions.md
History: Created by Loubna Benzaama

We'd love to hear your thoughts!

All fields required