Web UI

HOWTO: Create Elements with Layout Blocks

Updated: July 30, 2020

In this tutorial, you will learn how to create and reuse custom elements in Studio Designer thanks to Layout Blocks.

Nuxeo University
Watch the course on Nuxeo Web UI Development
WEBUI_CUSTOMIZATION_FRONTEND_DEV
WEBUI_CUSTOMIZATION_FRONTEND_DEV

Use Case

We will create an element to display all the properties of a document type, in Edit mode, so that it can be shared with the Create, Edit and Import layouts (as they aim at modifying property values).

Requirements

Create a custom document type in Nuxeo Studio Modeler with different property types (String, Directory, Boolean...). Here is an example with an Invoice document type with specific properties:

layout_block_1.png
layout_block_1.png

Instructions

Generate a Layout Block

  1. Go to Nuxeo Studio Designer > UI > Layout Blocks.
  2. Create a new Layout Block called nuxeo-<document_type_name>-edit.

    layout_block_2.png
    layout_block_2.png

  3. Drag and drop the complete schema from the catalog panel.

    layout_block_3.png
    layout_block_3.png

  4. Select Edit mode, and choose the suitable elements to be displayed in the document layout.

    layout_block_4.png
    layout_block_4.png

  5. Remove the Description property from the layout.

The final result should be something similar:

layout_block_5.png
layout_block_5.png

Reuse a Layout Block

  1. Navigate to the Layout > Local Document Types > <Document type > Create.
  2. Click on Configure.
  3. Remove all the properties scaffolded by default.
  4. Drag and drop from the Element Catalog (in the left Panel) the layout block you've just created.
    It should be listed under the "Layout Blocks" header bar.

    layout_block_6.png
    layout_block_6.png

    layout_block_7.png
    layout_block_7.png

  5. Do the same with the Edit and Import.

We'd love to hear your thoughts!

All fields required