Переопределение сервиса отрисовки элемента "Ход согласования"

Элемент управления Ход согласования представляет собой таблицу, в которой отображаются события заданий согласования (выполнение, делегирование и др.).

Программист может переопределить функцию отрисовки всей таблицы и отдельных элементов: заголовков и ячеек определённых столбцов. Для этого нужно передать в поле stageRenderer класса элемента управления Ход согласования (тип AgreementHistory) сервис с интерфейсом IAgreementHistoryStageRenderer:

interface IAgreementHistoryStageRenderer {
    renderStageTable?(props: IApprovalCycleInfoProps): React.ReactNode;
    renderStageHeaderCells?(): React.ReactNode;
    renderApproverCell?(stageItemProps: IApprovalStageItemRowProps): React.ReactNode;
    renderDecisionCell?(stageItemProps: IApprovalStageItemRowProps): React.ReactNode;
    renderDateCell?(stageItemProps: IApprovalStageItemRowProps): React.ReactNode;
    renderCommentCell?(stageItemProps: IApprovalStageItemRowProps): React.ReactNode;
    renderCorrectionsCell?(stageItemProps: IApprovalStageItemRowProps): React.ReactNode;
}

Интерфейс IAgreementHistoryStageRenderer определяет функции, обеспечивающие отрисовку определённых элементов таблицы Ход согласования:

  • renderStageTable — отрисовка всей таблицы.

  • renderStageHeaderCells — отрисовка заголовков таблицы.

  • renderApproverCell — отрисовка ячеек столбца Согласующий.

  • renderDecisionCell — отрисовка ячеек столбца Решение.

  • renderDateCell — отрисовка ячеек столбца Дата.

  • renderCommentCell — отрисовка ячеек столбца Комментарий.

  • renderCorrectionsCell — отрисовка ячеек столбца Правки.

При реализации объекта IAgreementHistoryStageRenderer могут быть переопределены все или только требуемые функции интерфейса.

Ниже приведён пример реализации компонента, который переопределяет функцию отрисовки ячеек столбца Комментарий: ставит -, если комментария не было, и текст комментария — если был. Компонент реализуется в виде стандартного клиентского расширения.

Компонент включает две составляющие:

  • Сервис, который будет передан в stageRenderer.

  • Метод, который будет вызываться при открытии вкладки Ход согласования карточки ДокументУД/Исходящий, и передавать сервис в stageRenderer.

Ниже приведено содержимое файла EventHandlers.tsx (стандартное название основного файла клиентского расширения, создаваемого из шаблона).

import { IAgreementHistoryStageRenderer } from "@Docsvision/webclient/Approval/$AgreementHistoryStageRenderer";
import { serviceName } from "@Docsvision/webclient/System/ServiceUtils";
import { IApprovalStageItemRowProps } from "@Docsvision/webclient/Approval/IApprovalStageItemRowProps";
import { IEventArgs } from "@{Docsvision/webclient/System/IEventArgs";
import { AgreementHistory } from "@Docsvision/webclient/Approval/AgreementHistory";
import { Tab } from "@Docsvision/webclient/Platform/Tab";
import { $RequestManager } from "@Docsvision/webclient/System/$RequestManager";

import * as React from 'react' (1)

export function loadRender(sender: Tab, e: IEventArgs) { (2)

    if(sender.params.activeTabPage.key == "agreementHistoryTabPage"){ (3)

        let agreementHistory = sender.layout.controls.get<AgreementHistory>("agreementHistory"); (4)

        agreementHistory.params.stageRenderer = sender.layout.getService($AgreementHistoryRenderService); (5)
    }
}

export class AgreementHistoryRenderService implements IAgreementHistoryStageRenderer { (6)
    constructor(private services: $RequestManager) {
    }

    renderCommentCell(stageItemProps: IApprovalStageItemRowProps): React.ReactNode{ (7)

            if (!stageItemProps.stageItem.hasComment){
                return (
                <td key="comment"> - </td> (8)
                )
            }

            return (
            <td key="comment">{stageItemProps.stageItem.comment}</td> (9)
            )
    }
}

export type $AgreementHistoryRenderService = { renderService: AgreementHistoryRenderService };
export const $AgreementHistoryRenderService = serviceName((s: $AgreementHistoryRenderService) => s.renderService); (10)
1 Импорт зависимостей.
2 Определяется функция, которая будет вызываться при открытии страниц элемента "Вкладки".
3 Следующий код применяется только для страницы с названием agreementHistoryTabPage.
4 Получение элемента управления Ход согласования.
5 Передача сервиса отрисовки.
6 Реализация сервиса отрисовки, наследуемого от IAgreementHistoryStageRenderer.
7 Переопределяется метод отрисовки ячеек столбца "Комментарий".
8 Если комментария нет, пишется -.
9 Если комментарий есть, пишется его текст.
10 Экспорт сервиса AgreementHistoryRenderService.
Инструкция по разработке и регистрации клиентских сервисов приведена в пункте Разработка расширения с клиентским сервисом.
В файле Index.ts нужно добавить регистрацию сервиса $AgreementHistoryRenderService.
import * as EventHandlers from "./EventHandlers";
import { $AgreementHistoryRenderService, AgreementHistoryRenderService } from "./EventHandlers";
import { Service } from "@Docsvision/webclient/System/Service";
import { $RequestManager } from "@Docsvision/webclient/System/$RequestManager";
import { extensionManager } from "@Docsvision/webclient/System/ExtensionManager";

extensionManager.registerExtension({
    name: "Template web extension",
    version: "5.5.15",
    globalEventHandlers: [ EventHandlers ],
    layoutServices: [
        Service.fromFactory($AgreementHistoryRenderService, (services: $RequestManager) => new AgreementHistoryRenderService(services))
    ]
})

После загрузки клиентского расширения на сервер Web-клиента нужно указать обработчик для переключения страниц элемента Вкладки карточки Документ:

  1. Откройте программу Конструктор Web-разметок и перейдите к разметке просмотра карточки ДокументУД/Исходящий.

  2. Перейдите к свойствам элемента contentTab.

  3. В событии После переключения активной вкладки укажите обработчик loadRender.

  4. Сохраните изменения и перезапустите IIS (для загрузки скриптов).

Чтобы проверить пример, откройте исходящий документ с согласованием и перейдите на страницу Ход согласования. В столбце Комментарий у событий согласования с комментарием будет указан комментарий, у событий без комментария — знак -.

Чтобы получить другие примеры, включая пример получения списка файлов для отображения столбца Правки, обратитесь к исходному коду элемента управления Ход согласования в каталоге установки Web-клиента: C:\Program Files (x86)Docsvision\WebClient\5.5\Site\Content\App\Approval\Controls\AgreementHistory.