Custom UI component implemented using remote module

1. Create an Angular project to develop a custom UI component using remote module 

Create an Angular project to develop a custom UI component using a *.zip archive of an Angular project that contains the template of a remote module.

To create an Angular project using a *.zip archive:

1. Download and unpack the *.zip archive.

   For Creatio version 8.0.8 and later.

   For Creatio version 8.0.3-8.0.7.

2. Open the project in Microsoft Visual Studio Code.
3. Change the <%projectName%> macro of the Angular project name to sdk_remote_module_package in every project file.
4. Change the <%vendorPrefix%> prefix macro to usr in every project file.
5. Install the npm modules. To do this, run the npm i command at the command line terminal of Microsoft Visual Studio Code. The installation might take some time.
6. Update the @creatio-devkit/common library version. To do this, run the npm update @creatio-devkit/common command at the command line terminal of Microsoft Visual Studio Code.

As a result, Microsoft Visual Studio Code will create an Angular project to develop a custom UI component using remote module.

2. Create a custom UI component using remote module 

1. Create an Angular component in the project. To do this, run the ng g c view-elements/input --view-encapsulation=ShadowDom command at the command line terminal of Microsoft Visual Studio Code.

   As a result, Microsoft Visual Studio Code will add the InputComponent component files to the src/app/view-elements/input project directory.

   

2. Specify that the InputComponent component is a view element.

   1. Open the input.component.ts file.
   2. Flag the component using the CrtViewElement decorator.
   3. Import the required functionality from the libraries to the component.
   4. Save the file.
   input.component.ts file

   /* Import the required functionality from the libraries. */
   import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   import { CrtViewElement } from '@creatio-devkit/common';
   
   @Component({
     selector: 'usr-input',
     templateUrl: './input.component.html',
     styleUrls: ['./input.component.scss'],
     encapsulation: ViewEncapsulation.ShadowDom
   })
   
   /* Add the CrtViewElement decorator to the InputComponent component. */
   @CrtViewElement({
     selector: 'usr-input',
     type: 'usr.Input'
   })
   
   export class InputComponent implements OnInit {
     constructor() { }
   
     ngOnInit(): void {
     }
   }
   

3. Register the InputComponent view element as a component.

   1. Open the app.module.ts file.
   2. Add the InputComponent view element to the CrtModule decorator.
   3. Register the InputComponent view element as a component, i. e., Angular Element, in the ngDoBootstrap() method of the AppModule root module.
   4. Save the file.

   app.module.ts file for Creatio version 8.0.8 and later

   app.module.ts file

   /* Import the required functionality from the libraries. */
   import { DoBootstrap, Injector, NgModule, ProviderToken } from '@angular/core';
   import { createCustomElement } from '@angular/elements';
   import { BrowserModule } from '@angular/platform-browser';
   import { bootstrapCrtModule, CrtModule } from '@creatio-devkit/common';
   import { InputComponent } from './view-elements/input/input.component';
   
   @CrtModule({
     /* Specify that InputComponent is a view element. */
     viewElements: [InputComponent]
   })
   @NgModule({
     declarations: [
       InputComponent
     ],
     imports: [BrowserModule],
     providers: [],
   })
   export class AppModule implements DoBootstrap {
     constructor(private _injector: Injector) {}
   
     ngDoBootstrap(): void {
       /* Register InputComponent as an Angular Element. */
       const element = createCustomElement(InputComponent, {
         injector: this._injector,
       });
       customElements.define('usr-input', element);
       
       /* Bootstrap CrtModule definitions. */
       bootstrapCrtModule('create_view_element_from_scratch', AppModule, {
         resolveDependency: (token) => this._injector.get(<ProviderToken<unknown>>token)
       });
     }
   }
   

   app.module.ts file for Creatio version 8.0.3-8.0.7

   app.module.ts file

   /* Import the required functionality from the libraries. */
   import { DoBootstrap, Injector, NgModule } from '@angular/core';
   import { createCustomElement } from '@angular/elements';
   import { BrowserModule } from '@angular/platform-browser';
   import { CrtModule } from '@creatio-devkit/common';
   import { InputComponent } from './view-elements/input/input.component';
   
   @CrtModule({
     /* Specify that InputComponent is a view element. */
     viewElements: [InputComponent]
   })
   @NgModule({
     declarations: [
       InputComponent
     ],
     imports: [BrowserModule],
     providers: [],
   })
   export class AppModule implements DoBootstrap {
     constructor(private _injector: Injector) {}
   
     ngDoBootstrap(): void {
       /* Register InputComponent as an Angular Element. */
       const element = createCustomElement(InputComponent, {
         injector: this._injector,
       });
       customElements.define('usr-input', element);
     }
   }
   

4. Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.

As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the sdk_remote_module_package name.

3. Add the custom UI component implemented using remote module to the Freedom UI page 

1. Use the Records & business processes template to create a custom Requests app. To do this, follow the instruction in the user documentation: Manage apps.
2. Set up Creatio for file system development. To do this, follow the instruction in a separate article: External IDEs.

3. Download the packages to the file system using the Creatio IDE. On the Creatio IDE toolbar, select Download packages to the file system in the File system development mode action group.

   
4. Create a Files/src/js directory in the file system’s UsrRequests package directory.
5. Copy the build from the dist project directory to the Files/src/js directory. The path to the project build is as follows: Files/src/js/sdk_remote_module_package.
6. Compile the configuration. To do this, follow the instruction in a separate article: Operations in Creatio IDE.
7. Open the Requests app page workspace and go to the Requests form page page.
8. Click the button in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code of the Freedom UI page.

9. Add the configuration object of the custom component to the viewConfigDiff schema section.

   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       ...,
       {
           "operation": "insert",
           "name": "UsrInput",
           "values": {
               "layoutConfig": {
                   "column": 1,
                   "row": 2,
                   "colSpan": 1,
                   "rowSpan": 1
               },
               /* The property that defines the element type. */
               "type": "usr.Input",
           },
           "parentName": "SideAreaProfileContainer",
           "propertyName": "items",
           "index": 1
       }
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
   

   Complete source code of the page schema

   UsrRequests_FormPage

   define("UsrRequests_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
       return {
           viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
               {
                   "operation": "merge",
                   "name": "Feed",
                   "values": {
                       "dataSourceName": "PDS",
                       "entitySchemaName": "UsrRequests"
                   }
               },
               {
                   "operation": "merge",
                   "name": "AttachmentList",
                   "values": {
                       "columns": [
                           {
                               "id": "df093806-a8ed-40ae-979c-770bec690b3c",
                               "code": "AttachmentListDS_Name",
                               "caption": "#ResourceString(AttachmentListDS_Name)#",
                               "dataValueType": 28,
                               "width": 200
                           }
                       ]
                   }
               },
               {
                   "operation": "insert",
                   "name": "UsrName",
                   "values": {
                       "layoutConfig": {
                           "column": 1,
                           "row": 1,
                           "colSpan": 1,
                           "rowSpan": 1
                       },
                       "type": "crt.Input",
                       "label": "$Resources.Strings.UsrName",
                       "control": "$UsrName",
                       "labelPosition": "auto"
                   },
                   "parentName": "SideAreaProfileContainer",
                   "propertyName": "items",
                   "index": 0
               },
               {
                   "operation": "insert",
                   "name": "UsrInput",
                   "values": {
                       "layoutConfig": {
                           "column": 1,
                           "row": 2,
                           "colSpan": 1,
                           "rowSpan": 1
                       },
                       /* The property that defines the element type. */
                       "type": "usr.Input",
                   },
                   "parentName": "SideAreaProfileContainer",
                   "propertyName": "items",
                   "index": 1
               }
           ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
           viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
               "attributes": {
                   "UsrName": {
                       "modelConfig": {
                           "path": "PDS.UsrName"
                       }
                   },
                   "Id": {
                       "modelConfig": {
                           "path": "PDS.Id"
                       }
                   }
               }
           }/**SCHEMA_VIEW_MODEL_CONFIG*/,
           modelConfig: /**SCHEMA_MODEL_CONFIG*/{
               "dataSources": {
                   "PDS": {
                       "type": "crt.EntityDataSource",
                       "config": {
                           "entitySchemaName": "UsrRequests"
                       },
                       "scope": "page"
                   },
                   "AttachmentListDS": {
                       "type": "crt.EntityDataSource",
                       "scope": "viewElement",
                       "config": {
                           "entitySchemaName": "SysFile",
                           "attributes": {
                               "Name": {
                                   "path": "Name"
                               }
                           }
                       }
                   }
               },
               "primaryDataSourceName": "PDS"
           }/**SCHEMA_MODEL_CONFIG*/,
           handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
           converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
           validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
       };
   });
   

10. Click Save on the client Module Designer’s toolbar.

Outcome of the example 

To view the outcome of the example:

1. Open the Requests app page and click Run app.
2. Click New on the Requests app toolbar.

As a result, Creatio will display the custom UI component on the request page. The custom UI component is implemented using a remote module created in Angular framework.

You can proceed to implement the business logic. For example, you can implement validation or a custom converter. Learn more in separate articles: Implement the business logic of the custom UI component using remote module, Implement the validation in the custom UI component using remote module, Implement a custom converter in the custom UI component using remote module.

1. Implement a custom UI component using remote module 

To implement a custom UI component using remote module, follow the instruction in a separate article: Implement custom UI component using remote module.

2. Implement an input within remote module 

1. Implement an input in the component.

   1. Open the input.component.ts file.
   2. Add the value property to the InputComponent component class. The property manages the input value.
   3. Flag the value property using the Input and CrtInput decorators.
   4. Add the label property to the InputComponent component class. The property manages the input name.
   5. Flag the label property using the Input and CrtInput decorators.
   6. Import the required functionality from the libraries into the component.
   7. Save the file.
   input.component.ts file

   /* Import the required functionality from the libraries. */
   import { Component, Input, OnInit } from '@angular/core';
   import { CrtInput, CrtViewElement } from '@creatio-devkit/common';
   ...
   export class InputComponent implements OnInit {
     constructor() { }
       
     /* Add decorators to the value property. */
     @Input()
     @CrtInput()
     /* The input value. */
     public value: string = '';
   
     /* Add decorators to the label property. */
     @Input()
     @CrtInput()
     /* The input name. */
     public label!: string;
       
     ngOnInit(): void {
     }
   }
   

2. Track changes of input values.

   1. Open the input.component.ts file.
   2. Add the EventEmitter<string>() event to the InputComponent component class. The event tracks input value changes.
   3. Flag the EventEmitter<string>() using the Output and CrtOutput decorators.
   4. Import the required functionality from the libraries into the component.
   5. Save the file.
   input.component.ts file

   /* Import the required functionality from the libraries. */
   import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   import { CrtInput, CrtOutput, CrtViewElement } from '@creatio-devkit/common';
   ...
   export class InputComponent implements OnInit {
     ...
     /* Add decorators to the EventEmitter<string>() event. */
     @Output()
     @CrtOutput()
     /* Track input value changes. */
     public valueChange = new EventEmitter<string>();
     ...
   }
   

   Complete source code of the input.component.ts file

   input.component.ts file

   /* Import the required functionality from the libraries. */
   import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
   import { CrtInput, CrtOutput, CrtViewElement } from '@creatio-devkit/common';
   
   @Component({
     selector: 'usr-input',
     templateUrl: './input.component.html',
     styleUrls: ['./input.component.scss'],
     encapsulation: ViewEncapsulation.ShadowDom
   })
   
   /* Add the CrtViewElement decorator to the InputComponent component. */
   @CrtViewElement({
     selector: 'usr-input',
     type: 'usr.Input'
   })
   
   export class InputComponent implements OnInit {
   
     constructor() { }
   
     /* Add decorators to the value property. */
     @Input()
     @CrtInput()
     /* The input value. */
     public value: string = '';
   
     /* Add decorators to the label property. */
     @Input()
     @CrtInput()
     /* The input name. */
     public label!: string;
   
     /* Add decorators to the EventEmitter<string>() event. */
     @Output()
     @CrtOutput()
     /* Track input value changes. */
     public valueChange = new EventEmitter<string>();
   
     ngOnInit(): void {
     }
   }
   

3. Add the markup of the custom component.

   1. Open the input.component.html file.
   2. Add the markup.
   3. Save the file.
   input.component.html file

   <div class="wrapper">
       <label class="label">{{label}}</label>
       <input
           #input
           class="input"
           type="text"
           [value]="value"
           (keyup)="valueChange.emit(input.value)"
       />
   </div>
   

4. Add the styles of the custom component.

   1. Open the input.component.scss file.
   2. Add the styles.
   3. Save the file.
   input.component.scss file

   .wrapper {
       display: flex;
       flex-direction: row;
       gap: 10px;
       padding: 10px;
       align-items: center;
   }
   

5. Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.

As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the sdk_remote_module_package name.

3. Add the input to the Freedom UI page 

1. Add the custom UI component implemented using remote module to the Freedom UI page. To do this, follow the instruction in a separate article: Implement custom UI component using remote module.

2. Add the input implemented in remote module to the viewConfigDiff schema section.

   • Bind the label property of the UsrInput element to the localizable string of the Name field name.
   • Bind the value property of the UsrInput element to the $UsrName model attribute.
   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       ...,
       {
           "operation": "insert",
           "name": "UsrInput",
           "values": {
               ...,
               /* The property that defines the input name. Bound to the UsrName attribute. */
               "label": "$Resources.Strings.UsrName",
               /* The property that defines the input value. Bound to the UsrName attribute. */
               "value": "$UsrName",
           },
           ...
       }
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
   

   Complete source code of the page schema

   UsrRequests_FormPage

   ddefine("UsrRequests_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
       return {
           viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
               {
                   "operation": "merge",
                   "name": "Feed",
                   "values": {
                       "dataSourceName": "PDS",
                       "entitySchemaName": "UsrRequests"
                   }
               },
               {
                   "operation": "merge",
                   "name": "AttachmentList",
                   "values": {
                       "columns": [
                           {
                               "id": "df093806-a8ed-40ae-979c-770bec690b3c",
                               "code": "AttachmentListDS_Name",
                               "caption": "#ResourceString(AttachmentListDS_Name)#",
                               "dataValueType": 28,
                               "width": 200
                           }
                       ]
                   }
               },
               {
                   "operation": "insert",
                   "name": "UsrName",
                   "values": {
                       "layoutConfig": {
                           "column": 1,
                           "row": 1,
                           "colSpan": 1,
                           "rowSpan": 1
                       },
                       "type": "crt.Input",
                       "label": "$Resources.Strings.UsrName",
                       "control": "$UsrName",
                       "labelPosition": "auto"
                   },
                   "parentName": "SideAreaProfileContainer",
                   "propertyName": "items",
                   "index": 0
               },
               {
                   "operation": "insert",
                   "name": "UsrInput",
                   "values": {
                       "layoutConfig": {
                           "column": 1,
                           "row": 2,
                           "colSpan": 1,
                           "rowSpan": 1
                       },
                       /* The property that defines the element type. */
                       "type": "usr.Input",
                       /* The property that defines the input name. Bound to the UsrName attribute. */
                       "label": "$Resources.Strings.UsrName",
                       /* The property that defines the input value. Bound to the UsrName attribute. */
                       "value": "$UsrName",
                   },
                   "parentName": "SideAreaProfileContainer",
                   "propertyName": "items",
                   "index": 1
               }
           ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
           viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
               "attributes": {
                   "UsrName": {
                       "modelConfig": {
                           "path": "PDS.UsrName"
                       }
                   },
                   "Id": {
                       "modelConfig": {
                           "path": "PDS.Id"
                       }
                   }
               }
           }/**SCHEMA_VIEW_MODEL_CONFIG*/,
           modelConfig: /**SCHEMA_MODEL_CONFIG*/{
               "dataSources": {
                   "PDS": {
                       "type": "crt.EntityDataSource",
                       "config": {
                           "entitySchemaName": "UsrRequests"
                       },
                       "scope": "page"
                   },
                   "AttachmentListDS": {
                       "type": "crt.EntityDataSource",
                       "scope": "viewElement",
                       "config": {
                           "entitySchemaName": "SysFile",
                           "attributes": {
                               "Name": {
                                   "path": "Name"
                               }
                           }
                       }
                   }
               },
               "primaryDataSourceName": "PDS"
           }/**SCHEMA_MODEL_CONFIG*/,
           handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
           converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
           validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
       };
   });
   

3. Click Save on the client Module Designer’s toolbar.

Outcome of the example 

To view the outcome of the example:

1. Open the Requests app page and click Run app.
2. Click New on the Requests app toolbar.
3. Enter "Test" in the Name input.

As a result, Creatio will display the custom input on the request page. The name and value of the custom input match the Name field. The input is implemented using a remote module created in Angular framework.

You can set up input validation if needed. Learn more in a separate article: Implement the validation in the custom UI component using remote module.

1. Implement a custom UI component using remote module 

To implement a custom UI component using remote module, follow the instruction in a separate article: Implement custom UI component using remote module.

2. Implement an input within remote module 

To implement an input within remote module, follow the instruction in a separate article: Implement the business logic of the custom UI component using remote module.

3. Implement the input validation 

1. Add the validity flag of the bound attribute to the component.

   1. Open the input.component.ts file.
   2. Add the valueValidationInfo property to the InputComponent component class. The property displays information that the bound attribute is invalid.
   3. Flag the valueValidationInfo property using the Input and CrtValidationInput decorators.
   4. Import the required functionality from the libraries into the component.
   5. Save the file.
   input.component.ts file

   /* Import the required functionality from the libraries. */
   import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   import { CrtInput, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
   ...
   export class InputComponent implements OnInit {
     ...
     /* Add the decorators to the valueValidationInfo property. */
     @Input()
     @CrtValidationInput()
     /* Display information that the input value is invalid. */ 
     public valueValidationInfo!: CrtValidationInfo;
     ...
   }
   

   Complete source code of the input.component.ts file

   input.component.ts file

   /* Import the required functionality from the libraries. */
   import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
   import { CrtInput, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
   
   @Component({
     selector: 'usr-input',
     templateUrl: './input.component.html',
     styleUrls: ['./input.component.scss'],
     encapsulation: ViewEncapsulation.ShadowDom
   })
   
   /* Add the CrtViewElement decorator to the InputComponent component. */
   @CrtViewElement({
     selector: 'usr-input',
     type: 'usr.Input'
   })
   
   export class InputComponent implements OnInit {
   
     constructor() { }
   
     /* Add decorators to the value property. */
     @Input()
     @CrtInput()
     /* The input value. */
     public value: string = '';
   
     /* Add decorators to the label property. */
     @Input()
     @CrtInput()
     /* The input name. */
     public label!: string;
   
     /* Add decorators to the EventEmitter<string>() event. */
     @Output()
     @CrtOutput()
     /* Track input value changes. */
     public valueChange = new EventEmitter<string>();
   
     /* Add decorators to the valueValidationInfo property. */
     @Input()
     @CrtValidationInput()
     /* Display information that the input value is invalid. */ 
     public valueValidationInfo!: CrtValidationInfo;
   
     ngOnInit(): void {
     }
   
   }
   

2. Add the markup of the custom component if the input value is invalid.

   1. Open the input.component.html file.
   2. Add the markup.
   3. Save the file.
   input.component.html file

   <div class="wrapper">
       <label class="label">{{label}}</label>
       <input
           ...
           [class.invalid]="
           valueValidationInfo &&
           !valueValidationInfo.valid && valueValidationInfo.touched
           "
           ...
       />
   </div>
   

   Complete source code of the input.component.html file

   input.component.html file

   <div class="wrapper">
       <label class="label">{{label}}</label>
       <input
           #input
           class="input"
           [class.invalid]="
           valueValidationInfo &&
           !valueValidationInfo.valid && valueValidationInfo.touched
           "
           type="text"
           [value]="value"
           (keyup)="valueChange.emit(input.value)"
       />
   </div>
   

3. Add the styles of the custom component.

   1. Open the input.component.scss file.
   2. Add the markup.
   3. Save the file.
   input.component.scss file

   .wrapper {
       ...
       .input.invalid {
           background-color: #FDD8CF;
       }
   }
   

   Complete source code of the input.component.scss file

   input.component.scss file

   .wrapper {
       display: flex;
       flex-direction: row;
       gap: 10px;
       padding: 10px;
       align-items: center;
       .input.invalid {
           background-color: #FDD8CF;
       }
   }
   

4. Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.

As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the sdk_remote_module_package name.

Outcome of the example 

To view the outcome of the example:

1. Open the Requests app page and click Run app.
2. Click New on the Requests app toolbar.
3. Enter "Test" in the Name input.
4. Clear the custom input.

As a result, Creatio will display the custom input on the request page. The name and value of the custom input match the Name field. The input is implemented using a remote module created in Angular framework.

You can proceed to add the custom UI component implemented using remote module to the Freedom UI page. Learn more in a separate article: Add the custom UI component implemented using remote module to the library of the Freedom UI Designer.

Example. Add the custom UI component to the library of the Freedom UI Designer. Implement the custom component using a remote module created in Angular framework. Use the image provided below.

1. Implement a custom UI component using remote module 

To implement a custom UI component using remote module, follow the instruction in a separate article: Implement custom UI component using remote module.

2. Implement an input within remote module 

To implement an input within remote module, follow the instruction in a separate article: Implement the business logic of the custom UI component using remote module.

3. Implement the input validation 

To implement the input validation, follow the instruction in a separate article: Implement the validation in the custom UI component using remote module.

4. Add the custom UI component to the library of the Freedom UI Designer 

1. Set up the component layout in the library of the Freedom UI Designer.

   1. Open the input.component.ts file.
   2. Flag the component using the CrtInterfaceDesignerItem decorator that has the toolbarConfig property. The property manages the element layout in the library of the Freedom UI Designer.
   3. Import the required functionality from the libraries into the component.
   4. Upload the image to display in the library of the Freedom UI Designer and specify the path to the image in the icon property. In this example, the image is in the input directory.
   5. Transfer the icon in the string format. To do this, run the npm install raw-loader --save-dev command at the command line terminal of Microsoft Visual Studio Code.
   6. Save the file.
   input.component.ts file

   ...
   /* Import the required functionality from the libraries. */
   import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
   ...
   /* Add the CrtViewElement decorator to the InputComponent component. */
   @CrtInterfaceDesignerItem({
     /* Manage the element layout in the library of the Freedom UI Designer. */
     toolbarConfig: {
       caption: 'Custom Input',
       name: 'CustomInput',
       /* The path to the component image. */
       icon: require('!!raw-loader?{esModule:false}!./icon.svg'),
       defaultPropertyValues: {
         label: 'Custom input'
       }
     }
   })
   ...
   

   Complete source code of the input.component.ts file

   input.component.ts file

   /* Import the required functionality from the libraries. */
   import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement, ViewEncapsulation } from '@creatio-devkit/common';
   
   @Component({
     selector: 'usr-input',
     templateUrl: './input.component.html',
     styleUrls: ['./input.component.scss'],
     encapsulation: ViewEncapsulation.ShadowDom
   })
   
   /* Add the CrtViewElement decorator to the InputComponent component. */
   @CrtViewElement({
     selector: 'usr-input',
     type: 'usr.Input'
   })
   
   /* Add the CrtViewElement to the InputComponent component. */
   @CrtInterfaceDesignerItem({
     /* Manage the element layout in the library of the Freedom UI Designer. */
     toolbarConfig: {
       caption: 'Custom Input',
         name: 'CustomInput',
         /* The path to the component image. */
         icon: require('!!raw-loader?{esModule:false}!./icon.svg'),
         defaultPropertyValues: {
           label: 'Custom input'
         }
     }
   })
   
   export class InputComponent implements OnInit {
   
     constructor() { }
   
     /* Add decorators to the value propety. */
     @Input()
     @CrtInput()
     /* The input value. */
     public value: string = '';
   
     /* Add decorators to the label property. */
     @Input()
     @CrtInput()
     /* The input name. */
     public label!: string;
   
     /* Add decorators to the EventEmitter<string>() event. */
     @Output()
     @CrtOutput()
     /* Track input value changes. */
     public valueChange = new EventEmitter<string>();
     
     /* Add decorators to the valueValidationInfo property. */
     @Input()
     @CrtValidationInput()
     /* Display information that the input value is invalid. */ 
     public valueValidationInfo!: CrtValidationInfo;
   
     ngOnInit(): void {
     }
   
   }
   

2. Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.

As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the sdk_remote_module_package name.

Outcome of the example 

To view the outcome of the example, open the Requests form page page in the working area of the Requests app page.

As a result, Creatio will display the Custom input component in the Custom components library group of the Freedom UI Designer.

Creatio will display the custom UI component when you add it to the canvas of the Freedom UI Designer as well.