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.

In Studio Modeler, in your go to Schema:

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 called my-validation-element.
   ×
   
3. Edit the layout of the element by adding the validation schema.
   ×
   
   In the catalog properties, the validated field of the validation schema appears.
4. In the HTML editor, remove the lines describing the title and description.
5. Expand the validated field and drag and drop the edit layout from the catalog to the editor.
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 Customize.
2. On the search available in the elements catalog, search my-validation-element.
3. Drag and drop it from the catalog to the editor.
   ×
   

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