Skip to main content
Version: 8.1

Implement the business logic of the custom UI component using remote module

Level: intermediate
Example

Add a custom UI component to the record page of the custom Requests section. The custom UI component must be an input. The name and value of the custom input must match the Name field. 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​

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

  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*/,

  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.

Source codes​

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

Resources​

*.zip archive that contains the implemented Freedom UI app

Angular project that contains the implemented example