Реализовать пользовательский компонент

Руководство
Основы

Creatio предоставляет возможность расширения предустановленного набора компонентов, которые используются для кастомизации страницы Freedom UI, путем реализации пользовательских компонентов.

Виды пользовательских компонентов, которые позволяет реализовать Creatio:

  • Пользовательский компонент на основе элемента классической страницы Creatio. Поддерживается с версии Creatio 8.0.2 Atlas и выше.
  • Внешний пользовательский компонент (remote module). Поддерживается с версии Creatio 8.0.3 Atlas и выше.

Реализовать пользовательский компонент на основе элемента классической страницы Creatio 

Возможность реализовать пользовательский компонент на основе элемента классической страницы доступна в Creatio версии 8.0.2 Atlas и выше.

Чтобы реализовать пользовательский компонент на основе элемента классической страницы Creatio:

  1. Создайте пользовательский компонент.
  2. Добавьте пользовательский компонент на страницу Freedom UI.

1. Создать пользовательский компонент 

  1. Создайте схему модуля. Для этого воспользуйтесь инструкцией, которая приведена в статье Клиентский модуль.

  2. Реализуйте пользовательский компонент.

    1. Добавьте в AMD-модуль зависимость от библиотеки @creatio-devkit/common.

      Пример добавления зависимости в AMD-модуль UsrAppClientSchemaName
      /* Объявление AMD-модуля. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], function (sdk) {
    ...
});

    2. Объявите класс компонента.

      Пример объявления класса UsrAppClientSchemaName
      /* Объявление AMD-модуля. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], (sdk) {
    /* Объявление класса. */
    class UsrAppClientSchemaName extends HTMLElement {
        constructor() {
            super();
            const shadowDom = this.attachShadow({mode: 'open'});
            shadowDom.innerHTML = '<h1>UsrAppClientSchemaName works!</h1>'
        } 
    }
    ...
});

    3. Зарегистрируйте компонент.

      Пример регистрации компонента UsrAppClientSchemaName
      /* Объявление AMD-модуля. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], (sdk) {
    ...
    /* Регистрация компонента. */
    customElements.define('usr-custom-view-element', UsrAppClientSchemaName);
    ...
});

    4. Зарегистрируйте компонент в качестве визуального элемента.

      Пример регистрации компонента usr-custom-view-element
      /* Объявление AMD-модуля. */
define("UsrAppClientSchemaName", ["@creatio-devkit/common"], (sdk) {
    ...
    /* Регистрация компонента в качестве визуального элемента. */
    sdk.registerViewElement({
        type: 'usr.CustomViewElement',
        selector: 'usr-custom-view-element'
    });
});

2. Добавить пользовательский компонент на страницу Freedom UI 

  1. В объявлении AMD-модуля в качестве зависимости добавьте модуль пользовательского компонента.

    Пример добавления зависимости UsrAppClientSchemaName
    /* Объявление AMD-модуля. */
define("UsrAppClientSchemaName1", ["UsrAppClientSchemaName"], () {
    ...
});

  2. В секцию viewConfigDiff добавьте конфигурационный объект модуля с пользовательским компонентом.

    Пример конфигурационного объекта модуля с пользовательским компонентом UsrCustomViewElement представлен ниже.

    Секция viewConfigDiff
    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*/,

На заметку. Creatio не предоставляет возможности добавления пользовательского компонента на основе элемента классической страницы Creatio в библиотеку элементов Freedom UI дизайнера. Вместо пользовательского компонента на холсте страницы Freedom UI в дизайнере отображается заглушка. Это связано с тем, что элемент классической страницы Creatio реализован на фреймворке ExtJs. Чтобы пользовательский компонент отображался в библиотеке элементов Freedom UI дизайнера, реализуйте внешний пользовательский компонент. Для этого воспользуйтесь инструкцией, которая приведена в пункте Реализовать внешний пользовательский компонент.

Подробный пример реализации пользовательского компонента приведен в статье Реализовать пользовательский компонент на основе элемента классической страницы Creatio.

Реализовать внешний пользовательский компонент 

Возможность реализовать внешний пользовательский компонент доступна в Creatio версии 8.0.3 Atlas и выше.

В основе разработки внешнего пользовательского компонента лежит плагин Module Federation. Назначение плагина Module Federation — разделить приложение на множество мелких модулей (компонентов, remote modules), сборка которых выполняется независимо. Этот плагин позволяет разрабатывать пользовательские компоненты на разных фреймворках и использовать разные версии библиотек. Подробнее читайте в официальной документации webpack.

На заметку. При использовании плагина Module Federation могут возникать сложности в работе с библиотеками, которые регистрируют себя в качестве глобальных переменных (например, lodash).

Проект внешнего пользовательского компонента (remote module) построен по модульной структуре. Т. е. бизнес-логика и визуальные элементы объединяются в модули, которые, в свою очередь, могут объединяться в модули высшего порядка.

Пример корневого модуля проекта CrtCdkModule, который содержит вложенные модули CrtInputModule и CrtButtonModule с собственными визуальными элементами представлен на схеме ниже.

Чтобы реализовать внешний пользовательский компонент:

  1. Создайте Angular-проект для разработки внешнего пользовательского компонента.
  2. Создайте внешний пользовательский компонент.
  3. Реализуйте бизнес-логику внешнего пользовательского компонента.
  4. Добавьте компонент в библиотеку Freedom UI дизайнера (опционально).
  5. Добавьте внешний пользовательский компонент на страницу Freedom UI.

1. Создать Angular-проект для разработки внешнего пользовательского компонента 

Внешний пользовательский компонент разрабатывается в отдельном npm-пакете во внешней IDE. Рассмотрим разработку внешнего пользовательского компонента в Microsoft Visual Studio Code. Рекомендуем использовать компоненты, которые созданы на фреймворке Angular. Для работы фреймворка необходим глобально установленный интерфейс командной строки @angular/cli. Чтобы настроить окружение для разработки компонентов средствами Angular CLI, в терминале командной строки Microsoft Visual Studio Code выполните команду npm install -g @angular/cli.

Способы создания Angular-проекта для разработки внешнего пользовательского компонента:

  • Через *.zip-архив, который содержит Angular-проект c шаблоном внешнего пользовательского компонента.
  • Через утилиту Clio.

Чтобы создать Angular-проект для разработки внешнего пользовательского компонента с использованием *.zip-архива:

  1. Скачайте и разархивируйте *.zip-архив.
  2. Откройте проект в Microsoft Visual Studio Code.
  3. Во всех файлах проекта измените значение макроса имени Angular-проекта <%projectName%> на имя пакета, в который планируется перенести внешний пользовательский компонент. Для имени пакета используйте нотацию Snake case (например, process_designer).
  4. Во всех файлах проекта измените значение макроса префикса <%vendorPrefix%> на префикс названия объекта (например, usr). Префикс может содержать символы латинского алфавита в нижнем регистре. Максимальная длина префикса — 50 символов.
  5. Установите npm-модули. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm i. Операция установки может занять некоторое время.

Чтобы создать Angular-проект для разработки внешнего пользовательского компонента с использованием утилиты Clio:

  1. Установите утилиту Clio (выполняется однократно). Для этого в терминале Microsoft Visual Studio Code выполните команду dotnet tool install clio -g.

  2. Зарегистрируйте в Clio новое приложение Creatio. Для этого в терминале Microsoft Visual Studio Code выполните команду clio reg-web-app someApplicationName -u https://mycreatio.com/ -l SomeLogin -p SomePassword.

    someApplicationName — название приложения Creatio.

    https://mycreatio.com/ — адрес приложения Creatio.

    SomeLogin — логин пользователя для авторизации в приложении Creatio.

    SomePassword — пароль пользователя для авторизации в приложении Creatio.

  3. Установите системный пакет cliogate в вашу рабочую среду. Для этого в терминале Microsoft Visual Studio Code выполните команду clio install-gate someApplicationName.
  4. Перезапустите ваше приложение Creatio. Для этого в терминале Microsoft Visual Studio Code выполните команду clio restart someApplicationName.
  5. Создайте новое рабочее пространство. Для этого в терминале Microsoft Visual Studio Code выполните команду clio createw.

  6. Создайте проект с внешним пользовательским компонентом. Для этого в терминале Microsoft Visual Studio Code выполните команду clio ui someApplicationName -v usr --package SomePackageName. Если в рабочем пространстве отсутствует пакет с указанным именем, то будет создан новый пакет с указанным названием.

    SomePackageName — название пакета для реализации внешнего пользовательского компонента.

  7. Установите npm-модули. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm i.
  8. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.
  9. Загрузите изменения с рабочего пространства в приложение Creatio. Для этого в терминале Microsoft Visual Studio Code выполните команду clio pushw -e someApplicationName.

В результате будет создан Angular-проект для разработки внешнего пользовательского компонента.

Подробный пример создания Angular-проекта для разработки внешнего пользовательского компонента приведен в статье Реализовать внешний пользовательский компонент.

2. Создать внешний пользовательский компонент 

  1. В проекте создайте Angular-компонент. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду ng g c view-elements/some_component_name.

    view-elements указывает, что текущий Angular-компонент является визуальным элементом.

    some_component_name — имя пользовательского компонента.

    В результате в каталог src/app/view-elements/some_component_name проекта будут добавлены файлы компонента.

  2. Укажите, что компонент SomeComponentNameComponent является визуальным элементом.

    1. Перейдите в файл some_component_name.component.ts.
    2. В компонент импортируйте функциональность декоратора CrtViewElement из библиотеки @creatio-devkit/common.
    3. Отметьте компонент декоратором CrtViewElement.
    4. Сохраните файл.
    Файл some_component_name.component.ts
    import { Component, OnInit } from '@angular/core';
/* Импорт функциональности декоратора CrtViewElement из библиотеки @creatio-devkit/common. */
import { CrtViewElement } from '@creatio-devkit/common';

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

/* Добавляем декоратор CrtViewElement к компоненту SomeComponentNameComponent. */
@CrtViewElement({
  selector: 'usr-some_component_name',
  type: 'usr.SomeComponentName'
})

export class SomeComponentNameComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}

  3. Зарегистрируйте визуальный элемент SomeComponentNameComponent в качестве компонента.

    1. Перейдите в файл app.module.ts.
    2. В декоратор CrtModule добавьте визуальный элемент SomeComponentNameComponent.
    3. В методе ngDoBootstrap() корневого модуля AppModule зарегистрируйте визуальный элемент SomeComponentNameComponent в качестве компонента (т. е. Angular Element). Подробнее читайте в официальной документации Angular.
    4. Сохраните файл.
    Файл app.module.ts
    import { DoBootstrap, Injector, NgModule } from '@angular/core';
/* Импорт функциональности функции createCustomElement из библиотеки @angular/elements. */
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({
  /* Указывает, что SomeComponentNameComponent является визуальным элементом. */
  viewElements: [SomeComponentNameComponent]
})
@NgModule({
  declarations: [
    SomeComponentNameComponent
  ],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule implements DoBootstrap {
  constructor(private _injector: Injector) {}

  ngDoBootstrap(): void {
    /* Регистрирует SomeComponentNameComponent в качестве Angular Element. */
    const element = createCustomElement(SomeComponentNameComponent, {
      injector: this._injector,
    });
    customElements.define('usr-some_component_name', element);
  }
}
  4. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.

В результате в каталог dist Angular-проекта будет добавлена сборка с именем <%projectName%>, которое указано на шаге 1.

Подробный пример создания внешнего пользовательского компонента приведен в статье Реализовать внешний пользовательский компонент.

3. Реализовать бизнес-логику внешнего пользовательского компонента 

  1. В компоненте реализуйте необходимую бизнес-логику.

    1. Перейдите в файл some_component_name.component.ts.
    2. В компонент импортируйте функциональность декоратора Input из библиотеки @angular/core.
    3. В компонент импортируйте функциональность декоратора CrtInput из библиотеки @creatio-devkit/common.
    4. В класс компонента SomeComponentNameComponent добавьте свойство value, которое отвечает за значение компонента.
    5. Свойство value отметьте декораторами Input и CrtInput.
    6. Сохраните файл.
    Файл some_component_name.component.ts
    /* Импорт функциональности декораторов из библиотеки @angular/core. */
import { Component, Input, OnInit } from '@angular/core';
/* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
import { CrtInput, CrtViewElement } from '@creatio-devkit/common';
...
export class SomeComponentNameComponent implements OnInit {
  constructor() { }
    
  /* Добавляем декораторы к свойству value. */
  @Input()
  @CrtInput()
  /* Значение компонента. */
  public value: some_value_type;
    
  ngOnInit(): void {
  }
}
  2. В файл some_component_name.component.html добавьте разметку пользовательского компонента.
  3. В файл some_component_name.component.scss добавьте стили пользовательского компонента.
  4. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.

В результате в каталог dist Angular-проекта будет добавлена сборка с именем <%projectName%>, которое указано на шаге 1.

Подробный пример реализации бизнес-логики внешнего пользовательского компонента приведен в статьях Реализовать бизнес-логику внешнего пользовательского компонента и Реализовать валидацию во внешнем пользовательском компоненте.

4. Добавить компонент в библиотеку Freedom UI дизайнера (опционально) 

Рекомендуем добавить внешний пользовательский компонент в библиотеку Freedom UI дизайнера, если планируется его использование при no-code разработке.

Чтобы добавить компонент в библиотеку Freedom UI дизайнера:

  1. Настройте отображение компонента в библиотеке Freedom UI дизайнера.

    1. Перейдите в файл some_component_name.component.ts.
    2. В компонент импортируйте функциональность декоратора CrtInterfaceDesignerItem из библиотеки @creatio-devkit/common.
    3. Отметьте компонент декоратором CrtInterfaceDesignerItem со свойством toolbarConfig, которое отвечает за отображение элемента в библиотеке Freedom UI дизайнера.

    4. Выполните локализацию внешнего пользовательского компонента.

      Выполнение локализации внешнего пользовательского компонента на этапе разработки позволит сэкономить время на переводе уже готового приложения. Для выполнения локализации библиотека @creatio-devkit/common предоставляет сервис системных переменных sdk.SysValuesService, из которого можно получить текущую культуру (системная переменная userCulture).

      Действия по локализации, которые позволяет выполнить Creatio версии 8.0.3 Atlas и выше:

      • Локализовать метаданные.
      • Загрузить переводы из статического контента.

      Чтобы локализовать метаданные:

      1. Отметьте метаданные, которые нуждаются в локализации. Для этого используйте функцию localize().

        Пример использования функции localize()
        @CrtInterfaceDesignerItem({
  toolbarConfig: {
    /* Локализуемое название компонента. */
    caption: localize('SomeComponentName.Caption'),
    name: 'usr_some_component_name',
  },
})

      2. При вызове функции bootstrapCrtModule() укажите функцию localizeMetadata(). Функция localizeMetadata() используется для перевода метаданных, которые отмечены функцией localize(). В качестве входящего параметра функция localizeMetadata() принимает ключ для перевода значения. Функция возвращает переведенное значение.

        Пример использования функции localizeMetadata()
        const translateService = this._injector.get(TranslateService);
bootstrapCrtModule(AppModule, {
  localizeMetadata: (key: string) => translateService.instant(key),
});

      Чтобы загрузить переводы из статического контента:

      1. Узнайте URL, по которому необходимо загрузить переводы. Для этого используйте глобальную переменную __webpack_public_path__. Подробнее читайте в официальной документации webpack.

      2. Реализуйте логику загрузки переводов.

        Пример загрузки переводов из статического контента
        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. Загрузите изображение, которое планируется отображать в библиотеке Freedom UI дизайнера и в свойстве icon укажите путь к изображению. Рекомендуем использовать изображение в формате *.svg.
    6. Сохраните файл.
    Файл some_component_name.component.scss
    ...
/* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
...
/* Добавляем декоратор CrtViewElement к компоненту SomeComponentNameComponent. */
@CrtInterfaceDesignerItem({
  /* Отвечает за отображение элемента в библиотеке Freedom UI дизайнера. */
  toolbarConfig: {
    /* Локализуемое название компонента. */
    caption: localize('SomeComponentName.Caption'),
    name: 'usr_some_component_name',
    /* Путь к изображению для компонента. */
    icon: require('!!raw-loader?{esModule:false}!./some_picture_name.png'),
    defaultPropertyValues: {
      /* Локализуемое название компонента в библиотеке Freedom UI дизайнера. */
      label: 'Some component name'
    }
  }
})
...
  2. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.

В результате в каталог dist Angular-проекта будет добавлена сборка с именем <%projectName%>, которое указано на шаге 1.

Подробный пример добавления компонента в библиотеку Freedom UI дизайнера приведен в статье Добавить внешний пользовательский компонент в библиотеку Freedom UI дизайнера.

5. Добавить внешний пользовательский компонент на страницу Freedom UI 

  1. Создайте пользовательское приложение. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. Настройте Creatio для работы в файловой системе. Для этого воспользуйтесь инструкцией, которая приведена в статье Внешние IDE.

  3. Выгрузите пакеты в файловую систему.

    Способы выгрузки пакетов в файловую систему:

    • Через интерфейс приложения.
    • Через утилиту Clio.

    Чтобы выгрузить пакеты в файловую систему через интерфейс приложения:

    1. На панели инструментов раздела Конфигурация (Configuration) в группе действий Разработка в файловой системе (File system development mode) выберите Выгрузить все пакеты в файловую систему (Download packages to file system).

    2. В каталоге пакета созданного приложения в файловой системе создайте каталог Files/src/js.
    3. Из каталога dist проекта cкопируйте сборку в каталог Files/src/js. Путь к сборке проекта: Files/src/js/<%projectName%>. Значение параметра <%projectName%> должно совпадать со значением, которое указано на шаге 1.

    4. Выполните компиляцию конфигурации. Для этого воспользуйтесь инструкцией, которая приведена в статье Операции в Creatio IDE.

      В результате пользовательский компонент будет отображаться в библиотеке Freedom UI дизайнера в группе Пользовательские компоненты (Custom components).

    Чтобы выгрузить пакеты в файловую систему через утилиту Clio:

    1. Из каталога dist проекта cкопируйте сборку в каталог Files/src/js. Путь к сборке проекта: Files/src/js/<%projectName%>. Значение параметра <%projectName%> должно совпадать со значением, которое указано на шаге 1.
    2. Установите пакет в приложение. Для этого в терминале Microsoft Visual Studio Code выполните команду clio install SomePackageName -e someApplicationName.
  4. Во Freedom UI дизайнере откройте необходимую страницу.
  5. Добавьте пользовательский компонент на страницу Freedom UI.
  6. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

  7. В секции viewConfigDiff привяжите свойство value пользовательского компонента к соответствующему атрибуту модели.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "Input",
        "values": {
            ...,
            /* Свойство, которое определяет тип элемента. */
            "type": "usr.Input",
            /* Свойство, которое определяет значение компонента. Привязано к значению атрибута SomeAttributeName. */
            "value": "$SomeAttributeName"
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
  8. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

В результате внешний пользовательский компонент добавлен на страницу Freedom UI.

Подробный пример добавления внешнего пользовательского компонента на страницу Freedom UI приведен в статье Реализовать внешний пользовательский компонент.

Смотрите также
Клиентский модуль
Файловый контент пакетов
Создать пользовательское приложение
Операции в Creatio IDE
Ресурсы
*.zip-архив Angular-проекта c шаблоном внешнего пользовательского компонента
Официальная документация Angular (понятие Angular Element)
Официальная документация webpack (описание глобальной переменной __webpack_public_path__)
Реализовать пользовательский компонент на основе элемента классической страницы Creatio
Средний

Пример реализован для приложения версии 8.0.2 и выше.

Пример. На вкладке Хронология контрагента (Account timeline) страницы записи пользовательского раздела Requests отображать историю работы выбранного контрагента. Вкладка является веб-компонентом. Веб-компонент реализовать на основе 7.Х вкладки Хронология (Timeline), которая отображается на странице контакта.

1. Создать приложение 

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.

  2. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  3. Добавьте поле, которое содержит контрагента.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Выпадающий список (Dropdown).

    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Контрагент" ("Account").
      • Код (на английском) (Code) — "UsrAccount".
      • Выбор объекта (Lookup) — выберите "Контрагент" ("Account").
      • Уберите признак Разрешить добавление новых значений (Enable adding new values).

  4. Добавьте вкладку, которая содержит историю работы выбранного контрагента.

    1. В рабочую область Freedom UI дизайнера добавьте новый элемент разметки Вкладки (Tabs).
    2. Удалите вкладку Вкладка 2 (Tab 2), которая по умолчанию добавлена на страницу Страница записи Requests (Requests form page).

    3. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойство вкладки Заголовок (Title) — "Хронология контрагента" ("Account timeline").

  5. На панели действий Freedom UI дизайнера нажмите Сохранить (Save).

2. Создать пользовательский веб-компонент 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

  2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

  3. В дизайнере модуля заполните свойства схемы.

    • Код (Code) — "UsrTimelineModule".
    • Заголовок (Title) — "Модуль хронологии" ("Timeline module").

  4. Реализуйте пользовательский веб-компонент.

    1. В объявлении AMD-модуля в качестве зависимостей добавьте модули @creatio-devkit/common, Base7xViewElement и ckeditor-base.

      Зависимости AMD-модуля UsrTimelineModule
      /* Объявление AMD-модуля. */
define("UsrTimelineModule", ["@creatio-devkit/common", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
    ...
});

    2. Объявите класс UsrTimelineModule веб-компонента.

      Объявление класса UsrTimelineModule
      /* Объявление AMD-модуля. */
define("UsrTimelineModule", ["@creatio-devkit/common", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
    /* Объявление класса. */
    class UsrTimelineModule extends Base7xViewElement {
        set primaryColumnValue(value) {
            this._primaryColumnValue = value;
            this._init();
        }

        get primaryColumnValue() {
            return this._primaryColumnValue;
        }

        set entitySchemaName(value) {
            this._entitySchemaName = value;
            this._init();
        }

        get entitySchemaName() {
            return this._entitySchemaName;
        }

        set cardSchemaName(value) {
            this._cardSchemaName = value;
            this._init();
        }

        get cardSchemaName() {
            return this._entitySchemaName;
        }

        constructor() {
            super("Timeline");
        }

        _init() {
            if (this._primaryColumnValue && this._cardSchemaName && this._entitySchemaName) {
                this.initContext(() => {
                    this._moduleId = this.sandbox.id + "_UsrTimelineModule";
                    this.sandbox.subscribe("GetColumnsValues", (attributeNames) => this._getColumnValues(attributeNames), null, [this._moduleId]);
                    this.sandbox.subscribe("GetEntityInfo", () => this._getEntityInfo(), null, [this._moduleId]);
                    this._loadTimelineSchemaModule();
                });
            }
        }

        _loadTimelineSchemaModule() {
            this._moduleId = this.sandbox.loadModule("BaseSchemaModuleV2", {
                id: this._moduleId,
                renderTo: this._renderTo,
                instanceConfig: {
                    schemaName: "TimelineSchema",
                    isSchemaConfigInitialized: true,
                    useHistoryState: false,
                    showMask: true,
                    parameters: {
                        viewModelConfig: {
                            "CardSchemaName": this._cardSchemaName,
                            "ReferenceSchemaName": this._entitySchemaName,
                            "InitialConfig": {
                                "entities": []
                            }
                        },
                    },
                }
            });
        }

        _getColumnValues(attributeNames) {
            const values = {};
            attributeNames?.forEach((attributeName) => {
                switch (attributeName) {
                    case "Id":
                        values[attributeName] = this._primaryColumnValue?.value;
                        break;
                    case "Name":
                        values[attributeName] = this._primaryColumnValue?.displayValue;
                        break;
                    default: break;
                }
            });
            return values;
        }

        _getEntityInfo() {
            return {
                entitySchemaName: this._entitySchemaName,
                primaryColumnValue: this._primaryColumnValue?.value,
                primaryDisplayColumnValue: this._primaryColumnValue?.displayValue
            };
        }

        getMessages() {
            const messages = super.getMessages();
            return Object.assign(messages, {
                "GetColumnsValues": {
                    mode: Terrasoft.MessageMode.PTP,
                    direction: Terrasoft.MessageDirectionType.SUBSCRIBE
                },
                "GetEntityInfo": {
                    mode: Terrasoft.MessageMode.PTP,
                    direction: Terrasoft.MessageDirectionType.SUBSCRIBE
                }
            });
        }

        disconnectedCallback() {
            this.sandbox.unloadModule(this._moduleId, this._renderTo);
        }
    }
    ...
});

    3. На странице зарегистрируйте веб-компонент UsrTimelineModule.

      Регистрация веб-компонента UsrTimelineModule
      /* Объявление AMD-модуля. */
define("UsrTimelineModule", ["@creatio-devkit/common", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
    ...
    /* Регистрация веб-компонента. */
    customElements.define('usr-timeline', UsrTimelineModule);
    ...
});

    4. Зарегистрируйте веб-компонент usr-timeline в качестве визуального элемента.

      Регистрация веб-компонента usr-timeline
      /* Объявление AMD-модуля. */
define("UsrTimelineModule", ["@creatio-devkit/common", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
    ...
    /* Регистрация веб-компонента в качестве визуального элемента. */
    sdk.registerViewElement({
        type: 'usr.Timeline',
        selector: 'usr-timeline',
        inputs: {
            primaryColumnValue: {},
            cardSchemaName: {},
            entitySchemaName: {}
        }
    });
});
    Полный исходный код схемы модуля
  5. На панели инструментов дизайнера модуля нажмите Сохранить (Save).

3. Добавить пользовательский веб-компонент на страницу Freedom UI 

  1. В разделе Конфигурация (Configuration) откройте схему UsrRequests_FormPage страницы Freedom UI Страница записи Requests (Requests form page).
  2. На панели действий Freedom UI дизайнера нажмите на кнопку . Открывается исходный код страницы Freedom UI.

  3. Добавьте пользовательский веб-компонент.

    1. В объявлении AMD-модуля в качестве зависимости добавьте модуль UsrTimelineModule пользовательского веб-компонента.

      Зависимости AMD-модуля UsrRequests_FormPage
      /* Объявление AMD-модуля. */
define("UsrRequests_FormPage", /**SCHEMA_DEPS*/["UsrTimelineModule"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
    ...
});

    2. В секцию viewConfigDiff добавьте конфигурационный объект модуля UsrTimelineModule с пользовательским веб-компонентом.

      Секция viewConfigDiff
      viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "Timeline_qwerty",
        "values": {
            "type": "usr.Timeline",
            "layoutConfig": {
                "column": 1,
                "row": 1,
                "colSpan": 12,
                "rowSpan": 8
            },
            "primaryColumnValue": "$UsrAccount",
            "cardSchemaName": "AccountPageV2",
            "entitySchemaName": "Account"
        },
        "parentName": "GridContainer_qaocexw",
        "propertyName": "items",
        "index": 0
    },
    ...
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
      Полный исходный код схемы страницы
  4. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Request's name".
  4. В поле Контрагент (Account) выберите контрагента (например, "Accom").

В результате выполнения примера на странице заявки отображается вкладка Хронология контрагента (Account timeline) выбранного контрагента "Accom".

В Freedom UI дизайнере на месте пользовательского веб-компонента отображается заглушка.

Ресурсы
Пакет с реализацией примера
Реализовать внешний пользовательский компонент
Средний

Пример реализован для приложения версии 8.0.3 и выше.

Пример. На страницу записи пользовательского раздела Requests добавить внешний пользовательский компонент на фреймворке Angular.

1. Создать Angular-проект для разработки внешнего пользовательского компонента 

Создадим Angular-проект для разработки внешнего пользовательского компонента с использованием *.zip-архива, который содержит Angular-проект c шаблоном внешнего пользовательского компонента.

Чтобы создать Angular-проект для разработки внешнего пользовательского компонента с использованием *.zip-архива:

  1. Скачайте и разархивируйте *.zip-архив.
  2. Откройте проект в Microsoft Visual Studio Code.
  3. Во всех файлах проекта измените значение макроса имени Angular-проекта <%projectName%> на sdk_remote_module_package.
  4. Во всех файлах проекта измените значение макроса префикса <%vendorPrefix%> на usr.
  5. Установите npm-модули. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm i.

В результате будет создан Angular-проект для разработки внешнего пользовательского компонента.

2. Создать внешний пользовательский компонент 

  1. В проекте создайте Angular-компонент. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду ng g c view-elements/input.

    В результате в каталог src/app/view-elements/input проекта будут добавлены файлы компонента InputComponent.

  2. Укажите, что компонент InputComponent является визуальным элементом.

    1. Перейдите в файл input.component.ts.
    2. В компонент импортируйте функциональность декоратора CrtViewElement из библиотеки @creatio-devkit/common.
    3. Отметьте компонент декоратором CrtViewElement.
    4. Сохраните файл.
    Файл input.component.ts
    import { Component, OnInit } from '@angular/core';
/* Импорт функциональности декоратора CrtViewElement из библиотеки @creatio-devkit/common. */
import { CrtViewElement } from '@creatio-devkit/common';

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

/* Добавляем декоратор CrtViewElement к компоненту InputComponent. */
@CrtViewElement({
  selector: 'usr-input',
  type: 'usr.Input'
})

export class InputComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}

  3. Зарегистрируйте визуальный элемент InputComponent в качестве компонента.

    1. Перейдите в файл app.module.ts.
    2. В декоратор CrtModule добавьте визуальный элемент InputComponent.
    3. В методе ngDoBootstrap() корневого модуля AppModule зарегистрируйте визуальный элемент InputComponent в качестве компонента (т. е. Angular Element).
    4. Сохраните файл.
    Файл app.module.ts
    import { DoBootstrap, Injector, NgModule } from '@angular/core';
/* Импорт функциональности функции createCustomElement из библиотеки @angular/elements. */
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({
  /* Указывает, что InputComponent является визуальным элементом. */
  viewElements: [InputComponent]
})
@NgModule({
  declarations: [
    InputComponent
  ],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule implements DoBootstrap {
  constructor(private _injector: Injector) {}

  ngDoBootstrap(): void {
    /* Регистрирует InputComponent в качестве Angular Element. */
    const element = createCustomElement(InputComponent, {
      injector: this._injector,
    });
    customElements.define('usr-input', element);
  }
}
  4. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.

В результате в каталог dist Angular-проекта будет добавлена сборка с именем sdk_remote_module_package.

3. Добавить внешний пользовательский компонент на страницу Freedom UI 

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. Настройте Creatio для работы в файловой системе. Для этого воспользуйтесь инструкцией, которая приведена в статье Внешние IDE.

  3. Выгрузите пакеты в файловую систему. Используем выгрузку через интерфейс приложения. Для этого на панели инструментов раздела Конфигурация (Configuration) в группе действий Разработка в файловой системе (File system development mode) выберите Выгрузить все пакеты в файловую систему (Download packages to file system).

  4. В каталоге пакета UsrRequests в файловой системе создайте каталог Files/src/js.
  5. Из каталога dist проекта cкопируйте сборку в каталог Files/src/js. Путь к сборке проекта: Files/src/js/sdk_remote_module_package.
  6. Выполните компиляцию конфигурации. Для этого воспользуйтесь инструкцией, которая приведена в статье Операции в Creatio IDE.
  7. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).
  8. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

  9. В секции viewConfigDiff добавьте конфигурационный объект пользовательского компонента.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrInput",
        "values": {
            "layoutConfig": {
                "column": 1,
                "row": 2,
                "colSpan": 1,
                "rowSpan": 1
            },
            /* Свойство, которое определяет тип элемента. */
            "type": "usr.Input",
        },
        "parentName": "LeftAreaProfileContainer",
        "propertyName": "items",
        "index": 1
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    Полный исходный код схемы страницы
  10. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).

В результате выполнения примера на странице заявки отображается пользовательский компонент, который реализован на фреймворке Angular.

Далее вы можете переходить к реализации бизнес-логики. Подробнее читайте в статье Реализовать бизнес-логику внешнего пользовательского компонента.

Ресурсы
Пакет с реализацией примера
*.zip-архив Angular-проекта c шаблоном внешнего пользовательского компонента
Angular-проект с реализацией примера
Реализовать бизнес-логику внешнего пользовательского компонента
Средний

Пример реализован для приложения версии 8.0.3 и выше.

Пример. На страницу записи пользовательского раздела Requests добавить поле. Название и значения пользовательского поля и поля Название (Name) совпадают. Поле реализовать с использованием внешнего пользовательского компонента на фреймворке Angular.

1. Реализовать внешний пользовательский компонент 

Чтобы реализовать внешний пользовательский компонент, воспользуйтесь инструкцией, которая приведена в статье Реализовать внешний пользовательский компонент.

2. Реализовать поле ввода 

  1. В компоненте реализуйте поле ввода.

    1. Перейдите в файл input.component.ts.
    2. В компонент импортируйте функциональность декоратора Input из библиотеки @angular/core.
    3. В компонент импортируйте функциональность декоратора CrtInput из библиотеки @creatio-devkit/common.
    4. В класс компонента InputComponent добавьте свойство value, которое отвечает за значение поля ввода.
    5. Свойство value отметьте декораторами Input и CrtInput.
    6. В класс компонента InputComponent добавьте свойство label, которое отвечает за название поля ввода.
    7. Свойство label отметьте декораторами Input и CrtInput.
    8. Сохраните файл.
    Файл input.component.ts
    /* Импорт функциональности декораторов из библиотеки @angular/core. */
import { Component, Input, OnInit } from '@angular/core';
/* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
import { CrtInput, CrtViewElement } from '@creatio-devkit/common';
...
export class InputComponent implements OnInit {
  constructor() { }
    
  /* Добавляем декораторы к свойству value. */
  @Input()
  @CrtInput()
  /* Значение поля ввода. */
  public value: string = '';

  /* Добавляем декораторы к свойству label. */
  @Input()
  @CrtInput()
  /* Название поля ввода. */
  public label!: string;
    
  ngOnInit(): void {
  }
}

  2. Реализуйте отслеживание изменений значения поля ввода.

    1. Перейдите в файл input.component.ts.
    2. В компонент импортируйте функциональность декоратора Output и события EventEmitter из библиотеки @angular/core.
    3. В компонент импортируйте функциональность декоратора CrtOutput из библиотеки @creatio-devkit/common.
    4. В класс компонента InputComponent добавьте событие EventEmitter<string>(), которое отслеживает изменение значения в поле ввода.
    5. Событие EventEmitter<string>() отметьте декораторами Output и CrtOutput.
    6. Сохраните файл.
    Файл input.component.ts
    /* Импорт функциональности декораторов из библиотеки @angular/core. */
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
/* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
import { CrtInput, CrtOutput, CrtViewElement } from '@creatio-devkit/common';
...
export class InputComponent implements OnInit {
  ...
  /* Добавляем декораторы к событию EventEmitter<string>(). */
  @Output()
  @CrtOutput()
  /* Отслеживает изменение значения в поле ввода. */
  public valueChange = new EventEmitter<string>();
  ...
}
    Полный исходный код файла input.component.ts

  3. В файл input.component.html добавьте разметку пользовательского компонента.

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

  4. В файл input.component.scss добавьте стили пользовательского компонента.

    Файл input.component.scss
    .wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    align-items: center;
}
  5. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.

В результате в каталог dist Angular-проекта будет добавлена сборка с именем sdk_remote_module_package.

3. Добавить поле ввода на страницу Freedom UI 

  1. Добавьте внешний пользовательский компонент на страницу Freedom UI. Для этого воспользуйтесь инструкцией, которая приведена в статье Реализовать внешний пользовательский компонент.

  2. В секции viewConfigDiff добавьте поле ввода, которое реализовано во внешнем пользовательском компоненте.

    • Привяжите свойство label элемента UsrInput к локализуемой строке названия поля Название (Name).
    • Привяжите свойство value элемента UsrInput к атрибуту $UsrName модели.
    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrInput",
        "values": {
            "layoutConfig": {
                "column": 1,
                "row": 2,
                "colSpan": 1,
                "rowSpan": 1
            },
            /* Свойство, которое определяет тип элемента. */
            "type": "usr.Input",
            /* Свойство, которое определяет название поля. Привязано к значению атрибута UsrName. */
            "label": "$Resources.Strings.UsrName",
            /* Свойство, которое определяет значение поля. Привязано к значению атрибута UsrName. */
            "value": "$UsrName",
        },
        "parentName": "LeftAreaProfileContainer",
        "propertyName": "items",
        "index": 1
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    Полный исходный код схемы страницы
  3. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Test".

В результате выполнения примера на странице заявки отображается пользовательское поле. Название и значение пользовательского поля и поля Название (Name) совпадают. Поле реализовано с использованием внешнего пользовательского компонента на фреймворке Angular.

При необходимости вы можете настроить валидацию поля ввода. Подробнее читайте в статье Реализовать валидацию во внешнем пользовательском компоненте.

Ресурсы
Пакет с реализацией примера
Angular-проект с реализацией примера
Реализовать валидацию во внешнем пользовательском компоненте
Средний

Пример реализован для приложения версии 8.0.3 и выше.

Пример. На странице записи пользовательского раздела Requests добавить валидатор, который проверяет, что поле заполнено. Поле реализовано с использованием внешнего пользовательского компонента на фреймворке Angular.

1. Реализовать внешний пользовательский компонент 

Чтобы реализовать внешний пользовательский компонент, воспользуйтесь инструкцией, которая приведена в статье Реализовать внешний пользовательский компонент.

2. Реализовать поле ввода 

Чтобы реализовать поле ввода, воспользуйтесь инструкцией, которая приведена в статье Реализовать бизнес-логику внешнего пользовательского компонента.

3. Реализовать валидацию поля ввода 

  1. В компоненте получите признак валидности связанного атрибута.

    1. Перейдите в файл input.component.ts.
    2. В компонент импортируйте функциональность декоратора CrtValidationInfo из библиотеки @creatio-devkit/common.
    3. В класс компонента InputComponent добавьте свойство valueValidationInfo, которое отображает информацию о невалидности связанного атрибута.
    4. Свойство valueValidationInfo отметьте декораторами Input и CrtValidationInput.
    5. Сохраните файл.
    Файл input.component.ts
    /* Импорт функциональности декораторов из библиотеки @angular/core. */
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
/* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
import { CrtInput, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
...
export class InputComponent implements OnInit {
  ...
  /* Добавляем декораторы к свойству valueValidationInfo. */
  @Input()
  @CrtValidationInput()
  /* Отображает информацию о невалидности значения в поле ввода. */ 
  public valueValidationInfo!: CrtValidationInfo;
  ...
}
    Полный исходный код файла input.component.ts

  2. В файл input.component.html добавьте разметку пользовательского компонента, если значение поля невалидно.

    Файл input.component.html
    <div class="wrapper">
    <label class="label">{{label}}</label>
    <input
        ...
        [class.invalid]="
        valueValidationInfo &&
        !valueValidationInfo.valid && valueValidationInfo.touched
        "
        ...
    />
</div>
    Полный исходный код файла input.component.html

  3. В файл input.component.scss добавьте стили пользовательского компонента.

    Файл input.component.scss
    .wrapper {
    ...
    .input.invalid {
        background-color: #FDD8CF;
    }
}
    Полный исходный код файла input.component.scss
  4. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.

В результате в каталог dist Angular-проекта будет добавлена сборка с именем sdk_remote_module_package.

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Test".
  4. Удалите значение в пользовательском поле.

В результате выполнения примера на странице заявки отображается пользовательское поле. Название и значение пользовательского поля и поля Название (Name) совпадают. Поле реализовано с использованием внешнего пользовательского компонента на фреймворке Angular.

Далее вы можете переходить к добавлению внешнего пользовательского компонента в библиотеку Freedom UI дизайнера. Подробнее читайте в статье Добавить внешний пользовательский компонент в библиотеку Freedom UI дизайнера.

Ресурсы
Пакет с реализацией примера
Angular-проект с реализацией примера
Добавить внешний пользовательский компонент в библиотеку Freedom UI дизайнера
Средний

Пример реализован для приложения версии 8.0.3 и выше.

Пример. Добавить внешний пользовательский компонент в библиотеку Freedom UI дизайнера. Использовать изображение, которое приведено ниже.

1. Реализовать внешний пользовательский компонент 

Чтобы реализовать внешний пользовательский компонент, воспользуйтесь инструкцией, которая приведена в статье Реализовать внешний пользовательский компонент.

2. Реализовать поле ввода 

Чтобы реализовать поле ввода, воспользуйтесь инструкцией, которая приведена в статье Реализовать бизнес-логику внешнего пользовательского компонента.

3. Реализовать валидацию поля ввода 

Чтобы реализовать валидацию поля ввода, воспользуйтесь инструкцией, которая приведена в статье Реализовать валидацию во внешнем пользовательском компоненте.

4. Добавить компонент в библиотеку Freedom UI дизайнера 

  1. Настройте отображение компонента в библиотеке Freedom UI дизайнера.

    1. Перейдите в файл input.component.ts.
    2. В компонент импортируйте функциональность декоратора CrtInterfaceDesignerItem из библиотеки @creatio-devkit/common.
    3. Отметьте компонент декоратором CrtInterfaceDesignerItem со свойством toolbarConfig, которое отвечает за отображение элемента в библиотеке Freedom UI дизайнера.
    4. Загрузите изображение, которое планируется отображать в библиотеке Freedom UI дизайнера и в свойстве icon укажите путь к изображению, которое планируется отображать в библиотеке Freedom UI дизайнера. В нашем примере изображение содержится в каталоге input.
    5. Сохраните файл.
    Файл input.component.ts
    ...
/* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, CrtViewElement } from '@creatio-devkit/common';
...
/* Добавляем декоратор CrtViewElement к компоненту InputComponent. */
@CrtInterfaceDesignerItem({
  /* Отвечает за отображение элемента в библиотеке Freedom UI дизайнера. */
  toolbarConfig: {
    caption: 'Custom Input',
    name: 'CustomInput',
    /* Путь к изображению для компонента. */
    icon: require('!!raw-loader?{esModule:false}!./icon.png'),
    defaultPropertyValues: {
      label: 'Custom input'
    }
  }
})
...
    Полный исходный код файла input.component.ts
  2. Выполните сборку проекта. Для этого в терминале командной строки Microsoft Visual Studio Code выполните команду npm run build.

В результате в каталог dist Angular-проекта будет добавлена сборка с именем sdk_remote_module_package.

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера, в рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

В результате выполнения примера компонент Пользовательский ввод (Custom input) отображается в библиотеке Freedom UI дизайнера в группе Пользовательские компоненты (Custom components).

Также внешний пользовательский компонент отображается во Freedom UI дизайнере при добавлении на холст.

Ресурсы
Пакет с реализацией примера
Angular-проект с реализацией примера