Version: 8.0

Custom UI component based on a classic Creatio page element

Level: beginner

In Creatio, you can expand the out-of-the-box set of Freedom UI page components with custom components.

Creatio lets you implement the following custom component types:

Custom component based on a classic Creatio page element. Supported in Creatio 8.0.2 Atlas and later.
Remote module. Supported in Creatio 8.0.3 Atlas and later.

Important

You can implement a custom component based on a classic Creatio page element in Creatio version 8.0.2 Atlas and later.

To implement a custom component based on a classic Creatio page element:

Create a custom component.
Add the custom component to the Freedom UI page.

1. Create a custom component

Create a module schema. To do this, follow the instruction in a separate article: Client module.

Implement a custom component.

Add a dependency on the @creatio-devkit/common library to the AMD module.
Example that adds a dependency to the UsrAppClientSchemaName AMD module
```
/* AMD module declaration. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], function (sdk) {
    ...
});
```

Declare the component class.

Example that declares the UsrAppClientSchemaName class
/* AMD module declaration. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], (sdk) {
    /* Declare the class. */
    class UsrAppClientSchemaName extends HTMLElement {
        constructor() {
            super();
            const shadowDom = this.attachShadow({mode: 'open'});
            shadowDom.innerHTML = '<h1>UsrAppClientSchemaName works!</h1>'
        } 
    }
    ...
});

Example that registers the UsrAppClientSchemaName component
/* AMD module declaration. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], (sdk) {
    ...
    /* Register the component. */
    customElements.define('usr-custom-view-element', UsrAppClientSchemaName);
    ...
});

Example that registers the usr-custom-view-element component
/* AMD module declaration. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], (sdk) {
    ...
    /* Register the web component as a view element. */
    sdk.registerViewElement({
        type: 'usr.CustomViewElement',
        selector: 'usr-custom-view-element'
    });
});

2. Add the custom component to the Freedom UI page

Add the custom component module to the AMD module declaration as a dependency.
Example that adds the UsrAppClientSchemaName dependency
```
/* AMD module declaration. */
define("UsrAppClientSchemaName1", ["UsrAppClientSchemaName"], () {
    ...
});
```

Add the configuration object of the module that contains the custom component to the viewConfigDiff schema section.

View the configuration object of the module that contains the UsrCustomViewElement custom component below.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    {
        "operation": "insert",
        "name": "UsrAppClientSchemaName",
        "values": {
            "type": "usr.CustomViewElement",
            "layoutConfig": {
                "column": 1,
                "row": 1,
                "colSpan": 3,
                "rowSpan": 1
            }
        },
        "parentName": "Main",
        "propertyName": "items",
        "index": 0
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

note

It is not possible to add a custom component based on a classic Creatio page element to the component library of the Freedom UI Designer. The Freedom UI Designer displays a placeholder instead of the custom component on the canvas. This is because classic Creatio page elements are implemented using the ExtJs framework. To display a custom component in the element library of the Freedom UI Designer, implement a remote module. To do this, follow the instruction in a separate article: Implement a remote module.

View a detailed example that implements the custom component in a separate article: Implement a custom component based on a classic Creatio page.

1. Create a custom component​

2. Add the custom component to the Freedom UI page​

See also​

1. Create a custom component

2. Add the custom component to the Freedom UI page

See also