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

Средний
PDF

Пример реализован для приложения версии 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/sdk, Base7xViewElement и ckeditor-base.

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

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

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

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

      Регистрация веб-компонента usr-timeline
      /* Объявление AMD-модуля. */
define("UsrTimelineModule", ["@creatio/sdk", "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 дизайнере на месте пользовательского веб-компонента отображается заглушка.

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