Мини-карточка

PDF
Основы

Мини-карточка — сокращенная версия страницы записи с ограниченным количеством полей. Мини-карточки используются как всплывающие элементы со ссылками на соответствующие записи. Пример мини-карточек можно увидеть при наведении курсора на гиперссылки, указывающие, например, на страницы контактов и контрагентов.

Мини-карточка контакта
Мини-карточка контрагента

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

Состав, расположение и поведение элементов пользовательского интерфейса конфигурируются в схеме модели представления мини-карточки. Например, мини-карточка контакта конфигурируется схемой ContactMiniPage, а мини-карточка контрагента — схемой AccountMiniPage пакета UIv2. Родительской схемой для всех схем-миникарточек является схема BaseMiniPage, входящая в пакет NUI.

Начиная с версии 7.7 в состав приложения введен новый модуль — мини-карточка. Для обычного пользователя мини-карточка является усовершенствованной всплывающей подсказкой, содержащей дополнительную функциональность, зависящую от активного раздела. Используя мини-карточку, пользователь может, например, узнать адрес и открыть расположение на карте контрагента, отправить письмо или совершить звонок контакту непосредственно из раздела без открытия страницы записи. Пример использования миникарточек можно увидеть при наведении курсора на гиперссылки, указывающие на страницы записи, в разделах Контрагенты и Контакты.

Основные цели использования мини-карточек:

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

Структура схемы модели представления мини-карточки не отличается от общей структуры схемы модулей системы. Обязательными свойствами в структуре схемы мини-карточки являются:

  • entitySchemaName, где указывается имя схемы объекта, к которому будет привязана мини-карточка,
  • массив модификаций diff.

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

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

Важно.

В мини-карточках не поддерживается механизм настройки бизнес-логики с помощью бизнес-правил.

Для добавления пользовательской мини-карточки в существующий раздел системы Creatio необходимо выполнить следующую последовательность действий:

  1. В пользовательский пакет добавьте схему модели представления карточки. В качестве родительского объекта выберите схему BaseMiniPage.
  2. При помощи специального SQL-запроса внесите изменения в системную таблицу SysModuleEdit базы данных Creatio.
  3. Добавьте необходимую функциональность мини-карточки в исходный код схемы. При этом обязательно укажите в элементе entitySchemaName имя схемы объекта, к которому будет привязана мини-карточка, и внесите хотя бы одну модификацию в массив diff.
  4. Выполните стилизацию мини-карточки.
  5. Добавьте системную настройку Has[Код раздела]MiniPageAddMode.

Важно.

Для того, чтобы осуществить привязку создаваемой мини-карточки к объектам некоторого раздела, нужно внести уникальный идентификатор мини-карточки в колонку MiniPageSchemaUId этих объектов. На текущий момент единственной возможностью сделать это является внесение изменений в системную таблицу SysModuleEdit базы данных Creatio при помощи SQL-запроса.

Однако при составлении и выполнении SQL-запроса к базе данных следует быть предельно внимательным. Выполнение неправильно составленного SQL-запроса может привести к повреждению существующих данных и нарушению работы системы.

На заметку.

Для разделов Creatio, в которых мини-карточки реализованы по умолчанию, существуют системные настройки, коды которых соответствуют маске Has[Код раздела]MiniPageAddMode (например, HasAccountMiniPageAddMode). Эти системные настройки используются для переключения между режимами добавления новой записи и редактирования существующей с помощью мини-карточки.

Создать мини-карточку можно для любого объекта системы.

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

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

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

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

  1. В пользовательский пакет добавьте схему модели представления карточки. В качестве родительского объекта выберите схему BaseMiniPage.
  2. При помощи специального SQL-запроса внесите изменения в системную таблицу SysModuleEdit базы данных Creatio.
  3. Добавьте необходимую функциональность мини-карточки в исходный код схемы.
  4. Добавьте системную настройку HasProductMiniPageAddMode.

На заметку.

Для разделов Creatio, в которых мини-карточки реализованы по умолчанию, существуют системные настройки, коды которых соответствуют маске HasКод разделаMiniPageAddMode (например, HasAccountMiniPageAddMode). Эти системные настройки используются для переключения между режимами добавления новой записи и редактирования существующей с помощью мини-карточки.

Создать пользовательскую мини-карточку
Сложный

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

Создать пользовательскую мини-карточку для раздела База знаний. Мини-карточка будет служить для просмотра базового набора полей Название и Теги с возможностью скачивания прикрепленных файлов.

Исходный код 

Пакет со схемой мини-карточки раздела База знаний, реализующей этот пример, вы можете скачать по ссылке.

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

1. Создание схемы модели представления мини-карточки 

В разделе Конфигурация (Configuration) на вкладке Схемы (Schemas) выполните команду меню Добавить— Расширенные — Схема модели представления карточки (Add — Additional —  Schema of the Edit Page View Model) (рис.1).

Рис.1. — Добавление схемы представления карточки

Для схемы модели представления мини-карточки заполните ее свойства (рис. 2).

  • [Название] ([Name]) — "UsrKnowledgeBaseArticleMiniPage";
  • [Заголовок] ([Title]) — "Миникарточка базы знаний" ("KnowledgeBase Mini Page");
  • [Пакет] ([Package]) — пользовательский пакет, в котором ведется разработка, например, UsrPackage;
  • [Родительский объект] ([Parent object]) — схема BaseMiniPage из пакета NUI;
Рис.2. — Свойства схемы модели представления мини-карточки

2. Регистрация мини-карточки в базе данных 

Для внесения изменений в базу данных выполните следующий SQL-запрос.

DECLARE 
    -- Название схемы представления создаваемой мини-карточки.
    @ClientUnitSchemaName NVARCHAR(100) = 'UsrKnowledgeBaseArticleMiniPage',
    -- Название схемы объекта, к которому привязывается мини-карточка.
    @EntitySchemaName NVARCHAR(100) = 'KnowledgeBase'

UPDATE SysModuleEdit
SET MiniPageSchemaUId = (
    SELECT TOP 1 UId
    FROM SysSchema
    WHERE Name = @ClientUnitSchemaName
)
WHERE SysModuleEntityId = (
    SELECT TOP 1 Id
    FROM SysModuleEntity
    WHERE SysEntitySchemaUId = (
        SELECT TOP 1 UId
        FROM SysSchema
        WHERE Name = @EntitySchemaName
            AND ExtendParent = 0
    )
);

Результатом выполнения данного запроса будет уникальный идентификатор мини-карточки, записанный в таблице SysModuleEdit в поле MiniPageSchemaUId записи, соответствующей разделу База знаний (Knowledge base)(рис.3).

Рис.3. — Значение уникального идентификатора мини-карточки в таблице SysModuleEdit

3. Отображение полей основного объекта 

Структура кода мини-карточки идентична структуре страницы записи. В качестве схемы объекта укажите схему KnowledgeBase и добавьте необходимые модификации в массив модификаций модели представления diff.

Базовая мини-карточка состоит из следующих элементов:

  • MiniPageTerrasoft.GridLayout — поле карточки.
  • HeaderContainerTerrasoft.Container — заголовок карточки (изначально размещается в первом ряду поля карточки).

В примере в массив модификаций diff добавлены два объекта, которые конфигурируют поля Name и Keywords.

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

Исходный код схемы модели представления мини-карточки:

define("UsrKnowledgeBaseArticleMiniPage", [], function() {
    return {
        entitySchemaName: "KnowledgeBase",
        attributes: {
            "MiniPageModes": {
                "value": [this.Terrasoft.ConfigurationEnums.CardOperation.VIEW]
            }
        },
        diff: /**SCHEMA_DIFF*/[
            {
                "operation": "insert",
                "name": "Name",
                "parentName": "HeaderContainer",
                "propertyName": "items",
                "index": 0,
                "values": {
                    "labelConfig": {
                        "visible": false
                    },
                    "isMiniPageModelItem": true
                }
            },
            {
                "operation": "insert",
                "name": "Keywords",
                "parentName": "MiniPage",
                "propertyName": "items",
                "values": {
                    "labelConfig": {
                        "visible": false
                    },
                    "isMiniPageModelItem": true,
                    "layout": {
                        "column": 0,
                        "row": 1,
                        "colSpan": 24
                    }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

4. Добавление функциональной кнопки в мини-карточку 

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

Работа с дополнительными данными обеспечивается с помощью механизма их отображения в виде выпадающего списка преднастроенной кнопки. Для добавления кнопки выбора файлов статьи базы знаний:

  1. Добавьте описание кнопки в массив diff — элемент FilesButton.
  2. Добавьте атрибут, связывающий основную и дополнительные записи — виртуальную колонку Article.
  3. Добавьте атрибут MiniPageModes — массив, содержащий коллекцию необходимых операций, выполняемых мини-карточкой.
  4. Добавьте изображение кнопки в ресурсы схемы. Например можно использовать это изображение — . Добавление изображения в ресурсы описано в статье "Добавить поле с изображением".
  5. Добавьте методы работы с выпадающим списком кнопки выбора файла:
    • переопределите метод init();
    • переопределите метод onEntityInitialized();
    • установите значение атрибута Article с помощью метода setArticleInfo();
    • получите информацию о файлах текущей статьи базы знаний с помощью метода getFiles(callback, scope);
    • наполните коллекцию выпадающего списка кнопки выбора файлов с помощью метода initFilesMenu(files);
    • инициируйте загрузку файлов и их добавление в выпадающий список кнопки выбора файлов с помощью метода fillFilesExtendedMenuData();
    • инициируйте скачивание выбранного файла с помощью метода downloadFile().

5. Выполнить стилизацию мини-карточки 

Создайте модуль UsrKnowledgeBaseArticleMiniPageCss и на вкладке LESS укажите необходимые стили.

div[data-item-marker="UsrKnowledgeBaseArticleMiniPageContainer"] > div {
width: 250px;
}

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

Ниже приведен полный исходный код мини-карточки:

define("UsrKnowledgeBaseArticleMiniPage",
["terrasoft", "KnowledgeBaseFile", "ConfigurationConstants", "css!UsrKnowledgeBaseArticleMiniPageCss"],
    function(Terrasoft, KnowledgeBaseFile, ConfigurationConstants) {
        return {
            entitySchemaName: "KnowledgeBase",
            attributes: {
                "MiniPageModes": {
                    "value": [this.Terrasoft.ConfigurationEnums.CardOperation.VIEW]
                },
                "Article": {
                    "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                    "referenceSchemaName": "KnowledgeBase"
                }
            },
            methods: {
                // Инициализирует коллекцию выпадающего списка кнопки выбора файлов.
                init: function() {
                    this.callParent(arguments);
                    this.initExtendedMenuButtonCollections("File", ["Article"], this.close);
                },
                // Инициализирует значение атрибута, связывающего основную и дополнительные записи.
                // Наполняет коллекцию выпадающего списка кнопки выбора файлов.
                onEntityInitialized: function() {
                    this.callParent(arguments);
                    this.setArticleInfo();
                    this.fillFilesExtendedMenuData();
                },
                // Инициирует загрузку файлов и их добавление в выпадающий список кнопки выбора файлов.
                fillFilesExtendedMenuData: function() {
                    this.getFiles(this.initFilesMenu, this);
                },
                // Устанавливает значение атрибута, связывающего основную и дополнительные записи.
                setArticleInfo: function() {
                    this.set("Article", {
                        value: this.get(this.primaryColumnName),
                        displayValue: this.get(this.primaryDisplayColumnName)
                    });
                },
                // Получает информацию о файлах текущей статьи базы знаний.
                getFiles: function(callback, scope) {
                    var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {
                        rootSchema: KnowledgeBaseFile
                    });
                    esq.addColumn("Name");
                    var articleFilter = this.Terrasoft.createColumnFilterWithParameter(
                        this.Terrasoft.ComparisonType.EQUAL, "KnowledgeBase", this.get(this.primaryColumnName));
                    var typeFilter = this.Terrasoft.createColumnFilterWithParameter(
                        this.Terrasoft.ComparisonType.EQUAL, "Type", ConfigurationConstants.FileType.File);
                    esq.filters.addItem(articleFilter);
                    esq.filters.addItem(typeFilter);
                    esq.getEntityCollection(function(response) {
                        if (!response.success) {
                            return;
                        }
                        callback.call(scope, response.collection);
                    }, this);
                },
                // Наполняет коллекцию выпадающего списка кнопки выбора файлов.
                initFilesMenu: function(files) {
                    if (files.isEmpty()) {
                        return;
                    }
                    var data = [];
                    files.each(function(file) {
                        data.push({
                            caption: file.get("Name"),
                            tag: file.get("Id")
                        });
                    }, this);
                    var recipientInfo = this.fillExtendedMenuItems("File", ["Article"]);
                    this.fillExtendedMenuData(data, recipientInfo, this.downloadFile);
                },
                // Инициирует скачивание выбранного файла.
                downloadFile: function(id) {
                    var element = document.createElement("a");
                    element.href = "../rest/FileService/GetFile/" + KnowledgeBaseFile.uId + "/" + id;
                    document.body.appendChild(element);
                    element.click();
                    document.body.removeChild(element);
                }
            },
            diff: /**SCHEMA_DIFF*/[
                {
                    "operation": "insert",
                    "name": "Name",
                    "parentName": "HeaderContainer",
                    "propertyName": "items",
                    "index": 0,
                    "values": {
                        "labelConfig": {
                            "visible": true
                        },
                        "isMiniPageModelItem": true
                    }
                },
                {
                    "operation": "insert",
                    "name": "Keywords",
                    "parentName": "MiniPage",
                    "propertyName": "items",
                    "values": {
                        "labelConfig": {
                            "visible": true
                        },
                        "isMiniPageModelItem": true,
                        "layout": {
                            "column": 0,
                            "row": 1,
                            "colSpan": 24
                        }
                    }
                },
                {
                    "operation": "insert",
                    "parentName": "HeaderContainer",
                    "propertyName": "items",
                    "name": "FilesButton",
                    "values": {
                        "itemType": Terrasoft.ViewItemType.BUTTON,
                        // Настройка изображения кнопки.
                        "imageConfig": {
                            // Изображение предварительно необходимо добавить в ресурсы миникарточки.
                            "bindTo": "Resources.Images.FilesImage"
                        },
                        // Настройка выпадающего списка.
                        "extendedMenu": {
                            // Название элемента выпадающего списка.
                            "Name": "File",
                            // Название атрибута миникарточки, связывающего основную и дополнительные записи
                            "PropertyName": "Article",
                            // Настрока обработчика нажатия на кнопку.
                            "Click": {
                                "bindTo": "fillFilesExtendedMenuData"
                            }
                        }
                    },
                    "index": 1
                }
            ]/**SCHEMA_DIFF*/
        };
    });

6. Добавить системную настройку HasProductMiniPageAddMode 

В разделе Системные настройки дизайнера системы добавьте системную настройку со следующими свойствами (рис. 4):

  • [Название] ([Name]) — "HasKnowledgeBaseMiniPageAddMode".
  • [Код] ([Code]) — "HasKnowledgeBaseMiniPageAddMode".
  • [Тип] ([Type]) — "Логическое" ("Boolean").
  • [Значение по умолчанию] ([Default value]) — признак установлен.
Рис. 4. — Системная настройка

После сохранения схемы и обновления веб-страницы приложения в разделе База знаний (Knowledge base) при наведении курсора на название будет отображаться пользовательская мини-карточка, в которой будут отображены связанные с записью файлы и реализована возможность скачать их (рис. 5).

Рис. 5. — Результат выполнения примера
Создать мини-карточку добавления
Сложный

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

Создать пользовательскую мини-карточку добавления новой записи в раздел Продукты. Мини-карточка должна добавлять базовый набор полей Название и Код.

Исходный код 

Пакет со схемой мини-карточки раздела Продукты, реализующей этот пример, вы можете скачать по ссылке.

Алгоритм реализации кейса 

1. Создание схему модели представления мини-карточки 

В разделе Конфигурация (Configuration) на вкладке Схемы (Schemas) выполните команду меню ДобавитьРасширенныеСхема модели представления карточки (AddAdditionalSchema of the Edit Page View Model) (рис.1).

Рис. 1. — Добавление схемы представления мини-карточки

Для схему модели представления мини-карточки заполните ее свойства (рис. 2).

  • [Название] — "UsrProductMiniPage".
  • [Заголовок] — "Мини-карточка продукта" ("Product Mini Page").
  • [Пакет] — пользовательский пакет, в котором ведется разработка, например, Custom.
  • [Родительский объект] — схема BaseMiniPage из пакета NUI.
Рис. 2. — Свойства схемы модели представления мини-карточки

2. Регистрация мини-карточки в базе данных 

Для внесения изменений в базу данных выполните следующий SQL-запрос.

DECLARE 
    -- Название схемы представления создаваемой мини-карточки.
    @ClientUnitSchemaName NVARCHAR(100) = 'UsrProductMiniPage',
    -- Название схемы объекта, к которому привязывается мини-карточка.
    @EntitySchemaName NVARCHAR(100) = 'Product'

UPDATE SysModuleEdit
SET MiniPageSchemaUId = (
    SELECT TOP 1 UId
    FROM SysSchema
    WHERE Name = @ClientUnitSchemaName
)
WHERE SysModuleEntityId = (
    SELECT TOP 1 Id
    FROM SysModuleEntity
    WHERE SysEntitySchemaUId = (
        SELECT TOP 1 UId
        FROM SysSchema
        WHERE Name = @EntitySchemaName
            AND ExtendParent = 0
    )
);

Результатом выполнения данного запроса будет уникальный идентификатор мини-карточки, записанный в таблице SysModuleEdit в поле MiniPageSchemaUId записи, соответствующей разделу Продукты (рис.3).

Рис. 3. — Значение уникального идентификатора мини-карточки в таблице SysModuleEdit

Важно.

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

3. Отображение полей основного объекта 

Добавьте приведенный ниже исходный код в схему модели представления мини-карточки, созданную на первом шаге.

define("UsrProductMiniPage", ["UsrProductMiniPageResources"],
    function(resources) {
        return {
            entitySchemaName: "Product",
            details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
            attributes: {
                "MiniPageModes": {
                    "value": [this.Terrasoft.ConfigurationEnums.CardOperation.ADD]
                }
            },
            diff: /**SCHEMA_DIFF*/[
                {
                    "operation": "insert",
                    "parentName": "MiniPage",
                    "propertyName": "items",
                    "name": "Name",
                    "values": {
                        "isMiniPageModelItem": true,
                        "layout": {
                            "column": 0,
                            "row": 1,
                            "colSpan": 24
                        },
                        "controlConfig": {
                            "focused": true
                        }
                    }
                },
                {
                    "operation": "insert",
                    "parentName": "MiniPage",
                    "propertyName": "items",
                    "name": "Code",
                    "values": {
                        "isMiniPageModelItem": true,
                        "layout": {
                            "column": 0,
                            "row": 2,
                            "colSpan": 24
                        }
                    }
                }
            ]/**SCHEMA_DIFF*/
        };
    });

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

На заметку.

Если кроме операции добавления новой записи требуется отображение мини-карточки на странице раздела (см. "Создание мини-карточки"), то в массив, присваиваемый атрибуту MiniPageModes, также необходимо добавить значение this.Terrasoft.ConfigurationEnums.CardOperation.VIEW.

Важно.

Если обязательные колонки объекта не указаны в массиве diff, то они будут выведены внизу мини-карточки.

4. Добавить системную настройку HasProductMiniPageAddMode 

В разделе Системные настройки дизайнера системы добавьте системную настройку со следующими свойствами (рис. 4):

  • [Название] ([Name]) — "HasProductMiniPageAddMode".
  • [Код] ([Code]) — "HasProductMiniPageAddMode".
  • [Тип] ([Type]) — "Логическое" ("Boolean").
  • [Значение по умолчанию] ([Default value]) — признак установлен.
Рис. 4. — Системная настройка

В результате выполнения примера при добавлении нового продукта будет отображаться мини-карточка с двумя полями (рис. 5).

Рис. 5. — Мини-карточка добавления продукта

После сохранения мини-карточки соответствующая запись появится в реестре раздела (рис. 6).

Рис. 6. — Запись в разделе Продукты

Важно.

Запись в реестре раздела будет отображена только после обновления страницы браузера. Чтобы запись отображалась сразу же после сохранения мини-карточки, необходимо добавить соответствующую функциональность в схему мини-карточки и страницы раздела, используя механизм сообщений ("Обмен сообщениями между модулями").

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

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

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

Исходный код 

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

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

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. Как создать схему замещающей модели представления, подробно изложено в статье "Cоздать клиентскую схему".

Для отображения представления в исходном коде схемы замещающей модели представления используйте свойство 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. — Мини-карточка контакта