Skip to main content
Version: 8.1

Implement the validation in the custom UI component using remote module

Level: intermediate
Example

Add a validator that checks whether the custom UI component is filled out to the record page of the custom Requests section. The custom UI component must be an input. Implement the custom UI component using a remote module created in Angular framework.

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;
      ...
    }

  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>

  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;
        }
    }

  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.

Source code​

/* 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 {
    }

}

Resources​

*.zip archive that contains the implemented Freedom UI app

Angular project that contains the implemented example