Creatio development guide
PDF
Разработка в Creatio на примерах

Добавление мини-карточки к произвольному модулю

Glossary Item Box

Общие положения

В процессе добавления мини-карточек объекта в систему возникает необходимость их подключения к произвольным модулям системы. Произвольные модули позволяют создавать ссылки в системе на определенный объект, поэтому подключение отображения мини-карточки при наведении на ссылку позволяет получить информацию об этом объекте, не переходя в раздел этого объекта.

В базовой версии приложения мини-карточка объекта подключена к следующим модулям:

  • телефония в коммуникационной панели;
  • email в коммуникационной панели;
  • центр уведомлений в коммуникационной панели;
  • раздел [Лента] в коммуникационной панели;
  • графика-списка в разделе итогов.

Описание примера

Отобразить текущего пользователя системы в верхнем правом углу приложения возле иконки с профилем пользователя. При наведении на ссылку текущего пользователя системы открыть мини-карточку.

Исходный код

Пакет с реализацией примера можно скачать по ссылке.

Алгоритм реализации примера

1. Создать модуль

Для этого в дизайнере системы в разделе [Конфигурация] на вкладке [Схемы] выполните команду меню [Добавить] — [Стандартные] — [Модуль] (рис. 1).

Рис. 1. — Добавление модуля

Для создаваемого модуля установите свойства (рис. 2):

  • [Название] ([Name]) — "UsrCurrentUserModule";
  • [Заголовок] ([Title]) — "Модуль "Текущий пользователь" ("Current user module").

Рис. 2. — Свойства модуля

2. Создать представление и модель представления модуля

Для создания модели представления в модуле UsrСurrentUserModule реализуйте класс, унаследованный от Terrasoft.BaseViewModel. К модели представления модуля в свойство mixins подключите утилитный класс Terrasoft.MiniPageUtilities, который позволит использовать методы вызова мини-карточки.

Для создания представления реализуйте класс, унаследованный от Terrasoft.BaseModule.

В этом классе переопределите методы init() и render() базового класса Terrasoft.BaseModule. Метод init() инициализирует модель представления модуля, а метод render() связывает модель представления с отображением представления в контейнере, передаваемом в параметре renderTo. Для создания модели представления используется метод getViewModel(), а ссылка на полученную модель представления хранится в свойстве viewModel.

Затем определите метод getView() получения представления для его дальнейшего отображения. Представление должно отображать ФИО текущего пользователя с гиперссылкой на страницу редактирования контакта. При построении гиперссылки определите обработчик события наведения курсора мыши.

Ниже приведен исходный код модуля полностью:

// Определение модуля.
define("UsrCurrentUserModule", ["MiniPageUtilities"], function() {
    // Определение класса CurrentUserViewModel.
    Ext.define("Terrasoft.configuration.CurrentUserViewModel", {
        // Имя родительского класса.
        extend: "Terrasoft.BaseViewModel",
        // Сокращенное название класса.
        alternateClassName: "Terrasoft.CurrentUserViewModel",
        // Используемые миксины.
        mixins: {
            MiniPageUtilitiesMixin: "Terrasoft.MiniPageUtilities"
        }
    });
    // Определение класса UsrCurrentUserModule.
    Ext.define("Terrasoft.configuration.UsrCurrentUserModule", {
        // Сокращенное название класса.
        alternateClassName: "Terrasoft.UsrCurrentUserModule",
        // Имя родительского класса.
        extend: "Terrasoft.BaseModule",
        // Объект Ext.
        Ext: null,
        // Объект sandbox.
        sandbox: null,
        // Объект Terrasoft.
        Terrasoft: null,
        // Модель представления.
        viewModel: null,
        // Создает представления модуля.
        getView: function() {
            // Получение контакта текущего пользователя.
            var currentUser = Terrasoft.SysValue.CURRENT_USER_CONTACT;
            // Представление — экземпляр класса Terrasoft.Hyperlink.
            return Ext.create("Terrasoft.Hyperlink", {
                // Заполнение заголовка ссылки именем контакта.
                "caption": currentUser.displayValue,
                // Обработчик события наведения на ссылку.
                "linkMouseOver": {"bindTo": "linkMouseOver"},
                // Свойство, содержащее дополнительные параметры объекта.
                "tag": {
                    // Идентификатор текущего пользователя.
                    "recordId": currentUser.value,
                    // Название схемы объекта.
                    "referenceSchemaName": "Contact"
                }
            });
        },
        // Создает модель представления модуля.
        getViewModel: function() {
            return Ext.create("Terrasoft.CurrentUserViewModel");
        },
        // Инициализация модуля.
        init: function() {
            this.viewModel = this.getViewModel();
        },
        // Отображает представление модуля.
        render: function(renderTo) {
            // Получение объекта представления.
            var view = this.getView();
            // Связывание представления с моделью представления.
            view.bind(this.viewModel);
            // Отображение представления в элементе renderTo.
            view.render(renderTo);
        }
    });
    return Terrasoft.UsrCurrentUserModule;
});

Для более выразительного отображения гиперссылки добавьте стили для созданного модуля. Для этого перейдите на вкладку LESS дизайнера модуля (рис. 3) и добавьте следующий исходный код.

.current-user-class a {
    font-weight: bold;
    font-size: 2.0em;
    margin: 6px 20px;
}

.current-user-class a:hover {
    text-decoration: none;
}

Рис. 3. — Вкладка LESS дизайнера модуля

Сохраните созданный модуль.

3. Создать контейнер отображения представления

Для вывода ссылки в профиль пользователя в правом верхнем углу приложения необходимо разместить контейнер и загрузить в него представление созданного модуля. Для этого создайте замещающий клиентский модуль, который расширит функциональность схемы MainHeaderSchema, реализованной в пакете NUI. Как создать замещающий клиентский модуль, подробно изложено в статье "Создание клиентской схемы".

Для отображения представления в исходном коде замещенной схемы используйте свойство diff. Чтобы контейнер отобразился в верхнем правом углу страницы, в качестве родительского элемента создаваемого контейнера установите элемент RightHeaderContainer. Далее переопределите метод onRender(), в котором выполните загрузку созданного модуля.

Ниже приведен исходный код замещенного модуля полностью.

// Определение модуля.
define("MainHeaderSchema", [], function() {
    return {
        methods: {
            // Выполняет действия после отображения представления.
            onRender: function() {
                // Вызов родительского метода.
                this.callParent(arguments);
                // Загрузка модуля текущего пользователя.
                this.loadCurrentUserModule();
            },
            // Загружает модуль текущего пользователя.
            loadCurrentUserModule: function() {
                // Получение контейнера, в который будет загружен модуль.
                var currentUserContainer = this.Ext.getCmp("current-user-container");
                // Проверка существования контейнера.
                if (currentUserContainer && currentUserContainer.rendered) {
                    // Загрузка модуля в контейнер.
                    this.sandbox.loadModule("UsrCurrentUserModule", {
                        // Название контейнера.
                        renderTo: "current-user-container"
                    });
                }
            }
        },
        diff: [
            {
                // Операция вставки элемента.
                "operation": "insert",
                // Название элемента.
                "name": "CurrentUserContainer",
                // Название родительского контейнера.
                "parentName": "RightHeaderContainer",
                // Название свойства.
                "propertyName": "items",
                // Значения элемента.
                "values": {
                    // Идентификатор контейнера.
                    "id": "current-user-container",
                    // Тип элемента.
                    "itemType": Terrasoft.ViewItemType.CONTAINER,
                    // Классы контейнера.
                    "wrapClass": ["current-user-class"],
                    // Элементы контейнера.
                    "items": []
                }
            }
        ]
    };
});

Сохраните созданный модуль.

После обновления страницы приложения в правом верхнем углу отобразится ФИО текущего пользователя с гиперссылкой на страницу редактирования его контакта. При наведении курсора на гиперссылку появится мини-карточка с данными о текущем пользователе (рис. 4).

Рис. 4. — Мини-карточка контакта

© Terrasoft 2002-2020.

Был ли данный материал полезен?

Как можно улучшить эту статью?