Страница записи

PDF
Основы

Страница записи — элемент интерфейса, предназначенный для работы с записями реестра. На странице хранится вся информация о бизнес-объектах в виде полей, вкладок и деталей, дашбордов. Страница именуется по названию соответствующих объектов системы (например, страница контрагента, страница контакта и т. д.). Она открывается при создании новой или редактировании существующей записи реестра раздела. У каждого раздела есть одна или несколько страниц записей.

Каждой странице записи соответствует своя схема клиентского модуля. Например, конфигурирование страницы контакта выполнено в схеме ContactPageV2 пакета UIv2. Все схемы страниц записи унаследованы от родительской схемы BasePageV2 пакета NUI.

Элементы пользовательского интерфейса приложения, относящиеся к странице записи, размещены в соответствующих контейнерах, которые конфигурируются в базовой или унаследованной схеме страницы записи. К основным контейнерам страницы записи относятся:

  • контейнер кнопок действий (ActionButtonsContainer), в котором размещены кнопки действий страницы записи;
  • контейнер левой части страницы записи (LeftModulesContainer), в котором размещены основные поля ввода и редактирования данных;
  • контейнер панели действий (ActionDashboardContainer), в котором размещены непосредственно панель действий и полоса стадий;
  • контейнер вкладок (TabsContainer), содержащий вкладки с полями ввода и редактирования, сгруппированными по какому-либо признаку, например, месту работы.

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

Настройка логики страницы записи 

Одним из инструментов настройки логики страниц в Creatio являются бизнес-правила.

Бизнес-правила — это стандартный механизм системы, который позволяет настраивать поведение полей на странице путем конфигурирования колонок модели представления.

Бизнес-правила позволяют решать следующие типовые задачи:

  • скрыть или отобразить поле;
  • заблокировать или разблокировать поле;
  • сделать поле обязательным или необязательным для заполнения;
  • отфильтровать значения справочного поля в зависимости от значения в другом поле.

К основным элементам управления страницы относятся:

  • поле ввода;
  • кнопка;
  • поле с изображением;
  • кнопка выбора цвета;
  • мультивалютное поле.

Creatio предоставляет возможность добавлять на страницу записи стандартные элементы управления, изменять их и создавать пользовательские элементы управления.

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

Добавить действие на страницу записи 

В Creatio реализована возможность настройки списка действий из стандартного меню Действия на странице записи.

Список действий страницы представляет собой экземпляр класса Terrasoft.BaseViewModelCollection. Каждый элемент списка действий — это модель представления.

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

Наполнение меню Действия страницы записи реализовано в базовом классе страниц BasePageV2. Защищенный виртуальный метод getActions() из схемы BasePageV2 возвращает список действий раздела.

Добавление отдельного действия в коллекцию выполняется вызовом метода addItem(). В качестве параметра ему передается callback-метод getButtonMenuItem(). Метод создает экземпляр модели представления действия по конфигурационному объекту, который передан ему в качестве параметра.

Базовая реализация добавления действия

/**
* Возвращает коллекцию действий страницы записи
* @protected
* @virtual
* @return {Terrasoft.BaseViewModelCollection} Возвращает коллекцию действий страницы записи
*/
getActions: function() {
    // Список действий — экземпляр Terrasoft.BaseViewModelCollection
    var actionMenuItems = this.Ext.create("Terrasoft.BaseViewModelCollection");
    // Добавление действия в коллекцию. В качестве callback-метода передается метод,
    // инстанцирующий экземпляр модели действия по переданному конфигурационному
    // объекту.
    actionMenuItems.addItem(this.getButtonMenuItem({ 
        // Конфигурационный объект настройки действия.
        ...
    }));
    // Возвращает новую коллекцию действий.
    return actionMenuItems;
}

Свойства конфигурационного объекта действия страницы, который передается параметром в метод getButtonMenuItem() представлены в таблице 1.

Табл. 1. — Свойства конфигурационного объекта
Свойство Описание
Type Тип элемента меню Действия. С помощью этого свойства можно добавить в меню действия горизонтальную линию для отделения блоков меню. Для этого в качестве значения свойства нужно указать строку Terrasoft.MenuSeparator. Если значение свойства не указано, то по умолчанию будет добавлен пункт меню.
Caption Заголовок пункта меню Действия. Для задания заголовков рекомендуется использовать локализуемые строки.
Tag В этом свойстве задается имя метода обработчика действия.
Enabled Логическое свойство, регулирующее доступность пункта меню.
Visible Логическое свойство, которое регулирует видимость пункта меню.

Последовательность добавления пользовательского действия

  1. Создать схему замещающей модели представления страницы или схему модели представления страницы.
  2. Переопределить метод getActions().
  3. Добавить действие в коллекцию действий методом addItem().
  4. В callback-метод getButtonMenuItem() передать конфигурационный объект с настройками добавляемого действия.

Важно. При замещении базовых страниц в методе getActions() замещающей схемы модели представления сначала нужно вызвать родительскую реализацию этого метода для инициализации действий родительской страницы. Для этого необходимо выполнить метод this.callParent(arguments), который вернет коллекцию действий базовой страницы.

В версии 7.8 появилась возможность работы с часовыми поясами. На странице контакта добавлена информация о часовом поясе. Значение часовых поясов контакта рассчитывается автоматически. Подробнее о расчете часовых поясов контакта можно узнать из статьи "Как узнать текущее время контакта". Информация отображается в элементе, который формируется при помощи генератора представления. Данный элемент невозможно добавить на страницу при помощи дизайнера страницы.

Для добавления элемента отображения часового пояса контакта на страницу пользователя необходимо:

  1. Создать схему замещающей модели представления страницы.
  2. Добавить элемент отображения часового пояса.
  3. Подключить поиск часового пояса.
  4. Настроить стили отображения.
Добавить действие на страницу записи
Средний

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

На страницу заказа необходимо добавить действие Показать дату выполнения (Show execution date), которое отобразит в информационном окне планируемую дату выполнения заказа. Действие будет доступно только для заказов, находящихся на стадии Исполнение (In progress).

Важно. Пример актуален для кастомизации линейки продуктов Sales Creatio.

На заметку. Действие страницы записи применяется к конкретному объекту, который открыт на странице. Для доступа к значениям полей объекта страницы записи в методе-обработчике действия необходимо использовать методы модели представления: get() — для получения значения и set() — для установки значения.

Исходный код 

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

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

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

Создайте схему замещающей модели представления, в которой в качестве родительского объекта укажите схему Страница редактирования заказа (Order edit page, OrderPageV2) (рис. 1). Процесс создания схему замещающей модели представления описан в статье "Cоздать клиентскую схему".

Рис. 1. — Свойства замещающей страницы записи

2. В коллекцию локализуемых строк схемы замещающей модели представления страницы добавить строку с заголовком пункта меню Действия (Actions) 

Создайте новую локализуемую строку (рис. 2).

Рис. 2 — Добавление в схему локализуемой строки

Для созданной строки укажите (рис. 3):

  • Название (Name) — "InfoActionCaption";
  • Значение (Value) — "Показать дату выполнения" (“Show execution date”).
Рис. 3. — Свойства пользовательской локализуемой строки

3. В коллекцию методов схемы замещающей модели представления страницы добавить реализацию методов 

  • isRunning() — проверяет, находится ли заказ на стадии Исполнение (In progress), и определяет доступность добавленного пункта меню.
  • showOrderInfo() — метод-обработчик действия, который отображает в информационном окне планируемую дату завершения заказа;
  • getActions() — переопределенный метод родительской схемы, возвращающий коллекцию действий страницы переопределенный.

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

define("OrderPageV2", ["OrderConfigurationConstants"], function(OrderConfigurationConstants) {
    return {
        // Название схемы объекта страницы записи.
        entitySchemaName: "Order",
        // Методы модели представления страницы записи.
        methods: {
            // Проверяет, на какой стадии находится заказ, для определения доступности пункта меню.
            isRunning: function() {
                // Метод возвращает true, если статус заказа [Исполнение], иначе возвращает false.
                if (this.get("Status")) {
                    return this.get("Status").value === OrderConfigurationConstants.Order.OrderStatus.Running;
                }
                return false;
            },
            // Метод-обработчик действия. Отображает в информационном окне дату выполнения заказа.
            showOrderInfo: function() {
                // Получение даты выполнения заказа.
                var dueDate = this.get("DueDate");
                // Отображение информационного окна.
                this.showInformationDialog(dueDate);
            },
            // Переопределение базового виртуального метода, возвращающего коллекцию действий страницы записи.
            getActions: function() {
                // Вызывается родительская реализация метода для получения
                // коллекции проинициализированных действий базовой страницы.
                var actionMenuItems = this.callParent(arguments);
                // Добавление линии-разделителя.
                actionMenuItems.addItem(this.getButtonMenuItem({
                    Type: "Terrasoft.MenuSeparator",
                    Caption: ""
                }));
                // Добавление пункта меню в список действий страницы записи.
                actionMenuItems.addItem(this.getButtonMenuItem({
                    // Привязка заголовка пункта меню к локализуемой строке схемы.
                    "Caption": {bindTo: "Resources.Strings.InfoActionCaption"},
                    // Привязка метода-обработчика действия.
                    "Tag": "showOrderInfo",
                    // Привязка свойства доступности пункта меню к значению, которое возвращает метод isRunning().
                    "Enabled": {bindTo: "isRunning"}
                }));
                return actionMenuItems;
            }
        }
    };
});

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

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

4. Создать схему замещающей модели представления раздела Заказы (Orders) 

Создайте замещающий клиентский модуль, в котором в качестве родительского объекта укажите схему OrderSectionV2 (рис. 4). Процесс создания замещающей страницы описан в статье "Cоздать клиентскую схему".

Рис. 4. — Свойства схему замещающей модели представления страницы раздела Заказы

5. Добавить локализуемую строку с заголовком пункта меню Действия (Actions) 

Повторите действия из пункта 2.

6. Добавить реализацию метода 

В коллекцию методов схемы модели представления раздела добавьте реализацию метода isRunning() , который будет проверять, находится ли выбранный заказ на стадии Исполнение (In progress), и определяет доступность добавленного пункта меню.

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

define("OrderSectionV2", ["OrderConfigurationConstants"], function(OrderConfigurationConstants) {
    return {
        // Название схемы раздела.
        entitySchemaName: "Order",
        // Методы модели представления раздела.
        methods: {
            // Проверяет, на какой стадии находится заказ, для определения доступности пункта меню.
            isRunning: function(activeRowId) {
                activeRowId = this.get("ActiveRow");
                // Получение коллекции данных списочного представления реестра раздела.
                var gridData = this.get("GridData");
                // Получение модели выбранного заказа по заданному значению первичной колонки.
                var selectedOrder = gridData.get(activeRowId);
                // Получение свойства модели — статуса выбранного заказа.
                var selectedOrderStatus = selectedOrder.get("Status");
                // Метод возвращает true, если статус заказа [Исполнение]. Иначе возвращает false.
                return selectedOrderStatus.value === OrderConfigurationConstants.Order.OrderStatus.Running;
            }
        }
    };
});

После сохранения схемы и обновления страницы приложения с очисткой кэша, при выборе заказа, находящегося на стадии Исполнение (In progress), на странице заказа появится новое действие (рис. 5, 6).

Рис. 5. — Результат выполнения примера. Заказ на стадии Завершен (Completed) — действие неактивно
Рис. 6. — Результат выполнения примера. Заказ на стадии Исполнение (In progress) — действие активно
Отобразить часовой пояс контакта
Сложный

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

Необходимо добавить элемент отображения часового пояса контакта на вкладку Звонки коммуникационной панели. Для удобства совершения звонков абонентам в другом часовом поясе, при поиске номера телефона необходимо отображать текущее время контакта (рис.1).

Рис. 1. — Отображение текущего времени абонента

Исходный код 

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

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

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

В пользовательском пакете создайте схему замещающей модели представления (рис. 2), для которого укажите родительский объект Схема найденного абонента (Found subscriber schema, SubscriberSearchResultItem) (рис. 3). Процесс создания схему замещающей модели представления описан в статье "Cоздать клиентскую схему".

Рис. 2. — Создание схемы замещающей модели представления
Рис. 3 — Свойства схемы замещающей модели представления

2. Добавить элемент отображения часового пояса 

В зависимости схемы добавьте модули:

  • TimezoneGenerator — модуль Генератор компонента "Часовой пояс", при помощи которого формируется элемент отображения часового пояса контакта.
  • TimezoneMixin — микcин, который используется для поиска часового пояса контакта.

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

3. Подключить поиск часового пояса 

Для запуска поиска часового пояса контакта в метод init() миксина TimezoneMixin передайте уникальный идентификатор контакта. В результате выполнения будут установлены атрибуты:

  • TimeZoneCaption — название временной зоны контакта и текущее время.
  • TimeZoneCity — название города, для которого определена временная зона.

Исходный код схемы:

// Объявление схемы.
define("SubscriberSearchResultItem",
    // Зависимость от TimezoneGenerator, TimezoneMixin.
    ["TimezoneGenerator", "TimezoneMixin",
    // Зависимость от модуля со стилями.
    "css!UsrSubscriberSearchResultItemCss"],
        function() {
            return {
                // Блок для создания атрибутов.
                attributes: {
                    // Название атрибута, который отвечает за состояние отображения элемента часового пояса.
                    "IsShowTimeZone": {
                        // Тип данных атрибута.
                        "dataValueType": Terrasoft.DataValueType.BOOLEAN,
                        // Тип атрибута в модели.
                        "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                        // Значение по умолчанию.
                        "value": true
                    }
                },
                // Блок для подключения миксинов.
                mixins: {
                    // Подключение миксина.
                    TimezoneMixin: "Terrasoft.TimezoneMixin"
                },
                // Блок для определения методов.
                methods: {
                    // Конструктор класса.
                    constructor: function() {
                        // Вызов базового конструктора.
                        this.callParent(arguments);
                        // Признак того, что абонент является контактом.
                        var isContact = this.isContactType();
                        // Если абонент — контакт, то элемент отображается.
                        this.set("IsShowTimeZone", isContact);
                        // Если абонент — контакт.
                        if (isContact) {
                            // Идентификатор контакта.
                            var contactId = this.get("Id");
                            // Поиск часового пояса контакта.
                            this.mixins.TimezoneMixin.init.call(this, contactId);
                        }
                    },
                    // Возвращает признак того, что абонент — контакт.
                    isContactType: function() {
                        // Тип абонента.
                        var type = this.get("Type");
                        // Возвращает результат сравнения.
                        return type === "Contact";
                    }
                },
                // Массив модификаций.
                diff: [
                    {
                        // Добавление нового элемента.
                        "operation": "insert",
                        // Родительским элементом является SubscriberSearchResultItemContainer.
                        "parentName": "SubscriberSearchResultItemContainer",
                        // Новый элемент добавляется в коллекцию элементов родителя.
                        "propertyName": "items",
                        // Название элемента.
                        "name": "TimezoneContact",
                        // Свойства элемента.
                        "values": {
                            // Тип элемента.
                            "itemType": Terrasoft.ViewItemType.CONTAINER,
                            // Для формирования конфигурации представления вызывается метод генератора.
                            "generator": "TimezoneGenerator.generateTimeZone",
                            // Видимость контейнера привязывается к атрибуту.
                            "visible": {"bindTo": "IsShowTimeZone"},
                            // Стиль элемента.
                            "wrapClass": ["subscriber-data", "timezone"],
                            // Заголовок привязываем к атрибуту.
                            "timeZoneCaption": {"bindTo": "TimeZoneCaption"},
                            // Город привязываем к атрибуту.
                            "timeZoneCity": {"bindTo": "TimeZoneCity"}
                        },
                        // Позиция элемента в родительском контейнере.
                        "index": 2
                    }
                ]
            };
        });

На этом шаге уже отображается текущее время контакта и его город.

4. Настроить стили отображения 

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

Позиционирование элемента выполняется при помощи свойства index. В контейнере SubscriberSearchResultItemContainer по умолчанию элементы расположены поочередно:

  • на первом месте с индексом 0 отображается фотография абонента,
  • на втором с индексом 1 — информация об абоненте,
  • на третьем с индексом 2 — телефоны абонента.

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

Стили текстовых элементов в схеме определяются CSS-классом subscriber-data. Генератор элемента предоставляет свойство wrapClass для возможности управления стилями.

Для позиционирования элемента и его визуального выделения создайте в пользовательском пакете модуль UsrSubscriberSearchResultItemCss.

На вкладке LESS созданного модуля добавьте CSS-селекторы классов, определяющие нужные стили.

/* Настройка стилей для отображения добавляемого элемента.*/
.ctiPanelMain .search-result-items-list-container .timezone {
    /* Отступ сверху.*/
    padding-top: 13px;
    /* Смещение снизу.*/
    margin-bottom: -10px;
}
/* Настройка стилей для отображения времени контакта.*/
.ctiPanelMain .search-result-items-list-container .timezone-caption {
    /* Отступ слева.*/
    padding-left: 10px;
    /* Цвет текста.*/
    color: rgb(255, 174, 0);
    /* Шрифт текста — жирный.*/
    font-weight: bold;
}
/* Настройка стилей для отображения города контакта.*/
.ctiPanelMain .search-result-items-list-container .timezone-city {
    /* Отступ слева.*/
    padding-left: 10px;
}

Для загрузки модуля со стилями добавьте исходный код в модуль и сохраните схему.

define("UsrSubscriberSearchResultItemCss", [],
        function() {
            return {};
        });

Добавьте модуль UsrSubscriberSearchResultItemCss в зависимости SubscriberSearchResultItem.

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