Примеры расширений¶

По умолчанию примеры расширений отключены и не попадают в сборку. Для их включения необходимо открыть src/default/index.ts и убрать комментарий со строчки:

// import './examples/registrator';

Если расширение выполняется в карточке, то его работа демонстрируется на основе тестового типа карточки Автомобиль.

Загрузите из папки Configuration рабочее место, представление и карточку.

Расширения собираются командой:

npm run build

Собранный билд будет лежать в папке wwwroot/extensions.

Для текстовых контролов и автокомплита учитывайте, что данные изменяются при снятии фокуса с контрола (клик в другом месте).

Для работы некоторых примеров расширений нужно добавить тип карточки Автомобиль в карточку настроек Типовое решение и активировать соответствующие настройки:

Чтобы добавить тип карточки в карточку настоек Типовое решение, необходимо перейти в тайл Настройки правой панели, далее Типовое решение. В таблицу блока Типы карточек добавить тип карточки Автомобиль.
Для отображения вкладки Обсуждения, а также для добавления тайла типового процесса отправки задач, в настройках типа карточки Автомобиль необходимо применить следующие настройки:

Note

Для дальнейшей работы с тестовой карточкой, необходимо добавить тип карточки Автомобиль в дефолтное правило доступа.

1_hideBlockByRefValueUIExtension.ts¶

В зависимости от значения ссылочного поля выбранного типа карточки:

Скрываем/показываем элементы управления (блок, контрол).
Делаем рид-онли/редактируемыми элементы управления (контрол).

Example

Для тестовой карточки Автомобиль:

Если поле Цвет не пустое, то блок Дополнительная информация становится видимым, контрол Марка автомобиля скрывается, а контрол Пробег становится только для чтения.
Если поле Цвет пустое, то блок Дополнительная информация скрывается, контрол Марка автомобиля становится видимым, а контрол Пробег становится редактируемым.

2_changeFieldOrRowUIExtension.ts¶

В этом расширении, в зависимости от значения флага выбранного типа карточки:

Меняется содержимое текстового поля.
Меняется содержимое табличной секции (в нее добавляется элемент).

Example

Когда меняют значение флага Базовый цвет в тестовой карточке Автомобиль, то:

Если флаг установлен, то значение поля Цвет меняется на Это базовый цвет, и в таблицу Список Акций добавляется новая строка.
Если флаг не установлен, то значение поля Цвет меняется на Это другой, не базовый цвет.

3_tableSectionChangedUIExtension.ts¶

В этом расширении демонстрируется подписка на изменение элементов табличной секции для выбранного типа карточки:

Example

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

4_hideFormUIExtension.ts¶

Скрывать/показывать вкладку определенной карточки в зависимости:

От наличия какого-то признака в info, пришедшем с сервера.
От значения какого-то справочника, загруженного в init-стриме.
От данных карточки.

Example

Для тестовой карточки Автомобиль скрываем вкладку Сравнение файлов в зависимости от:

От наличия флага __HideForm в info, пришедшем с сервера.
От значения справочника HideCommentForApprove.
От наличия значения в контроле Базовый цвет в тестовой карточке (при наличии значения в данном контроле вкладка Сравнение файлов скрывается).

5_hideTaskBlockUIExtension.ts¶

Скрывать/показывать какой-либо элемент управления задания в зависимости от данных задания для определенного типа карточки.

Example

При использовании типового процесса отправки задач для тестовой карточки Автомобиль на этапе отправки проверяем поле Комментарий на наличие данных:

Если поле Комментарий содержит текст, то скрываем контрол Вернуть на роль.
Если комментария нет, то показываем контрол Вернуть на роль.

6_simpleCardTileExtension.ts¶

Добавлять/cкрывать/показывать тайл в левой панели для выбранных карточек в зависимости:

От типа карточки.
От данных карточки.

Example

Добавляет на левую панель тайл, который по нажатию открывает модальное окно. Добавленный тайл отображается только в карточке типа Автомобиль, и при условии, что значение контрола Пробег, км составляет 100000.

7_simpleViewTileExtension.ts¶

Данное расширение позволяет добавлять/скрывать/показывать тайл в левой панели, при нажатии на который отображаются данные выделенной строки для выбранного представления. Отображение тайла зависит от алиаса представления и идентификатора узла рабочего места.

Example

Добавляет на левую панель тайл, который по нажатию открывает модальное окно с данными выделенной строки представления. Добавленный тайл отображается только для представления Мои документы.

8_requestTileExtension.ts¶

В этом расширении демонстрируется:

Тайл-группа на левой панели.
Запрос карточки с сервера.
Запрос данных представления с сервера.
Заполнение параметров поиска в запросе к представлению.
Доступ к результату запроса представления.

Example

На левую панель добавляет групповой тайл - Запросы. По клику показываются дочерние тайлы - Запрос карточки и Запрос представления.

При клике на Запрос карточки происходит вызов сервера, получается карточка прав, и необработанное содержимое показывается в модальном окне. Аналогично, с помощью CardService можно делать и другие реквесты (request, get, store и т.д.).

При клике на Запрос представления происходит вызов сервера, получаются данные списка контрагентов, имена которых не равны null и необработанное содержимое показывается в модальном окне.

9_additionalTableButtonUIExtension.ts¶

Пример данного расширения определяет следующую логику для выбранного типа карточки:

Логика при нажатии на кнопку на форме с карточкой.
Логика при нажатии произвольной клавиши на активном контроле.

Example

Для карточки типа Автомобиль добавляет дополнительную кнопку справа под контролом Список Акций. При нажатии на кнопку происходит получение данных из выделенной строки и, после, добавляется новая строка в секцию с полученными данными (создается копия выделенной строки). При клике на контрол Марка автомобиля и последующем нажатии на клавишу [Enter] фокус перемещается на контрол Имя водителя.

10_dialogModeAutocompleteUIExtension.ts¶

В web-клиенте есть два вида автокомплитов:

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

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

В этом расширении демонстрируется открытие определённых контролов автокомплита для выбранного типа карточки в режиме диалога.

Example

Проверяем, что значения типа карточки и алиаса контрола те, что нам нужны и если так, то добавляем флаг, который указывает автокомплиту работать в режиме диалога.

Пример работы на тестовой карточке Автомобиль для контрола Имя водителя (без диалога):

Пример работы на тестовой карточке Автомобиль для контрола Имя водителя (с диалогом):

11_customBPTileExtension.ts¶

Добавляет тайл запуска бизнес-процесса в левую боковую панель для определенного типа карточек.

Example

Для карточки Автомобиль добавляет на левую панель тайл Запустить кастомный БП. При нажатии на тайл в Info карточки добавляется ключ .startProcess со значением TestProcess. После, карточка сохраняется и обновляется.

12_fileControlUIExtension.ts¶

Пример расширения для файлового контрола. Расширение фильтрует файлы по категории, которые выводятся в файловом контроле, а также запрещает добавление файла с определенным расширением для определенного типа карточки.

Example

В карточке типа Автомобиль выполняет фильтрацию в файловом контроле Без изображений (всё, кроме категории “Image”) по названию категории: отображает файлы только с категорией Text. Запрещает добавление файлов с разрешением, отличным от .txt, для всех файловых контролов выбранной карточки.

13_hideTileExtension.ts¶

Пример расширения, которое скрывает дефолтный тайл для определенного типа карточки.

Example

Скрывает дефолтный тайл Сохранить из левой панели для тестовой карточки.

14_tableControlDoubleClickUIExtension.ts¶

Подписываемся на двойной клик в контроле таблицы выбранной карточки.

Example

В карточке Автомобиль подписываемся на двойной клик в контроле таблицы Список Акций.

15_showFormDialogUIExtension.ts¶

При клике на контрол кнопки в определенном типе карточки показываем диалог с выбранной формой.

Example

При клике на кнопку Показать диалог в тестовой карточке показываем диалоговое окно Создать несколько карточек.

16_showCustomDialogUIExtension.tsx¶

При клике на контрол кнопки показываем кастомный диалог для выбранного типа карточки.

Example

При клике на кнопку Показать диалог в карточке Автомобиль показываем кастомный диалог, содержащий текстовое поле, а также кнопки ОК и Закрыть. При нажатии на кнопку OK в консоли отображается содержимое текстового поля.

17_closeCardOnCompleteTaskExtension.ts¶

Закрывает карточку выбранного типа после завершения определенного типа задания.

Example

В карточке Автомобиль:

Отправьте задания через тайл на левой панели - Тестовое согласование.
Затем возьмите любое из созданных заданий в работу, выберите один из существующих вариантов. При выборе варианта задание завершится, и карточка закроется.

18_additionalMetaExtension.ts¶

Позволяет получать и использовать данные из MetadataStorage.info, добавленные в мету через ServerInitializationExtension.

Example

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

19_customThemeProp.ts¶

Добавляет дополнительное свойство в темы в расширении ApplicationExtension с последующим использованием для выбранного типа карточки.

Example

Данное расширение добавляет дополнительное свойство MyCustomBackgroundProp в настройки текущей темы, которое, в свою очередь, устанавливается в качестве фона для заголовка контрола Марка автомобиля тестовой карточки.

Пример работы расширения:

20_tabPanelButtonUIExtension.ts¶

Добавляет дополнительную кнопку в панель с вкладками. При нажатии на кнопку открывает виртуальную карточку.

Example

Пример данного расширения добавляет дополнительную кнопку в панель с вкладками, при нажатии на которую открывается виртуальная карточка Мои замещения.

Пример отображения добавленной кнопки в панели с вкладками:

21_forumUIExtension.ts¶

Данное расширение для выбранной карточки добавляет элементы управления:

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

Example

Данное расширение добавляет в верхней панели, а также в контекстном меню текущего обсуждения соответствующие тестовые кнопку и пункт контекстного меню для карточки Автомобиль.

Пример добавленных тестовых кнопки верхней панели и пункта контекстного меню для текущего обсуждения в карточке Автомобиль:

22_serviceClient.ts¶

Пример данного расширения представляет собой клиент для обращения к методам контроллера Tessa.Extensions.Server.Web/Controllers/ServiceController.

23_loginExtension.tsx¶

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

Example

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

24_formUIExtension.ts¶

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

Example

В форму диалога (например, диалоговое окно загрузки Deski) добавляет тестовую кнопку, при нажатии на которую отображается сообщение в диалоговом окне о нажатии кнопки. При закрытии формы диалога, появляется диалоговое окно с сообщением о закрытии формы. Также, изменяет настройки рассматриваемой формы диалога: удаляет кнопку закрытия из правого вехнего угла.

25_gridBasicStylingExtension.tsx¶

Изменяем стили контролов таблиц для определенного типа карточек посредством CSS-классов и свойства style.

Example

Пример данного расширения изменяет стили контрола Список акций посредством добавления СSS-классов для тестовой карточки Автомобиль.

26_gridLayoutStylingExtension.tsx¶

Изменяет вывод данных, поведение, а также подменяет стили контролов таблиц через Шаблоны с помощью React-компонентов для выбранного типа карточки.

Принцип работы: шаблон состоит из шести компонентов: Table, HeaderRow, Block, Row, HeaderCell и Cell. Внутри шаблона все параметры и коллбеки передаются насквозь. Это позволяет компонентам на любом уровне иметь доступ к глобальному состоянию грида и при необходимости подменить отдельные свойства и обработчики для дочерних компонентов.

Example

Данное расширение изменяет вывод табличных данных, поведение, а также подменяет стили контрола Список акций тестовой карточки Автомобиль:

При наличии overflow-строк перехватывает событие клика по выбранной строке и автоматически разворачивает выделенную строку и сворачивает остальные (при условии, если они были развернуты).
При наличии overflow-строк подменяет стили заголовка контрола таблицы, а также добавляет дополнительное меню под стилизованным заголовком.
Изменяет отображение контента без внесения изменений в исходные данные:
- Если ячейка пустая, то с помощью contentOverride меняет ее содержимое на отсутствует.
- Если в ячейке находится дата в числовом формате дд.мм.гггг, то с помощью contentOverride перезаписывает дату в формате, где мм - полное название месяца (Например, ноябрь).
- Если название акции равно Windows или Apple, то с помощью customContentPrefix и customContentSuffix добавляет, соответственно, логотипы данных компаний перед и после их названия в колонке Акция.
Результат работы расширения:

27_horizontalScrollViews.ts¶

Данное расширение применимо для всех представлений. Позволяет активировать горизонтальный скролл вместо добавления overflow-строк при уменьшении ширины представления. Результат работы расширения представлен на следующем изображении:

28_taskEnableAttachFilesExampleUIExtension¶

При сохранении выбранного типа карточки, добавленные/измененные/подписанные файлы файлового контрола задания переносятся в основную карточку.

Дополнительная информация по работе данного расширения находится в разделе Расширения для работы с файлами в задании.

Example

Для карточки Автомобиль:

Добавьте файловый контрол для типа задания Тестовое согласование.
Отправьте задания через тайл на левой панели - Тестовое согласование.
Возьмите любое задание в работу, добавьте файл в файловый контрол.
При сохранении карточки файлы из файлового контрола задания переместятся в основную карточку.

Пример файлового контрола для типа задания Тестовое согласование (TestTask1) в TessaAdmin:

Пример отображения файлового контрола задания в тестовой карточке Автомобиль:

29_sliderControl¶

Создает собственные контролы и добавляет их в выбранную карточку.

Example

Пример данного расширения создает кастомный слайдер-контрол и добавляет его в блок Общая информация тестовой карточки Автомобиль.

30_examplePreviewer¶

Позволяет создать собственное окно предпросмотра и использовать его для определенного типа данных в выбранной карточке.

Example

В тестовой карточке Автомобиль создает кастомное окно предпросмотра и отображает его для типа данных с расширением .txt в области предпросмотра вкладки Карточка и для контролов Предпросмотр вкладки Сравнение файлов.

Пример отображения области предпросмотра с использованием расширения:

Пример отображения области предпросмотра без использования расширения:

31_exampleHeader¶

Устанавливает собственный React-компонент в хэдер карточки, расположенный над вкладками.

Example

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

32_ocrPreviewerUIExtension¶

В примере выполняется:

установка режима распознавания в инструменте предпросмотра pdf-файлов,
обработка события выбора распознанного элемента в инструменте предпросмотра,
скрытие/замена заголовка области предпросмотра.

Note

Данный пример использует функциональность OCR. Результатом выполнения операции OCR являются 2 файла: pdf-файл с контентом и текстовым слоем; json-файл с метаданными, которые содержат информацию о распознанных элементах. Данные файлы автоматически добавляются в карточку операции OCR после успешного распознавания текста в файле. Подробнее о данной функциональности описано в Руководстве пользователя и Руководстве администратора.

Example

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

Добавьте в файловый контрол json-файл с метаданными и сохраните карточку. Данный файл можно получить с помощью команды OcrSync, указанной в Руководстве администратора, либо с помощью прямых запросов к веб-сервису (можно воспользоваться фреймворком Swagger).
Создайте копию json-файла с метаданными. С помощью копии будет отслеживаться связь pdf-файла, добавленного в следующем пункте и json-файла с метаданными для этого pdf-файла.
Замените созданную копию на pdf-файл с контентом и сохраните карточку.
Выполните предпросмотр pdf-файла с контентом.

Пример отображения области предпросмотра с использованием расширения:

В примере выше был скрыт заголовок области предпросмотра, так как у файла была только одна версия. Если добавить для pdf-файла новую версию, то в предпросмотре будет отображён модифицированный заголовок:

33_tessaAssistantFileExtension.ts¶

В примере выполняется переопределение поведения кнопок “Подписать” и “Проверить ЭП” в контекстном меню файлового контрола для мобильных браузеров для возможности работы с мобильным приложением TESSA Assistant.

34_controlsCustomButtonUIExtension.ts¶

В примере показано, как можно добавить кастомную кнопку к контролу.

Example

В тестовой карточке Автомобиль добавляет кнопку к контролу “Цена со скидкой”, при нажатии на которую вычисляется цена с учетом скидки.

35_pdfAnnsExampleFileExtension¶

Пример использования диалога аннотаций pdf.

В тестовой карточке Автомобиль, для файлов pdf, в контекстное меню добавляется пункт Примеры использования аннотаций.

При нажатии на данный пункт появляются две кнопки - Добавить факсимиле и Оправить на подписание.

При нажатии на кнопку Добавить факсимиле открывается проводник, где можно выбрать изображение, которое в итоге добавляется на pdf документ как факсимиле или штамп. Более подробно про аннотации см. в разделе Работа с файлами.

При нажатии на кнопку Отправить на подписание открывается диалог аннотаций с кнопкой Отправить.

Перед нажатием на кнопку нужно добавить изображение. После нажатия будет сообщение об успешном выполнении.

Если изображение не добавлено, то будет ошибка.