Кнопка

PDF
Легкий

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

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

Важно.

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

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

На заметку.

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

DOM-модель стандартных кнопок страницы 

Для расположения стандартных функциональных кнопок страниц записей Creatio используется иерархическая структура html-контейнеров.

CombinedModeActionButtonsCardContainer — контейнер верхнего уровня в совмещенном режиме редактирования записи. Внутри него располагаются еще два контейнера:

  • CombinedModeActionButtonsCardLeftContainer, в котором размещены стандартные кнопки Закрыть, Сохранить, Отмена, Действия и Теги;
  • CombinedModeActionButtonsCardRightContainer, в котором расположены кнопки Печать и Вид.

Аналогично, для страницы записи в обычном режиме контейнер верхнего уровня — ActionButtonsContainer. Внутри него располагаются еще два контейнера:

  • Leftcontainer, в котором размещены стандартные кнопки Закрыть, Сохранить, Отмена, Действия и Теги;
  • RightContainer, в котором расположены кнопки Печать и Вид.

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

На заметку.

Здесь используются мета-имена html-контейнеров. Эти имена указываются при настройке визуализации элемента управления в конфигурационном объекте массива diff. Фактические идентификаторы соответствующих html-элементов страницы формируются системой автоматически на основании таких мета-имен.

Особенности кнопки выбора цвета 

Один из элементов управления, который предоставляет Creatio — кнопка выбора цвета (рис. 1).

Рис. 1. — Кнопка выбора цвета

Алгоритм добавления кнопки выбора цвета на страницу записи объекта:

  1. Добавить в объект колонку с типом данных Строка (50 символов), которая будет хранить информацию о выбранном цвете.
  2. Добавить в массив diff описание элемента с типом COLOR_BUTTON. Установить для свойства value этого элемента привязку к добавленной в предыдущем шаге колонке.
  3. При необходимости добавить подпись для кнопки с помощью элемента управления LABEL.

Добавить к кнопке всплывающую подсказку 

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

Все всплывающие подсказки можно разделить на 3 основные группы:

1. Всплывающая подсказка к полю (при наличии такой подсказки заголовок поля помечается маленьким зеленым треугольником) . Подсказка появляется при наведении курсора на треугольник либо при нажатии на заголовок поля.

2. Всплывающая подсказка к другим элементам управления (кнопкам, индикаторам заполненности, изображениям). Подсказка появляется при наведении курсора на элемент управления.

3. Информационная кнопка . Подсказка появляется при наведении курсора на информационную кнопку.

Общий алгоритм добавления всплывающих подсказок к стандартным элементам управления:

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

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

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

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

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

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

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

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

  • Название (Name) — "OpenPrimaryContactButtonCaption";
  • Значение (Value) — "Основной контакт" ("Primary Contact").

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

  • isAccountPrimaryContactSet() — проверяет, заполнено ли поле Основной контакт страницы.
  • onOpenPrimaryContactClick() — метод-обработчик нажатия кнопки. Выполняет переход на страницу основного контакта.

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

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

AccountSectionV2.js
    define("AccountSectionV2", [], function() {
        return {
            // Название схемы объекта раздела.
            entitySchemaName: "Account",
            // Методы модели представления раздела.
            methods: {
                // Метод-обработчик нажатия кнопки.
                onOpenPrimaryContactClick: function() {
                    // Получение идентификатора выбранной записи.
                    var activeRow = this.get("ActiveRow");
                    if (!activeRow) {
                        return;
                    }
                    // Определение идентификатора основного контакта.
                    var primaryId = this.get("GridData").get(activeRow).get("PrimaryContact").value;
                    if (!primaryId) {
                        return;
                    }
                    // Формирование строки адреса.
                    var requestUrl = "CardModuleV2/ContactPageV2/edit/" + primaryId;
                    // Публикация сообщения о пополнении истории навигации по страницам
                    // и переход на страницу основного контакта.
                    this.sandbox.publish("PushHistoryState", {
                        hash: requestUrl
                    });
                },
                // Проверяет, заполнено ли поле [Основной контакт] выбранного элемента.
                isAccountPrimaryContactSet: function() {
                    var activeRow = this.get("ActiveRow");
                    if (!activeRow) {
                        return false;
                    }
                    var pc = this.get("GridData").get(activeRow).get("PrimaryContact");
                    return (pc || pc !== "") ? true : false;
                }
            },
            //Отображение кнопки в разделе.
            diff: /**SCHEMA_DIFF*/[
                // Метаданные для добавления в раздел пользовательской кнопки.
                {
                    // Выполняется операция добавления компонента на страницу.
                    "operation": "insert",
                    // Мета-имя родительского контейнера, в который добавляется кнопка.
                    "parentName": "ActionButtonsContainer",
                    // Кнопка добавляется в коллекцию компонентов
                    // родительского элемента.
                    "propertyName": "items",
                    // Мета-имя добавляемой кнопки.
                    "name": "MainContactSectionButton",
                    // Свойства, передаваемые в конструктор компонента.
                    "values": {
                        // Тип добавляемого компонента — кнопка.
                        itemType: Terrasoft.ViewItemType.BUTTON,
                        // Привязка заголовка кнопки к локализуемой строке схемы.
                        caption: { bindTo: "Resources.Strings.OpenPrimaryContactButtonCaption" },
                        // Привязка метода-обработчика нажатия кнопки.
                        click: { bindTo: "onOpenPrimaryContactClick" },
                        // Привязка свойства доступности кнопки.
                        enabled: { bindTo: "isAccountPrimaryContactSet" },
                        // Настройка расположения кнопки.
                        "layout": {
                            "column": 1,
                            "row": 6,
                            "colSpan": 1
                        }
                    }
                }
            ]/**SCHEMA_DIFF*/
        };
    });

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

После сохранения схемы и обновления страницы приложения с очисткой кэша в разделе Контрагенты (Accounts) появится кнопка Основной контакт (Primary Contact). Кнопка активируется после выбора контрагента, у которого указан основной контакт.

Добавить кнопку в совмещенном режиме
Сложный

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

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

Исходный код 

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

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

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

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

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

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

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

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

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

  • Название (Name) — "OpenPrimaryContactButtonCaption";
  • Значение (Value) — "Основной контакт" ("Primary Contact").
Рис. 3. — Свойства пользовательской локализуемой строки

3. Добавить атрибут доступности кнопки 

В коллекцию атрибутов схемы модели представления раздела добавьте атрибут ButtonEnabled типа Terrasoft.DataValueType.BOOLEAN, сохраняющий состояние доступности кнопки.

4. В коллекцию методов модели представления раздела добавить реализацию методов 

  • onOpenPrimaryContactClick() — выполняет переход на страницу основного контакта.
  • onCardRendered() — выполняется после отрисовки страницы контрагента в совмещенном режиме. Используется для подписки на события загрузки данных в реестр и событие изменения активной записи реестра.
  • isPrimaryContactExist() — определяет наличие основного контакта для активной записи реестра.
  • setButtonEnabled() — устанавливает значение атрибута ButtonEnabled в зависимости от того, определен ли основной контакт контрагента.

5. Добавить кнопку на страницу записи в совмещенном режиме 

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

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

define("AccountSectionV2", [], function() {
    return {
        // Название схемы объекта раздела.
        entitySchemaName: "Account",
        attributes: {
            // Атрибут для хранения состояния доступности кнопки.
            "ButtonEnabled": {
                "dataValueType": Terrasoft.DataValueType.BOOLEAN,
                "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                "value": false
            }
        },
        // Методы модели представления раздела.
        methods: {
            // Метод-обработчик нажатия кнопки.
            onOpenPrimaryContactClick: function() {
                // Определение активной записи вертикального реестра.
                var activeRow = this.get("ActiveRow");
                if (activeRow) {
                    // Определение идентификатора основного контакта.
                    var primaryId = this.get("GridData").get(activeRow).get("PrimaryContact").value;
                    if (primaryId) {
                        // Формирование строки адреса.
                        var requestUrl = "CardModuleV2/ContactPageV2/edit/" + primaryId;
                        // Публикация сообщения о пополнении истории навигации по страницам
                // и переход на страницу основного контакта.
                        this.sandbox.publish("PushHistoryState", {
                            hash: requestUrl
                        });
                    }
                }
            },
            // Выполняется после отрисовки страницы контрагента.
            onCardRendered: function() {
                this.callParent();
                // Данные реестра.
                var gridData = this.get("GridData");
                var activeRow = this.get("ActiveRow");
                if (activeRow)
                {
                    this.setButtonEnabled(activeRow, this);
                }
                // После закрытия страницы основного контакта теряется активная запись. Ее нужно восстановить
                // и для нее проверить наличие основного контакта.
                else {
                    var historyState = this.sandbox.publish("GetHistoryState");
                    var hash = historyState.hash;
                    if (hash && hash.valuePairs)
                    {
                        activeRow = hash.valuePairs[0].name;
                        // Восстановление активной записи.
                        this.set("ActiveRow", activeRow);
                        // Сохранение контекста в локальную переменную.
                        var self = this;
                        // Подписка на событие полной загрузки данных в вертикальный реестр.
                        gridData.on("dataloaded", function() {
                            self.setButtonEnabled(activeRow, self);
                        });
                    }
                }
                // Подписка на событие изменения активной записи реестра.
                gridData.on("itemchanged", function() {
                    this.setButtonEnabled(activeRow, this);
                }, this);
            },
            // Определяет наличие основного контакта для активной записи реестра.
            isPrimaryContactExist: function(id) {
                var pc = this.get("GridData").get(id).get("PrimaryContact");
                return (pc || pc !== "") ? true : false;
            },
            // Устанавливает значение атрибута ButtonEnabled в зависимости от того, определен ли основной контакт.
            setButtonEnabled: function(activeRow, context) {
                if (context.isPrimaryContactExist(activeRow)) {
                    context.set("ButtonEnabled", true);
                }
                else {
                    context.set("ButtonEnabled", false);
                }
            }
        },
        //Настройка визуализации кнопки на странице записи.
        diff: [
            // Метаданные для добавления на страницу пользовательской кнопки.
            {
                // Выполняется операция добавления элемента на страницу.
                "operation": "insert",
                // Мета-имя родительского контейнера, в который добавляется кнопка.
                "parentName": "CombinedModeActionButtonsCardLeftContainer",
                // Кнопка добавляется в коллекцию компонентов
                // родительского элемента.
                "propertyName": "items",
                // Мета-имя добавляемой кнопки.
                "name": "MainContactButton",
                // Свойства, передаваемые в конструктор компонента.
                "values": {
                    // Тип добавляемого элемента — кнопка.
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    // Привязка заголовка кнопки к локализуемой строке схемы.
                    "caption": {bindTo: "Resources.Strings.OpenPrimaryContactButtonCaption"},
                    // Привязка метода-обработчика нажатия кнопки.
                    "click": {bindTo: "onOpenPrimaryContactClick"},
                    // Стиль отображения кнопки.
                    "style": Terrasoft.controls.ButtonEnums.style.GREEN,
                    // Привязка свойства доступности кнопки.
                    "enabled": {bindTo: "ButtonEnabled"}
                }
            }
        ]
    };
});

После сохранения схемы и обновления страницы приложения, на странице контрагента появится кнопка Основной контакт (Primary contact) (рис. 4). При этом, если основной контакт не указан, кнопка будет неактивна (рис. 5).

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

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

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

Важно.

По умолчанию для добавления нового контрагента используется миникарточка. Чтобы для добавления контрагента использовать страницу добавления, необходимо установить значение false в поле Значение по умолчанию системной настройки Использовать миникарточку добавления контрагента (HasAccountMiniPageAddMode). Для того, чтобы изменение системной настройки вступило в силу, следует выполнить выход и вход пользователя.

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

На заметку.

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

Исходный код 

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

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

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

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

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

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

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

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

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

  • Название (Name) — "OpenPrimaryContactButtonCaption";
  • Значение (Value) — "Основной контакт" ("Primary Contact”).
Рис. 3. — Свойства пользовательской локализуемой строки

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

  • isAccountPrimaryContactSet() — проверяет, заполнено ли поле Основной контакт страницы.
  • onOpenPrimaryContactClick() — метод-обработчик нажатия кнопки, который выполняет переход на страницу основного контакта.

4. Добавить кнопку на страницу записи 

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

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

define("AccountPageV2", [], function() {
    return {
        // Название схемы объекта страницы записи.
        entitySchemaName: "Account",
        // Методы модели представления страницы записи.
        methods: {
            // Проверяет, заполнено ли поле [Основной контакт] страницы.
            isAccountPrimaryContactSet: function() {
                return this.get("PrimaryContact") ? true : false;
            },
            // Метод-обработчик нажатия кнопки.
            onOpenPrimaryContactClick: function() {
                var primaryContactObject = this.get("PrimaryContact");
                if (primaryContactObject) {
                    // Определение идентификатора основного контакта.
                    var primaryContactId = primaryContactObject.value;
                    // Формирование строки адреса.
                    var requestUrl = "CardModuleV2/ContactPageV2/edit/" + primaryContactId;
                    // Публикация сообщения и переход на страницу основного контакта.
                    this.sandbox.publish("PushHistoryState", {
                        hash: requestUrl
                    });
                }
            }
        },
        //Отображение кнопки на странице записи.
        diff: [
            // Метаданные для добавления на страницу пользовательской кнопки.
            {
                // Выполняется операция добавления компонента на страницу.
                "operation": "insert",
                // Мета-имя родительского контейнера, в который добавляется кнопка.
                "parentName": "LeftContainer",
                // Кнопка добавляется в коллекцию компонентов
                // родительского элемента.
                "propertyName": "items",
                // Мета-имя добавляемой кнопки.
                "name": "PrimaryContactButton",
                // Свойства, передаваемые в конструктор компонента.
                "values": {
                    // Тип добавляемого элемента — кнопка.
                    itemType: Terrasoft.ViewItemType.BUTTON,
                    // Привязка заголовка кнопки к локализуемой строке схемы.
                    caption: {bindTo: "Resources.Strings.OpenPrimaryContactButtonCaption"},
                    // Привязка метода-обработчика нажатия кнопки.
                    click: {bindTo: "onOpenPrimaryContactClick"},
                    // Привязка свойства доступности кнопки.
                    enabled: {bindTo: "isAccountPrimaryContactSet"},
                    // Стиль отображения кнопки.
                    "style": Terrasoft.controls.ButtonEnums.style.BLUE
                }
            }
        ]
    };
});

После сохранения схемы и обновления страницы приложения, на странице создания нового контрагента появится кнопка Основной контакт (Primary contact), которая будет активизироваться после заполнения у контрагента поля Основной контакт (Primary contact) (рис. 4).

Рис. 4. — Демонстрация результата выполнения примера
Добавить кнопку выбора цвета
Средний

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

Добавить на страницу продукта кнопку выбора цвета.

Исходный код 

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

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

1. Создать схему замещающего объекта "Продукт" и добавить в него колонку UsrColor 

Создайте схему замещающего объекта Продукт (Product) (рис. 2). Процесс создания схему замещающего объекта описан в статье "Cоздать схему объекта".

Рис. 2. — Свойства схему замещающего объекта

Создайте новую колонку (рис. 3) и укажите для нее следующие свойства (рис. 4):

  • Заголовок (Title) — "Цвет" ("Color");
  • Название (Name) — "UsrColor";
  • Тип данных (Data type) — "Строка (50 символов)" ("Text (50 characters)").
Рис. 3. — Добавление новой колонки
Рис. 4. — Свойства добавленной колонки

После установки всех свойств сохраните и опубликуйте схему объекта.

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

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

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

Исходный код замещающей схемы:

define("ProductPageV2", [], function() {
    return {
        // Название схемы объекта страницы записи.
        entitySchemaName: "Product",
        diff: /**SCHEMA_DIFF*/[
            // Кнопка выбора цвета.
            {
                // Операция добавления.
                "operation": "insert",
                // Мета-имя родительского контейнера, в который добавляется компонент.
                "parentName": "ProductGeneralInfoBlock",
                // Кнопка добавляется в коллекцию компонентов
                // родительского контейнера.
                "propertyName": "items",
                // Мета-имя компонента схемы, над которым производится действие.
                "name": "ColorButton",
                // Свойства, передаваемые в конструктор компонента.
                "values": {
                    // Тип элемента — кнопка выбора цвета.
                    "itemType": this.Terrasoft.ViewItemType.COLOR_BUTTON,
                    // Привязка значения элемента управления к колонке модели представления.
                    "value": { "bindTo": "UsrColor" },
                    // Расположение кнопки.
                    "layout": { "column": 5, "row": 6, "colSpan": 12 }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

После сохранения схемы и обновления страницы приложения на странице продукта появится кнопка выбора цвета (рис. 6).

Рис. 6. — Результат выполнения примера
Добавить к кнопке всплывающую подсказку
Сложный

Исходный код 

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

Пример 1 

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

Добавить подсказку к кнопке Сохранить (Save) страницы контакта.

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

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

В пользовательском пакете создайте схему замещающей модели представления, в котором в качестве родительского объекта укажите Схема отображения карточки контакта (Display schema — Contact card, ContactPageV2) (рис. 1). Процесс создания схемы замещающей модели представления описан в статье "Cоздать клиентскую схему".

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

2. Добавить локализуемую строку с текстом подсказки 

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

  • [Название] ([Name]) — "SaveButtonHint";
  • [Значение] ([Value]) — "Нажмите, чтобы сохранить изменения" ("Press to save changes").
Рис. 2. — Свойства пользовательской локализуемой строки

3. Добавить в массив diff конфигурационный объект кнопки 

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

Способ 1

Добавьте в свойство values элемента управления свойство hint, которое, в свою очередь, должно содержать текст всплывающей подсказки.

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

define("ContactPageV2", [],
function () {
    return {
        // Название схемы объекта страницы записи.
        entitySchemaName: "Contact",
        //Настройка визуализации всплывающей подсказки.
        diff: /**SCHEMA_DIFF*/[
            // Метаданные для добавления к кнопке всплывающей подсказки.
            {
                // Выполняется операция изменения существующего элемента.
                "operation": "merge",
                "parentName": "LeftContainer",
                "propertyName": "items",
                "name": "SaveButton",
                "values": {
                    // Всплывающая подсказка для кнопки.
                    "hint": { "bindTo": "Resources.Strings.SaveButtonHint" } 
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});
Способ 2

Добавьте в свойство values элемента управления массив tips. Затем, используя операцию insert, добавьте в массив tips конфигурационный объект подсказки. В свойстве values этого объекта обязательно укажите свойство content — текст всплывающей подсказки. При таком способе можно более индивидуально настроить всплывающую подсказку — изменить стиль отображения, привязать видимость подсказки к какому-либо событию модели представления, добавить элементы управления и т.д.

Важно.

Указанный способ работает для itemType:

  • Terrasoft.ViewItemType.BUTTON,
  • Terrasoft.ViewItemType.LABEL,
  • Terrasoft.ViewItemType.COLOR_BUTTON,
  • Terrasoft.ViewItemType.HYPERLINK,
  • Terrasoft.ViewItemType.INFORMATION_BUTTON,
  • для элементов, у которых указано свойство generator.

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

define("ContactPageV2", [],
function () {
    return {
        // Название схемы объекта страницы записи.
        entitySchemaName: "Contact",
        //Настройка визуализации всплывающей подсказки.
        diff: /**SCHEMA_DIFF*/[
            // Метаданные для добавления к кнопке всплывающей подсказки.
            {
                // Выполняется операция изменения существующего элемента.
                "operation": "merge",
                "parentName": "LeftContainer",
                "propertyName": "items",
                "name": "SaveButton",
                "values": {
                    // Массив подсказок для кнопки.
                    "tips": [] 
                }
            },
            // Конфигурационный объект простой подсказки.
            {
                // Выполняется операция добавления нового элемента.
                "operation": "insert",
                "parentName": "SaveButton",
                "propertyName": "tips",
                "name": "CustomShowedTip",
                "values": {
                    // Текст подсказки.
                    "content": {"bindTo": "Resources.Strings.SaveButtonHint"}
                    // Здесь можно дополнительно настроить другие параметры отображения и 
                    // работы всплывающей подсказки.
                }
            },
        ]/**SCHEMA_DIFF*/
    };
});

После сохранения схемы на странице контакта у кнопки Сохранить (Save) появиться всплывающая подсказка (рис. 3).

Рис. 3. — Демонстрация результата

Пример 2 

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

Добавить подсказку к полю Тип страницы контакта.

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

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

В пользовательском пакете создайте схему замещающей модели представления, в которой в качестве родительского объекта укажите Схема отображения карточки контакта (Display schema — Contact card, ContactPageV2) (рис. 1).

2. Добавить локализуемую строку с текстом подсказки 

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

  • [Название] ([Name]) — "TypeTipContent";
  • [Значение] ([Value]) — "Выберите тип контакта из списка" ("Choose the type of contact from the list").
Рис. 4. — Свойства пользовательской локализуемой строки

3. Добавить в массив diff конфигурационный объект поля 

Для добавления к полю всплывающей подсказки добавьте в свойство values поля свойство tip, которое, в свою очередь, должно содержать свойство content. Значение свойства content будет являться текстом всплывающей подсказки.

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

define("ContactPageV2", [],
function () {
    return {
        // Название схемы объекта страницы записи.
        entitySchemaName: "Contact",
        //Настройка визуализации всплывающей подсказки.
        diff: /**SCHEMA_DIFF*/[
            // Метаданные для добавления к полю всплывающей подсказки.
            {
                // Выполняется операция изменения существующего элемента.
                "operation": "merge",
                "name": "Type",
                "parentName": "ContactGeneralInfoBlock",
                "propertyName": "items",
                "values": {
                    // Свойство поля, отвечающее за отображение подсказки.
                    "tip": {
                        // Текст подсказки.
                        "content": { "bindTo": "Resources.Strings.TypeTipContent" },
                        // Режим отображения подсказки.
                        // По умолчанию режим WIDE - толщина зеленой полоски, 
                        // которая отображается в подсказке.
                        "displayMode": Terrasoft.controls.TipEnums.displayMode.WIDE
                    }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

После сохранения схемы на странице контакта поле Тип (Type) будет отображаться со всплывающей подсказкой (рис. 5).

Рис. 5. — Демонстрация результата

Пример 3 

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

Добавить информационную кнопку к полю ФИО (Full name) страницы контакта.

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

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

В пользовательском пакете создайте схему замещающей модели представления, в которой в качестве родительского объекта укажите Схема отображения карточки контакта (Display schema — Contact card, ContactPageV2) (рис. 1).

2. Добавить локализуемую строку с текстом подсказки 

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

  • [Название] ([Name]) — "InfoButtonCaption";
  • [Значение] ([Value]) — "Это обязательное поле" ("This is obligatory field").
Рис. 6. — Свойства пользовательской локализуемой строки

3. Добавить в массив diff конфигурационный объект кнопки 

Добавьте в массив diff новый элемент с типом Terrasoft.ViewItemType.INFORMATION_BUTTON и свойством content. Значение свойства content является текстом всплывающей подсказки.

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

define("ContactPageV2", [],
function () {
    return {
        // Название схемы объекта страницы записи.
        entitySchemaName: "Contact",
        //Настройка визуализации всплывающей подсказки.
        diff: /**SCHEMA_DIFF*/[
            // Метаданные для добавления к кнопке всплывающей подсказки.
            {
                // Выполняется операция изменения существующего элемента.
                "operation": "merge",
                "parentName": "ProfileContainer",
                "propertyName": "items",
                "name": "AccountName",
                "values": {
                    "layout": { "column": 0, "row": 1, "colSpan": 22, "rowSpan": 1 }
                }
            },
            {
                // Выполняется операция добавления нового элемента.
                "operation": "insert",
                "parentName": "ProfileContainer",
                "propertyName": "items",
                "name": "SimpleInfoButton",
                "values": {
                    "layout": { "column": 22, "row": 1, "colSpan": 1, "rowSpan": 1 },
                    "itemType": Terrasoft.ViewItemType.INFORMATION_BUTTON,
                    "content": { "bindTo": "Resources.Strings.InfoButtonCaption" }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

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

Рис. 7. — Демонстрация результата

Пример 4. Добавление во всплывающую подсказку ссылки на веб-ресурс 

В подсказки можно добавлять ссылки на веб-ресурсы или контекстную справку. Для этого добавьте html-код ссылки непосредственно в локализуемую строку текста подсказки (рис. 8).

Рис. 8. — Пример определения всплывающей подсказки со ссылкой

Пример добавления прямой ссылки на веб-ресурс:

<a href="http://academy.terrasoft.ua/" target="_blank">Узнать больше</a>

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

Рис. 9. — Пример отображения всплывающей подсказки со ссылкой
Свойство diff объекта кнопки
Легкий

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

Свойства 

operation

Тип операции с элементом управления (insert, move, remove, merge, set). Задается строкой с названием соответствующей операции. Для добавления нового элемента управления указывается значение insert.

parentName

Мета-имя родительского элемента управления, в который помещается пользовательский элемент. Если это функциональная кнопка, то в качестве родительских контейнеров могут выступать LeftContainer и RightContainer.

propertyName

Для пользовательского элемента управления указывается значение items.

name

Мета-имя добавляемого элемента управления.

values

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

Свойства конфигурационного объекта
itemType Тип элемента. Задается значением перечисления Terrasoft.ViewItemType. Для кнопки используется значение BUTTON.
caption Заголовок кнопки. Рекомендуется задавать значения заголовков через привязку к локализируемой строке схемы.
click Привязка метода-обработчика кнопки.
layout Объект настроек расположения элемента управления в сетке.
enabled Регулирует доступность (активность) кнопки.
visible Регулирует видимость кнопки.
style Стиль компонента. Свойство должно содержать значение перечисления Terrasoft.controls.ButtonEnums.style.
Возможные значения (Terrasoft.controls.ButtonEnums.style)
DEFAULT

Стиль по умолчанию.

GREEN

Цвет кнопки — зеленый.

RED

Цвет кнопки — красный.

BLUE

Цвет кнопки — синий.

GREY

Прозрачная кнопка. Значение оставлено из предыдущих версий Creatio.

TRANSPARENT

Прозрачная кнопка.