Creatio development guide
Это документация Creatio версии 7.8.0. Мы рекомендуем использовать новую версию документации.

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

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. — Мини-карточка контакта

© Terrasoft 2002-2016.

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

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