Version: 8.1

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.
Remote module.

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) {
    ...
});
```
A custom Classic UI component lets you include an external JS library. To do this:
1. Add the library file to the package file content.
2. Register the library in the bootstrap.js file. Instructions: Package bootstrap files.
3. Add the library dependency to the AMD module similar to the @creatio-devkit/common library.

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