Рассмотрим добавление одного из элементов управления, которые предоставляет bpm'online — кнопки выбора цвета (рис. 1).

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

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

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

Рассмотрим пример добавления кнопки выбора цвета на страницу продукта.

Алгоритм реализации кейса

1. Создать замещающий объект "Продукт" и добавить в него колонку [Color]

Подробно создание замещающего объекта и добавление колонок описано в статье "Добавление нового поля". Свойства замещающего объекта отображены на рисунке 2, а свойства колонки — на рисунке 3.

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

Рис. 3. — Свойства добавленной колонки

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

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

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

Исходный код схемы страницы редактирования: 

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*/
    };
});

После сохранения схемы и обновления веб-страницы с очисткой кэша системы на странице редактирования продукта появится кнопка выбора цвета (рис. 5).

Рис. 5. — Результат выполнения кейса