Отобразить часовой пояс контакта на вкладку коммуникационной панели

Сложный

Пример. При поиске контакта на вкладке Звонки (CTI panel) коммуникационной панели отображать его часовой пояс. Использовать текущее время контакта.

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

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

  2. На панели инструментов реестра раздела нажмите Добавить —> Замещающая модель представления (Add —> Replacing view model).

  3. Заполните свойства схемы.

    • Код (Code) — "SubscriberSearchResultItem".
    • Заголовок (Title) — "Схема найденного абонента" ("Found subscriber schema").
    • Родительский объект (Parent object) — выберите "SubscriberSearchResultItem".
  4. В объявлении класса модели представления в качестве зависимостей добавьте модули TimezoneGenerator и TimezoneMixin. Модуль TimezoneGenerator формирует элемент отображения часового пояса контакта. Модуль TimezoneMixin выполняет поиск часового пояса контакта.

  5. Реализуйте логику отображения часового пояса.

    • В свойстве attributes добавьте атрибут IsShowTimeZone, который отвечает за состояние отображения элемента часового пояса.

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

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

    • В свойстве methods реализуйте методы:

      • constructor() — конструктор класса.
      • isContactType() — возвращает признак, который указывает, что абонент является контактом.

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

      • Свойство index — настройка позиционирования элемента.

        Элементы контейнера SubscriberSearchResultItemContainer:

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

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

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

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

    SubscriberSearchResultItem
    define("SubscriberSearchResultItem", ["TimezoneGenerator", "TimezoneMixin"], 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",
                /* Мета-имя родительского контейнера, в который добавляется элемент. */
                "parentName": "SubscriberSearchResultItemContainer",
                /* Элемент добавляется в коллекцию элементов родительского элемента. */
                "propertyName": "items",
                /* Мета-имя добавляемого элемента. */
                "name": "TimezoneContact",
                /* Свойства, передаваемые в конструктор элемента. */
                "values": {
                    /* Тип элемента. */
                    "itemType": Terrasoft.ViewItemType.CONTAINER,
                    /* Для формирования конфигурации представления вызывается метод генератора. */
                    "generator": "TimezoneGenerator.generateTimeZone",
                    /* Видимость контейнера привязывается к атрибуту. */
                    "visible": {"bindTo": "IsShowTimeZone"},
                    /* Имя CSS класса. */
                    "wrapClass": ["subscriber-data", "timezone"],
                    /* Привязка заголовка к атрибуту. */
                    "timeZoneCaption": {"bindTo": "TimeZoneCaption"},
                    /* Привязка города к атрибуту. */
                    "timeZoneCity": {"bindTo": "TimeZoneCity"}
                },
                /* Позиция элемента в родительском контейнере. */
                "index": 2
            }
        ]
    };
});
  6. На панели инструментов дизайнера нажмите Сохранить (Save).

В результате в приложении отображается текущее время контакта и его город.

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

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

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

1. Создать схему модуля 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

  2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

  3. Заполните свойства схемы:

    • Код (Code) — "UsrSubscriberSearchResultItemCSS".
    • Заголовок (Title) — "SubscriberSearchResultItemCSS".

    Для применения заданных свойств нажмите Применить (Apply).

  4. Перейдите в узел LESS структуры объекта и задайте необходимые стили отображения часового пояса.

    Настройка стилей отображения часового пояса
    /* Настройка стилей для отображения добавляемого элемента. */
.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;
}

  5. Перейдите в узел JS структуры объекта и добавьте код модуля.

    UsrSubscriberSearchResultItemCSS
    define("UsrSubscriberSearchResultItemCSS", [], function() {
    return {};
});
  6. На панели инструментов дизайнера нажмите Сохранить (Save).

2. Модифицировать схему модели представления страницы найденного абонента 

Чтобы использовать созданный модуль и его стили в схеме страницы найденного абонента:

  1. Откройте схему SubscriberSearchResultItem модели представления страницы найденного абонента.

  2. В зависимости схемы SubscriberSearchResultItem добавьте модуль UsrSubscriberSearchResultItemCSS.

    Исходный код модифицированной схемы страницы найденного абонента представлен ниже.

    SubscriberSearchResultItem
    define("SubscriberSearchResultItem", ["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",
                /* Мета-имя родительского контейнера, в который добавляется элемент. */
                "parentName": "SubscriberSearchResultItemContainer",
                /* Элемент добавляется в коллекцию элементов родительского элемента. */
                "propertyName": "items",
                /* Мета-имя добавляемого элемента. */
                "name": "TimezoneContact",
                /* Свойства, передаваемые в конструктор элемента. */
                "values": {
                    /* Тип элемента. */
                    "itemType": Terrasoft.ViewItemType.CONTAINER,
                    /* Для формирования конфигурации представления вызывается метод генератора. */
                    "generator": "TimezoneGenerator.generateTimeZone",
                    /* Видимость контейнера привязывается к атрибуту. */
                    "visible": {"bindTo": "IsShowTimeZone"},
                    /* Имя CSS класса. */
                    "wrapClass": ["subscriber-data", "timezone"],
                    /* Привязка заголовка к атрибуту. */
                    "timeZoneCaption": {"bindTo": "TimeZoneCaption"},
                    /* Привязка города к атрибуту. */
                    "timeZoneCity": {"bindTo": "TimeZoneCity"}
                },
                /* Позиция элемента в родительском контейнере. */
                "index": 2
            }
        ]
    };
});
  3. На панели инструментов дизайнера нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

  1. Откройте вкладку Звонки (CTI panel) коммуникационной панели.
  2. Выполните поиск абонента.

В результате выполнения примера при поиске контакта на вкладке Звонки (CTI panel) коммуникационной панели отображается его часовой пояс. Используется текущее время контакта.

Ресурсы
Пакет с реализацией примера