Документация

Документация по разработке bpm’online
PDF
Документация по разработке
Разработка в bpm'online на примерах
Конфигурирование страницы
Как добавить кнопку на страницу редактирования в совмещенном режиме

Glossary Item Box

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

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

Исходный код

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

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

1. Создать замещающую схему раздела [Контрагенты]

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

Рис. 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. — Результат выполнения примера. Основной контакт не указан — кнопка неактивна

Смотрите также:

© Terrasoft 2002-2019.

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

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