Implement a remote module

Guide
PDF
Medium

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.

You can implement a remote module in Creatio version 8.0.3 Atlas and later.

The development of remote modules is based on the Module Federation plugin. The purpose of the Module Federation plugin is to divide the app into multiple smaller modules (components, remote modules) built independently. The plugin lets you develop custom components using various frameworks and library versions. Learn more in the official webpack documentation.

Note. When using the Module Federation plugin, you might experience difficulties with managing libraries that register themselves as global variables, for example, lodash.

The project of a remote module has a modular structure. I. e., the business logic and view elements are aggregated into modules, which, in turn, can be aggregated into higher-level modules.

View an example of the CrtCdkModule root project module that contains the CrtInputModule and CrtButtonModule nested modules that have their own view elements on the chart below.

To implement a remote module:

  1. Create an Angular project to develop a remote module.
  2. Create a remote module.
  3. Implement the business logic of the remote module.
  4. Add the component to the library of the Freedom UI Designer (optional).
  5. Add the remote module to the Freedom UI page.

1. Create an Angular project to develop a remote module 

Develop a remote module in a dedicated npm package using an external IDE. This example covers the custom component development in Microsoft Visual Studio Code. We recommend utilizing components created using the Angular framework. The framework requires a globally installed interface of the @angular/cli command line. To set up the environment for component development using Angular CLI, run the npm install -g @angular/cli command at the command line terminal of Microsoft Visual Studio Code.

You can create an Angular project to develop a remote module in the following ways:

  • using a *.zip archive of the Angular project that contains the template of a remote module
  • using the Clio utility

To create an Angular project to develop a remote module using a *.zip archive:

  1. Download and unpack the *.zip archive.
  2. Open the project in Microsoft Visual Studio Code
  3. Change the <%projectName%> macro of the Angular project name to the name of the package to transfer the remote module. Enter the package name in snake case, for example, process_designer.
  4. Change the <%vendorPrefix%> prefix macro to the object name prefix, for example, usr. The prefix can contain up to 50 lowercase Latin characters.
  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.

To create an Angular project to develop a remote module using the Clio utility:

  1. Install the Clio utility (performed once). To do this, run the dotnet tool install clio -g command at the terminal of Microsoft Visual Studio Code.

  2. Register a new Creatio instance in Clio. To do this, run the clio reg-web-app someApplicationName -u https://mycreatio.com/ -l SomeLogin -p SomePassword command at the Microsoft Visual Studio Code terminal.

    someApplicationName is the Creatio instance name.

    https://mycreatio.com/ is the Creatio instance URL.

    SomeLogin is the user login to the Creatio instance.

    SomePassword is the user password to the Creatio instance.

  3. Install the cliogate system package into your development environment. To do this, run the clio install-gate someApplicationName command at the Microsoft Visual Studio Code terminal.
  4. Restart your Creatio instance. To do this, run the clio restart someApplicationName command at the Microsoft Visual Studio Code terminal.
  5. Create a new workspace. To do this, run the clio createw command at the Microsoft Visual Studio Code terminal.

  6. Create a project for the remote module. To do this, run the clio ui someApplicationName -v usr --package SomePackageName command at the Microsoft Visual Studio Code terminal. If the workspace does not contain a package that has the specified name, Microsoft Visual Studio Code will create a new package that has the specified name.

    SomePackageName is the name of the package to implement the remote module.

  7. Install the npm modules. To do this, run the npm i command at the command line terminal of Microsoft Visual Studio Code.
  8. Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
  9. Upload the changes from the workspace into Creatio. To do this, run the clio pushw -e someApplicationName command at the Microsoft Visual Studio Code terminal.

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

View a detailed example that creates an Angular project to develop a remote module in a separate article: Implement a remote module.

2. Create a remote module 

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

    view-elements specifies that the Angular component is a view element.

    some_component_name is the custom component name.

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

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

    1. Go to the some_component_name.component.ts file.

    2. Import the functionality of the CrtViewElement decorator from the @creatio-devkit/common library to the component.

      Note. Run the npm install @creatio-devkit/common command to install the latest version of the @creatio-devkit/common library.

    3. Flag the component using the CrtViewElement decorator.
    4. Save the file.
    Some_component_name.component.ts file
    import { Component, OnInit } from '@angular/core';
/* Import the functionality of the CrtViewElement decorator from the @creatio-devkit/common library. */
import { CrtViewElement } from '@creatio-devkit/common';

@Component({
  selector: 'usr-some_component_name',
  templateUrl: './some_component_name.component.html',
  styleUrls: ['./some_component_name.component.scss']
})

/* Add the CrtViewElement decorator to the SomeComponentNameComponent component. */
@CrtViewElement({
  selector: 'usr-some_component_name',
  type: 'usr.SomeComponentName'
})

export class SomeComponentNameComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}

  3. Register the SomeComponentNameComponent view element as a component.

    1. Go to the app.module.ts file.
    2. Add the SomeComponentNameComponent view element to the CrtModule decorator.
    3. Register the SomeComponentNameComponent view element as a component, i. e., Angular Element, in the ngDoBootstrap() method of the AppModule root module. Learn more in the Angular documentation.
    4. Save the file.
    App.module.ts file
    import { DoBootstrap, Injector, NgModule } from '@angular/core';
/* Import the functionality of the createCustomElement function from the @angular/elements library. */
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { CrtModule } from '@creatio-devkit/common';
import { SomeComponentNameComponent } from './view-elements/some_component_name/some_component_name.component';

@CrtModule({
  /* Specify that SomeComponentNameComponent is a view element. */
  viewElements: [SomeComponentNameComponent]
})
@NgModule({
  declarations: [
    SomeComponentNameComponent
  ],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule implements DoBootstrap {
  constructor(private _injector: Injector) {}

  ngDoBootstrap(): void {
    /* Register SomeComponentNameComponent as an Angular Element. */
    const element = createCustomElement(SomeComponentNameComponent, {
      injector: this._injector,
    });
    customElements.define('usr-some_component_name', 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 a build that has the <%projectName%> name specified on step 1 to the dist directory of the Angular project.

View a detailed example that creates a remote module in a separate article: Implement a remote module.

3. Implement the business logic of the remote module 

  1. Implement the required business logic in the component.

    1. Go to the some_component_name.component.ts file.
    2. Import the functionality of the Input decorator from the @angular/core library into the component.
    3. Import the functionality of the CrtInput decorator from the @creatio-devkit/common library into the component.
    4. Add the value property to the SomeComponentNameComponent component class. The property manages the component value.
    5. Flag the value property using the Input and CrtInput decorators.
    6. Save the file.
    Some_component_name.component.ts file
    /* Import the decorator functionality from the @angular/core library. */
import { Component, Input, OnInit } from '@angular/core';
/* Import the decorator functionality from the @creatio-devkit/common library. */
import { CrtInput, CrtViewElement } from '@creatio-devkit/common';
...
export class SomeComponentNameComponent implements OnInit {
  constructor() { }
    
  /* Add decorators to the value property. */
  @Input()
  @CrtInput()
  /* The component value. */
  public value: some_value_type;
    
  ngOnInit(): void {
  }
}
  2. Add the markup of the custom component to the some_component_name.component.html file.
  3. Add the styles of the custom component to the some_component_name.component.scss file.
  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 a build that has the <%projectName%> name specified on step 1 to the dist directory of the Angular project.

View detailed examples that implement the business logic of the remote module in separate articles: Implement the business logic of a remote module, Implement the validation in a remote module.

4. Add the component to the library of the Freedom UI Designer (optional) 

We recommend adding the remote module to the library of the Freedom UI Designer if you are going to use the component as part of no-code development.

To add a component to the library of the Freedom UI Designer:

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

    1. Go to the some_component_name.component.ts file.
    2. Import the functionality of the CrtInterfaceDesignerItem decorator from the @creatio-devkit/common library into the component.
    3. 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.

    4. Localize the remote module.

      Localization of remote modules during development lets you save time spent on translating the finished app. The @creatio-devkit/common library provides the sdk.SysValuesService service of system variables for localization. Use the service to retrieve the current culture from the userCulture system variable.

      Creatio version 8.0.3 Atlas and later lets you perform the following localization actions:

      • Localize the metadata.
      • Upload the translations from static content.

      To localize the metadata:

      1. Flag the metadata to localize. To do this, use the localize() function.

        Example that uses the localize() function
        @CrtInterfaceDesignerItem({
  toolbarConfig: {
    /* The localizable name of the component. */
    caption: localize('SomeComponentName.Caption'),
    name: 'usr_some_component_name',
  },
})

      2. Specify the localizeMetadata() function when calling the bootstrapCrtModule() function. The localizeMetadata() function is required to translate the metadata flagged using the localize() function. The key to translate the value is an incoming parameter of the localizeMetadata() function. The function returns the translated value.

        Example that uses the localizeMetadata() function
        const translateService = this._injector.get(TranslateService);
bootstrapCrtModule(AppModule, {
  localizeMetadata: (key: string) => translateService.instant(key),
});

      To upload the translations from static content:

      1. Find out the URL to upload the translations. To do this, use the __webpack_public_path__ global variable. Learn more in the official webpack documentation.

      2. Implement the mechanism that uploads translations.

        Example that uploads the translations from static content
        declare const __webpack_public_path__: string;

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en-US',
      loader: {
        provide: TranslateLoader,
        useFactory: (httpClient: HttpClient) => {
          return new TranslateHttpLoader(
            httpClient,
            __webpack_public_path__ + '/assets/i18n/',
            '.json'
          );
        },
        deps: HttpClient],
      },
    }),
  ],
  ...
    5. Upload the image to display in the library of the Freedom UI Designer and specify the path to the image in the icon property. We recommend using a *.svg image.
    6. Save the file.
    Some_component_name.component.scss file
    ...
/* Import the decorator functionality from the @creatio-devkit/common library. */
import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
...
/* Add the CrtViewElement decorator to the SomeComponentNameComponent component. */
@CrtInterfaceDesignerItem({
  /* Manages the element layout in the library of the Freedom UI Designer. */
  toolbarConfig: {
    /* The localizable name of the component. */
    caption: localize('SomeComponentName.Caption'),
    name: 'usr_some_component_name',
    /* The path to the component image. */
    icon: require('!!raw-loader?{esModule:false}!./some_picture_name.png'),
    defaultPropertyValues: {
      /* The localizable name of the component in the library of the Freedom UI Designer. */
      label: ‘Some component name'
    }
  }
})
...
  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 a build that has the <%projectName%> name specified on step 1 to the dist directory of the Angular project.

View a detailed example that adds the component to the library of the Freedom UI Designer in a separate article: Add a remote module to the library of the Freedom UI Designer.

5. Add a remote module to the Freedom UI page 

  1. Create a custom app. To do this, follow the instruction in the user documentation: Create a custom app.
  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.

    You can download the packages to the file system in the following ways:

    • using the Creatio UI
    • using the Clio utility

    To download the packages to the file system using the Creatio UI:

    1. Select Download packages to the file system in the File system development mode action group on the toolbar of the Configuration section.

    2. Create a Files/src/js directory in the file system’s app package directory.
    3. 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/<%projectName%>. The <%projectName%> parameter must match the value specified on step 1.

    4. Compile the configuration. To do this, follow the instruction in a separate article: Operations in Creatio IDE.

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

    To download packages to the file system using the Clio utility:

    1. 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/<%projectName%>. The <%projectName%> parameter must match the value specified on step 1.
    2. Install the package into the app. To do this, run the clio install SomePackageName -e someApplicationName command at the Microsoft Visual Studio Code terminal.
  4. Open the needed page in the Freedom UI Designer.
  5. Add the custom component to the Freedom UI page.
  6. 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.

  7. Bind the value property of the custom component to the corresponding model attribute in the viewConfigDiff schema section.

    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "Input",
        "values": {
            ...,
            /* The property that defines the element type. */
            "type": "usr.Input",
            /* The property that defines the component value. Bound to the SomeAttributeName attribute. */
            "value": "$SomeAttributeName"
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
  8. Click Save on the client Module Designer’s toolbar.

As a result, Creatio will add the remote module to the Freedom UI page.

View a detailed example that adds a remote module to the Freedom UI page in a separate article: Implement a remote module.

See also
Packages file content
External IDEs
Operations in Creatio IDE
Resources
*.zip archive of the Angular project that contains the remote component template
Official Angular documentation (the concept of Angular Element)
Official webpack documentation (the description of the __webpack_public_path__ …
Implement a remote module
Medium

The example is relevant to Creatio version 8.0.3 and later.

Example. Add a remote module created using the Angular framework to the record page of the custom Requests section.

1. Create an Angular project to develop a remote module 

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

To create an Angular project to develop a remote module using a *.zip archive:

  1. Download and unpack the *.zip archive.
  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.

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

2. Create a remote module 

  1. Create an Angular component in the project. To do this, run the ng g c view-elements/input 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. Go to the input.component.ts file.
    2. Import the functionality of the CrtViewElement decorator from the @creatio-devkit/common library to the component.
    3. Flag the component using the CrtViewElement decorator.
    4. Save the file.
    Input.component.ts file
    import { Component, OnInit } from '@angular/core';
/* Import the functionality of the CrtViewElement decorator from the @creatio-devkit/common library. */
import { CrtViewElement } from '@creatio-devkit/common';

@Component({
  selector: 'usr-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})

/* 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. Go to 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
    import { DoBootstrap, Injector, NgModule } from '@angular/core';
/* Import the functionality of the createCustomElement function from the @angular/elements library. */
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 a build that has the sdk_remote_module_package name to the dist directory of the Angular project.

3. Add a 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: Create a custom app.
  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. For this example, download the packages using the Creatio UI. On the Configuration section 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. In the Requests application page workspace, open 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": "LeftAreaProfileContainer",
        "propertyName": "items",
        "index": 1
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    Complete source code of the page schema
  10. Click Save on the client Module Designer’s toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Go to the Requests app page and click Run app.
  2. On the Requests application toolbar, click New.

As a result, Creatio will display the custom component implemented using the Angular framework on the request page.

You can proceed to implement the business logic. Learn more in a separate article: Implement the business logic of the remote module.

Resources
Package with example implementation
*.zip archive of the Angular project that contains the remote module template
Angular project that contains the implemented example
Implement the business logic of the remote module
Medium

The example is relevant to Creatio version 8.0.3 and later.

Example. Add an input to the record page of the custom Requests section. The name and value of the custom input must match the Name field. Implement the input using a remote module created using Angular framework.

1. Implement a remote module 

To implement a remote module, follow the instruction in a separate article: Implement a remote module.

2. Implement an input 

  1. Implement an input in the component

    1. Go to the input.component.ts file.
    2. Import the functionality of the Input decorator from the @angular/core library into the component.
    3. Import the functionality of the CrtInput decorator from the @creatio-devkit/common library into the component.
    4. Add the value property to the InputComponent component class. The property manages the input value.
    5. Flag the value property using the Input and CrtInput decorators.
    6. Add the label property to the InputComponent component class. The property manages the input name.
    7. Flag the label property using the Input and CrtInput decorators.
    8. Save the file.
    Input.component.ts file
    /* Import the decorator functionality from the @angular/core library. */
import { Component, Input, OnInit } from '@angular/core';
/* Import the decorator functionality from the @creatio-devkit/common library. */
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. Go to the input.component.ts file.
    2. Import the functionality of the Output decorator and EventEmitter event from the @angular/core library into the component.
    3. Import the functionality of the CrtOutput decorator from the @creatio-devkit/common library into the component.
    4. Add the EventEmitter<string>() event to the InputComponent component class. The event tracks input value changes.
    5. Flag the EventEmitter<string>() using the Output and CrtOutput decorators.
    6. Save the file.
    Input.component.ts file
    /* Import the decorator functionality from the @angular/core library. */
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
/* Import the decorator functionality from the @creatio-devkit/common library. */
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

  3. Add the markup of the custom component to the input.component.html 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 to the input.component.scss 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 a build that has the sdk_remote_module_package name to the dist directory of the Angular project.

3. Add the input to the Freedom UI page 

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

  2. Add the input implemented in a 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": {
            "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": "LeftAreaProfileContainer",
        "propertyName": "items",
        "index": 1
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    Complete source code of the page schema
  3. Click Save on the client Module Designer’s toolbar.

The outcome of the example 

To view the outcome of the example:

  1. Go to 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 record page. The name and value of the custom input match the Name field. The input is implemented using a remote module created using Angular framework.

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

Resources
Package that contains the implemented example
Angular project that contains the implemented example
Implement the validation in the remote module
Medium

The example is relevant to Creatio version 8.0.3 and later.

Example. Add a validator that checks whether the input is filled out to the record page of the custom Requests section. Implement the input using a remote module created using Angular framework.

1. Implement a remote module 

To implement a remote module, follow the instruction in a separate article: Implement a remote module.

2. Implement an input 

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

3. Implement the input validation 

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

    1. Go to the input.component.ts file.
    2. Import the functionality of the CrtValidationInfo decorator from the @creatio-devkit/common library into the component.
    3. Add the valueValidationInfo property to the InputComponent component class. The property displays information that the bound attribute is invalid.
    4. Flag the valueValidationInfo property using the Input and CrtValidationInput decorators.
    5. Save the file.
    Input.component.ts file
    /* Import the decorator functionality from the @angular/core library. */
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
/* Import the decorator functionality from the @creatio-devkit/common library. */
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

  2. Add the markup of the custom component if the input value is invalid to the input.component.html 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

  3. Add the styles of the custom component to the input.component.scss file.

    input.component.scss file
    .wrapper {
    ...
    .input.invalid {
        background-color: #FDD8CF;
    }
}
    Complete source code of the input.component.scss file
  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 a build that has the sdk_remote_module_package name to the dist directory of the Angular project.

The outcome of the example 

To view the outcome of the example:

  1. Go to the Requests app page and click Run app.
  2. On the Requests application toolbar, click New.
  3. Enter "Test" in the Name input.
  4. Clear the custom input.

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

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

Resources
Package that contains the implemented example
Angular project that contains the implemented example
Add the remote module to the library of the Freedom UI Designer
Medium

The example is relevant to Creatio version 8.0.3 and later.

Example. Add a remote module to the library of the Freedom UI Designer. Use the image provided below.

1. Implement a remote module 

To implement a remote module, follow the instruction in a separate article: Implement a remote module.

2. Implement an input 

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

3. Implement the input validation 

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

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

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

    1. Go to the input.component.ts file.
    2. Import the functionality of the CrtInterfaceDesignerItem decorator from the @creatio-devkit/common library into the component.
    3. 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.
    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. Save the file.
    Input.component.ts file
    ...
/* Import the decorator functionality from the @creatio-devkit/common library. */
import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
...
/* Add the CrtViewElement decorator to the InputComponent component. */
@CrtInterfaceDesignerItem({
  /* Manages 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.png'),
    defaultPropertyValues: {
      label: 'Custom input'
    }
  }
})
...
    Complete source code of the input.component.ts file
  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 a build that has the sdk_remote_module_package name to the dist directory of the Angular project.

The 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 component when you add it to the canvas of the Freedom UI Designer as well.

Resources
Package that contains the implemented example
Angular project that contains the implemented example