Публикация

Как реализовать Progress Bar на странице списка (секции)

Вопрос

Нам необходимо в некотором роде дублировать функционал progress bar из раздела Лиды. Какими характеристиками должен обладать lookup в разделе помимо наличия колонки с номером, чтобы при отображении в реестре(List View) к нему применился прогресс бар модуль?

Интересует применение данного функционала для объекта Аккаунт, по аналогии с объектом Лид и полем Lead stage.

Ответ

Для реализации функционала progress bar на странице списка необходимо:

1) Чтобы поле справочного типа, которое Вы ходите выводить как progress bar, обладало доп. колонкой UsrStageNumber, которая собственно и будет определять стадию прогресса.

2) Реализовать необходимые методы и зависимости по аналогии с LeadSectionV2 для AccountSectionV2.

3) Если стадий у вас не 5, то написать свой элемент управления, с другим количеством стадий по аналогии с BaseProgressBarModule и использовать его в AccountSectionV2.

Создан справочник UsrAccStage с колонкой UsrStageNumber, и выведен в одноименную колонку в Account.

Код замещающей схемы страницы секции контрагента:

define("AccountSectionV2", ["AccountSectionV2Resources", "terrasoft", "ControlGridModule", "BaseProgressBarModule",
        "EntityHelper", "css!BaseProgressBarModule"], function(resources, Terrasoft) {
        return {
            entitySchemaName: "Account",
            diff: /**SCHEMA_DIFF*/[
                {
                    "operation": "remove",
                    "name": "DataGrid"
                },
                {
                    "operation": "insert",
                    "name": "DataGrid",
                    "parentName": "DataGridContainer",
                    "propertyName": "items",
                    "values": {
                        "itemType": Terrasoft.ViewItemType.GRID,
                        "type": {"bindTo": "GridType"},
                        "listedZebra": true,
                        "activeRow": {"bindTo": "ActiveRow"},
                        "collection": {"bindTo": "GridData"},
                        "isEmpty": {"bindTo": "IsGridEmpty"},
                        "isLoading": {"bindTo": "IsGridLoading"},
                        "multiSelect": {"bindTo": "MultiSelect"},
                        "primaryColumnName": "Id",
                        "selectedRows": {"bindTo": "SelectedRows"},
                        "sortColumn": {"bindTo": "sortColumn"},
                        "sortColumnDirection": {"bindTo": "GridSortDirection"},
                        "sortColumnIndex": {"bindTo": "SortColumnIndex"},
                        "selectRow": {"bindTo": "rowSelected"},
                        "linkClick": {"bindTo": "linkClicked"},
                        "needLoadData": {"bindTo": "needLoadData"},
                        "activeRowAction": {"bindTo": "onActiveRowAction"},
                        "activeRowActions": [],
                        "className": "Terrasoft.ControlGrid",
                        "controlColumnName": "UsrAccStage",
                        "applyControlConfig": {"bindTo": "applyControlConfig"},
                        "getEmptyMessageConfig": {"bindTo": "prepareEmptyGridMessageConfig"}
                    }
                }
            ]/**SCHEMA_DIFF*/,
            methods: {
                getGridDataColumns: function() {
                    var gridDataColumns = this.callParent(arguments);
                    gridDataColumns.UsrAccStage = gridDataColumns.UsrAccStage || {path: "UsrAccStage"};
                    gridDataColumns["UsrAccStage.UsrStageNumber"] =
                        gridDataColumns["UsrAccStage.UsrStageNumber"] || {path: "UsrAccStage.UsrStageNumber"};
                    return gridDataColumns;
                },
                applyControlConfig: function(control) {
                    control.config = {
                        className: "Terrasoft.BaseProgressBar",
                        value: {
                            "bindTo": "UsrAccStage",
                            "bindConfig": {"converter": "getUsrAccStageValue"}
                        },
                        width: "158px"
                    };
                },
                getUsrAccStage: function(id) {
                    var activeRow;
                    if (id) {
                        var gridData = this.getGridData();
                        activeRow = gridData.get(id);
                    } else {
                        activeRow = this.getActiveRow();
                    }
                    if (!activeRow) {
                        return null;
                    }
                    var accStage = activeRow.get("UsrAccStage");
                    return (accStage) ? accStage.value : null;
                },
                addColumnLink: function(item) {
                    item.getUsrAccStageValue = function(accStage) {
                        if (!accStage) {
                            return null;
                        } else {
                            return {
                                value: this.get("UsrAccStage.UsrStageNumber"),
                                displayValue: accStage.displayValue
                            };
                        }
                    };
                    return this.callParent(arguments);
                }
            }
        };
    }
);

Как результат для записей, где стадия заполнена, в соответствующей колонке отображается progress bar:

Нравится

Поделиться

8 комментариев

Добрый день! Подскажите, пожалуйста, как сделать так, чтобы цвет тянулся с цвета стадии в кейсе?

Добрый день, Константин

 

Можно воспользоваться решением из marketplace, цвет будет использоваться с цвета стадии в кейсе - https://marketplace.creatio.com/app/case-stage-color-coding-creatio

 

С уважением, 

Игорь

Ihor Skohariev,

Спасибо, Игорь! Но именно интересует подкраска progress bar. Может есть какой-то вариант для этого? Или может можно как-то в самом файле элемента progress bar прописать коды нужных цветов? Подскажите, пожалуйста.

Сам цвет прогресс бара реализован в стиле модуля BaseProgressBarModule, конкретно в этом месте:

.ts-progress-bar-item-active {
	background: #f8c065;
}

Вы можете переписать этот элемент со своим необходимым цветом. 

Однако, тут встает вопрос, как получить цвет необходимой стадии. Рекомендую обратить внимание на код указанного выше дополнения из маркетплейса и как там это реализованно.

Дима Вовченко,

 

Благодарю!

Добрый день, коллеги! После использования кода замещения схемы пропало отображение кнопок "Открыть", "Копировать", "Удалить", которые появляются при выделении мышкой. Подскажите, пожалуйста, что необходимо подправить в коде, чтоб они появились обратно?

Константин,

 

Добрый вечер,

 

В коде Вам необходимо:

 

1) Удалить remove грида:

{
                    "operation": "remove",
                    "name": "DataGrid"
                },

2) "operation": "insert" заменить на "operation": "merge"

3) удалить из DataGrid свойство "activeRowActions": [],

 

В итоге код в diff должен стать таким:

{
                    "operation": "merge",
                    "name": "DataGrid",
                    "parentName": "DataGridContainer",
                    "propertyName": "items",
                    "values": {
                        "itemType": Terrasoft.ViewItemType.GRID,
                        "type": {"bindTo": "GridType"},
                        "listedZebra": true,
                        "activeRow": {"bindTo": "ActiveRow"},
                        "collection": {"bindTo": "GridData"},
                        "isEmpty": {"bindTo": "IsGridEmpty"},
                        "isLoading": {"bindTo": "IsGridLoading"},
                        "multiSelect": {"bindTo": "MultiSelect"},
                        "primaryColumnName": "Id",
                        "selectedRows": {"bindTo": "SelectedRows"},
                        "sortColumn": {"bindTo": "sortColumn"},
                        "sortColumnDirection": {"bindTo": "GridSortDirection"},
                        "sortColumnIndex": {"bindTo": "SortColumnIndex"},
                        "selectRow": {"bindTo": "rowSelected"},
                        "linkClick": {"bindTo": "linkClicked"},
                        "needLoadData": {"bindTo": "needLoadData"},
                        "activeRowAction": {"bindTo": "onActiveRowAction"},
                        "className": "Terrasoft.ControlGrid",
                        "controlColumnName": "Status",
                        "applyControlConfig": {"bindTo": "applyControlConfig"},
                        "getEmptyMessageConfig": {"bindTo": "prepareEmptyGridMessageConfig"}
                    }
                }

После обновления страницы все будет работать.

Oleg Drobina,

Олег, спасибо вам большое за помощь!

Показать все комментарии