Web UI

HOWTO: Create and Reuse a Custom element

Updated: April 28, 2020

This page is scheduled for review and update. Check back soon for updated content!

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

Watch the related courses on Nuxeo University


Create an Element

We are going to start by adding a validation schema to our Contract document type.

In Studio Modeler, go to Configuration > Content Model > Schemas

  1. Click on New and name it validation.
  2. Add a field validated as a boolean.
  3. Save your changes.

Go to the Studio Designer on the Resources tab.

  1. Create a folder called elements.
  2. In it, create an element, using the Sample layout template called my-validation-element.
  3. Edit the layout of the element by adding the validation schema.
  4. In the HTML editor, replace the lines describing the title and description by the following to call your validation element:
    <div role="widget">
       <paper-checkbox checked="{{document.properties.validation:validated}}"></paper-checkbox>
  5. Save your changes.

Reuse an Element

Now, go to your contract document type, on the view layout to use your element:

  1. Click on Configure.
  2. Switch to Code Editor at the button of the main view. On the search available in the elements catalog, search my-validation-element.
  3. Drag and drop it from the catalog to the editor.
  4. Don't forget to add document="[[document]]" (view mode) or document="" (edit mode) to your custom element
  5. Save your changes and deploy your studio project, you're done :)

    You can now reuse your element as much as you want, for example on the other layouts of your contract document, it will always be available in the Project Elements library.

We'd love to hear your thoughts!

All fields required