Creatio development guide
PDF
Документация по разработке

Отображение часового пояса контакта

Glossary Item Box

Общая информация

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

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

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

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

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

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

Исходный код

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

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

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

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

Рис. 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.

© Terrasoft 2002-2019.

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

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