HOWTO: Create and Reuse a Custom Element

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

Requirements

• A Contract document type created in Studio Modeler
• The Web UI addon installed on your instance

Create an Element

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

To create a validation schema:

1. In Studio Modeler, go to Configuration > Content Model > Schemas.
2. Click on New and name it validation.
3. Add a field validated as a boolean.
4. Save your changes.

To insert the validation schema in the Contract document type:

1. In Studio Designer, go to the UI tab.
2. In Layout Blocks, at the bottom-right of the screen, click on to create a new element.
3. Enter the name my-validation-element and select Title/description element template as element template.
   ×
   

4. Add the validation schema in the <script>, it should look like this:

    <script>
    Polymer({
      is: 'my-validation-element',
      behaviors: [Nuxeo.LayoutBehavior],
      properties: {
        /**
              * @schema validation
        */
        document: {
          type: Object
        }
      }
   
    });
    </script>
   

5. Replace the lines describing the title and description by the following to call your validation element:

    <div role="widget">
      <label>Validated</label>
      <paper-checkbox checked="{{document.properties.validation:validated}}"></paper-checkbox>
    </div>
   

6. 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 the Code Editor. 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.

Going further

For the moment you have a "Validated" checkbox displayed on all your Contract document type, but anything happens when you click on it as we didn't add any logic to it. To have more info on how to create an element and bind it to an action, follow the related tutorial.