Добавление мини-карточки к произвольному модулю
Glossary Item Box
Общие положения
В процессе добавления мини-карточек объекта в систему возникает необходимость их подключения к произвольным модулям системы. Произвольные модули позволяют создавать ссылки в системе на определенный объект, поэтому подключение отображения мини-карточки при наведении на ссылку позволяет получить информацию об этом объекте, не переходя в раздел этого объекта.
В базовой версии приложения мини-карточка объекта подключена к следующим модулям:
- телефония в коммуникационной панели;
- email в коммуникационной панели;
- центр уведомлений в коммуникационной панели;
- раздел [Лента] в коммуникационной панели;
- графика-список в разделе итогов.
Описание кейса
Отобразить текущего пользователя системы в верхнем правом углу приложения возле иконки с профилем пользователя. При наведении на ссылку текущего пользователя системы открыть мини-карточку.
Алгоритм реализации кейса
1. Создать модуль
Для этого необходимо в дизайнере системы перейти в раздел [Конфигурация] и на вкладке [Схемы] выполнить команду меню [Добавить] > [Стандартные] > [Модуль] (рис. 1).
Рис. 1. — Добавление модуля
Для создаваемого модуля необходимо установить для свойства [Название] значение "CurrentUserModule", а для свойства [Заголовок] — "Модуль "Текущий пользователь"" (рис. 2).
Рис. 2. — Свойства модуля
2. Создать представление и модель представления модуля
Для создания модели представления в модуле СurrentUserModule необходимо реализовать класс, унаследованный от Terrasoft.BaseViewModel. К модели представления модуля необходимо в свойство mixins подключить утилитный класс Terrasoft.MiniPageUtilities, который позволит использовать методы вызова мини-карточки
// Определение класса CurrentUserViewModel. Ext.define("Terrasoft.configuration.CurrentUserViewModel", { // Имя родительского класса. extend: "Terrasoft.BaseViewModel", // Сокращенное название класса. alternateClassName: "Terrasoft.CurrentUserViewModel", // Используемые миксины. mixins: { MiniPageUtilitiesMixin: "Terrasoft.MiniPageUtilities" } });
Для создания представления необходимо реализовать класс, унаследованный от Terrasoft.BaseModule.
// Определение класса CurrentUserModule. Ext.define("Terrasoft.configuration.CurrentUserModule", { // Сокращенное название класса. alternateClassName: "Terrasoft.CurrentUserModule", // Имя родительского класса. extend: "Terrasoft.BaseModule", // Объект Ext. Ext: null, // Объект sandbox. sandbox: null, // Объект Terrasoft. Terrasoft: null, // Модель представления. viewModel: null, ... });
В этом классе необходимо расширить методы init и render базового класса Terrasoft.BaseModule. Метод init инициализирует модель представления модуля, а метод render связывает модель представления с отображением представления в контейнере, передаваемом в параметре renderTo. Для создания модели представления используется метод getViewModel, а ссылка на полученную модель представления хранится в свойстве viewModel.
// Создает модель представления модуля. 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); }
Затем необходимо определить метод getView получения представления для его дальнейшего отображения. Представление должно отображать ФИО текущего пользователя с гиперссылкой на страницу редактирования контакта. При построении гиперссылки необходимо определить обработчик события наведения курсора мыши.
// Создает представления модуля. 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" } }); }
Ниже приведен исходный код модуля полностью.
// Определение модуля. define("CurrentUserModule", ["MiniPageUtilities"], function() { // Определение класса CurrentUserViewModel. Ext.define("Terrasoft.configuration.CurrentUserViewModel", { // Имя родительского класса. extend: "Terrasoft.BaseViewModel", // Сокращенное название класса. alternateClassName: "Terrasoft.CurrentUserViewModel", // Используемые миксины. mixins: { MiniPageUtilitiesMixin: "Terrasoft.MiniPageUtilities" } }); // Определение класса CurrentUserModule. Ext.define("Terrasoft.configuration.CurrentUserModule", { // Сокращенное название класса. alternateClassName: "Terrasoft.CurrentUserModule", // Имя родительского класса. 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.CurrentUserModule; });
Для более выразительного отображения гиперссылки необходимо добавить стили для созданного модуля. Для этого нужно перейти на вкладку LESS дизайнера модуля (рис. 3) и добавить следующий исходный код.
.current-user-class a {
font-weight: bold;
font-size: 2.5em;
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("CurrentUserModule", { // Название контейнера. 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. — Мини-карточка контакта
