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

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: {}
              }
          });
      });

   Полный исходный код схемы модуля

   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);
           }
       }
   
       /* Регистрация веб-компонента. */
       customElements.define('usr-timeline', UsrTimelineModule);
       
       /* Регистрация веб-компонента в качестве визуального элемента. */
       sdk.registerViewElement({
           type: 'usr.Timeline',
           selector: 'usr-timeline',
           inputs: {
               primaryColumnValue: {},
               cardSchemaName: {},
               entitySchemaName: {}
           }
       });
   
       return Terrasoft.UsrTimelineModule;
   });

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

      Полный исходный код схемы страницы

      UsrRequests_FormPage

      Код скопирован

      /* Объявление AMD-модуля. */
      define("UsrRequests_FormPage", /**SCHEMA_DEPS*/["UsrTimelineModule"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
          return {
              viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
                  {
                      "operation": "insert",
                      "name": "UsrName",
                      "values": {
                          "layoutConfig": {
                              "column": 1,
                              "row": 1,
                              "colSpan": 1,
                              "rowSpan": 1
                          },
                          "type": "crt.Input",
                          "label": "$Resources.Strings.UsrName",
                          "control": "$UsrName"
                      },
                      "parentName": "LeftAreaProfileContainer",
                      "propertyName": "items",
                      "index": 0
                  },
                  {
                      "operation": "insert",
                      "name": "UsrAccount",
                      "values": {
                          "layoutConfig": {
                              "column": 1,
                              "row": 2,
                              "colSpan": 1,
                              "rowSpan": 1
                          },
                          "type": "crt.ComboBox",
                          "loading": false,
                          "control": "$UsrAccount",
                          "label": "$Resources.Strings.UsrAccount",
                          "labelPosition": "auto",
                          "listActions": [],
                          "showValueAsLink": true,
                          "placeholder": "",
                          "controlActions": []
                      },
                      "parentName": "LeftAreaProfileContainer",
                      "propertyName": "items",
                      "index": 1
                  },
                  {
                      "operation": "insert",
                      "name": "TabPanel_grveew2",
                      "values": {
                          "layoutConfig": {
                              "column": 1,
                              "row": 1,
                              "colSpan": 2,
                              "rowSpan": 1
                          },
                          "type": "crt.TabPanel",
                          "items": [],
                          "styleType": "default",
                          "bodyBackgroundColor": "primary-contrast-500",
                          "tabTitleColor": "auto",
                          "selectedTabTitleColor": "auto",
                          "headerBackgroundColor": "auto",
                          "underlineSelectedTabColor": "auto"
                      },
                      "parentName": "ControlGroupContainer",
                      "propertyName": "items",
                      "index": 0
                  },
                  {
                      "operation": "insert",
                      "name": "AccountTimeline",
                      "values": {
                          "type": "crt.TabContainer",
                          "items": [],
                          "caption": "#ResourceString(AccountTimeline_caption)#",
                          "iconPosition": "only-text"
                      },
                      "parentName": "TabPanel_grveew2",
                      "propertyName": "items",
                      "index": 0
                  },
                  {
                      "operation": "insert",
                      "name": "GridContainer_qaocexw",
                      "values": {
                          "type": "crt.GridContainer",
                          "items": [],
                          "rows": "minmax(32px, max-content)",
                          "columns": [
                              "minmax(32px, 1fr)",
                              "minmax(32px, 1fr)"
                          ],
                          "gap": {
                              "columnGap": "large",
                              "rowGap": 0
                          }
                      },
                      "parentName": "AccountTimeline",
                      "propertyName": "items",
                      "index": 0
                  },
                  {
                      "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*/,
              viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
                  "attributes": {
                      "UsrName": {
                          "modelConfig": {
                              "path": "PDS.UsrName"
                          }
                      },
                      "Id": {
                          "modelConfig": {
                              "path": "PDS.Id"
                          }
                      },
                      "UsrAccount": {
                          "modelConfig": {
                              "path": "PDS.UsrAccount"
                          }
                      }
                  }
              }/**SCHEMA_VIEW_MODEL_CONFIG*/,
              modelConfig: /**SCHEMA_MODEL_CONFIG*/{
                  "dataSources": {
                      "PDS": {
                          "type": "crt.EntityDataSource",
                          "config": {
                              "entitySchemaName": "UsrRequests"
                          },
                          "scope": "page"
                      }
                  },
                  "primaryDataSourceName": "PDS"
              }/**SCHEMA_MODEL_CONFIG*/,
              handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
              converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
              validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
          };
      });

4. На панели инструментов дизайнера клиентского модуля нажмите [ Сохранить ] ([ Save ]).

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

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

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

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

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

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

   Полный исходный код схемы страницы

   UsrRequests_FormPage

   Код скопирован

   define("UsrRequests_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
       return {
           viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
               {
                   "operation": "insert",
                   "name": "UsrName",
                   "values": {
                       "layoutConfig": {
                           "column": 1,
                           "row": 1,
                           "colSpan": 1,
                           "rowSpan": 1
                       },
                       "type": "crt.Input",
                       "label": "$Resources.Strings.UsrName",
                       "control": "$UsrName",
                       "labelPosition": "auto"
                   },
                   "parentName": "LeftAreaProfileContainer",
                   "propertyName": "items"
               },
               {
                   "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*/,
           viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
               "attributes": {
                   "UsrName": {
                       "modelConfig": {
                           "path": "PDS.UsrName"
                       }
                   },
                   "Id": {
                       "modelConfig": {
                           "path": "PDS.Id"
                       }
                   }
               }
           }/**SCHEMA_VIEW_MODEL_CONFIG*/,
           modelConfig: /**SCHEMA_MODEL_CONFIG*/{
               "dataSources": {
                   "PDS": {
                       "type": "crt.EntityDataSource",
                       "config": {
                           "entitySchemaName": "UsrRequests"
                       }
                   }
               }
           }/**SCHEMA_MODEL_CONFIG*/,
           handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/
       };
   });

10. На панели инструментов дизайнера клиентского модуля нажмите [ Сохранить ] ([ Save ]).

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

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

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

В результате выполнения примера на странице заявки отображается пользовательский компонент, который реализован на фреймворке 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

   Файл 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';
   
   @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() { }
   
       /* Добавляем декораторы к свойству value. */
       @Input()
       @CrtInput()
       /* Значение поля ввода. */
       public value: string = '';
   
       /* Добавляем декораторы к свойству label. */
       @Input()
       @CrtInput()
       /* Название поля ввода. */
       public label!: string;
   
       /* Добавляем декораторы к событию EventEmitter<string>(). */
       @Output()
       @CrtOutput()
       /* Отслеживает изменение значения в поле ввода. */
       public valueChange = new EventEmitter<string>();
   
       ngOnInit(): void {
       }
   
   }

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

   Полный исходный код схемы страницы

   UsrRequests_FormPage

   Код скопирован

   define("UsrRequests_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
       return {
           viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
               {
                   "operation": "insert",
                   "name": "UsrName",
                   "values": {
                       "layoutConfig": {
                           "column": 1,
                           "row": 1,
                           "colSpan": 1,
                           "rowSpan": 1
                       },
                       "type": "crt.Input",
                       "label": "$Resources.Strings.UsrName",
                       "control": "$UsrName",
                       "labelPosition": "auto"
                   },
                   "parentName": "LeftAreaProfileContainer",
                   "propertyName": "items"
               },
               {
                   "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*/,
           viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
               "attributes": {
                   "UsrName": {
                       "modelConfig": {
                           "path": "PDS.UsrName"
                       }
                   },
                   "Id": {
                       "modelConfig": {
                           "path": "PDS.Id"
                       }
                   }
               }
           }/**SCHEMA_VIEW_MODEL_CONFIG*/,
           modelConfig: /**SCHEMA_MODEL_CONFIG*/{
               "dataSources": {
                   "PDS": {
                       "type": "crt.EntityDataSource",
                       "config": {
                           "entitySchemaName": "UsrRequests"
                       }
                   }
               }
           }/**SCHEMA_MODEL_CONFIG*/,
           handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/
       };
   });

3. На панели инструментов дизайнера клиентского модуля нажмите [ Сохранить ] ([ Save ]).

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

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

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

В результате выполнения примера на странице заявки отображается пользовательское поле. Название и значение пользовательского поля и поля [ Название ] ([ Name ]) совпадают. Поле реализовано с использованием внешнего пользовательского компонента на фреймворке 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

   Файл input.component.ts

   Код скопирован

   /* Импорт функциональности декораторов из библиотеки @angular/core. */
   import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   /* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
   import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, 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() { }
   
     /* Добавляем декораторы к свойству value. */
     @Input()
     @CrtInput()
     /* Значение поля ввода. */
     public value: string = '';
   
     /* Добавляем декораторы к свойству label. */
     @Input()
     @CrtInput()
     /* Название поля ввода. */
     public label!: string;
   
     /* Добавляем декораторы к событию EventEmitter<string>(). */
     @Output()
     @CrtOutput()
     /* Отслеживает изменение значения в поле ввода. */
     public valueChange = new EventEmitter<string>();
   
     /* Добавляем декораторы к свойству valueValidationInfo. */
     @Input()
     @CrtValidationInput()
     /* Отображает информацию о невалидности значения в поле ввода. */ 
     public valueValidationInfo!: CrtValidationInfo;
   
     ngOnInit(): void {
     }
   
   }

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

   Файл input.component.html

   Код скопирован

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

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

   Файл input.component.scss

   Код скопирован

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

   Полный исходный код файла input.component.scss

   Файл input.component.scss

   Код скопирован

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

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 дизайнера.

Пример. Добавить внешний пользовательский компонент в библиотеку 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

   Файл input.component.ts

   Код скопирован

   /* Импорт функциональности декораторов из библиотеки @angular/core. */
   import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   /* Импорт функциональности декораторов из библиотеки @creatio-devkit/common. */
   import { CrtInput, CrtInterfaceDesignerItem, CrtOutput, CrtValidationInfo, CrtValidationInput, 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'
   })
   
   /* Добавляем декоратор CrtViewElement к компоненту InputComponent. */
   @CrtInterfaceDesignerItem({
     /* Отвечает за отображение элемента в библиотеке Freedom UI дизайнера. */
     toolbarConfig: {
       caption: 'Custom Input',
         name: 'CustomInput',
         /* Путь к изображению для компонента. */
         icon: require('!!raw-loader?{esModule:false}!./icon.png'),
         defaultPropertyValues: {
           label: 'Custom input'
         }
     }
   })
   
   export class InputComponent implements OnInit {
   
     constructor() { }
   
     /* Добавляем декораторы к свойству value. */
     @Input()
     @CrtInput()
     /* Значение поля ввода. */
     public value: string = '';
   
     /* Добавляем декораторы к свойству label. */
     @Input()
     @CrtInput()
     /* Название поля ввода. */
     public label!: string;
   
     /* Добавляем декораторы к событию EventEmitter<string>(). */
     @Output()
     @CrtOutput()
     /* Отслеживает изменение значения в поле ввода. */
     public valueChange = new EventEmitter<string>();
     
     /* Добавляем декораторы к свойству valueValidationInfo. */
     @Input()
     @CrtValidationInput()
     /* Отображает информацию о невалидности значения в поле ввода. */ 
     public valueValidationInfo!: CrtValidationInfo;
   
     ngOnInit(): void {
     }
   
   }

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 дизайнере при добавлении на холст.