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

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

// import './examples/registrator';

Работа расширений демонстрируется на основе тестового типа карточки WebTestType.

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

Добавьте тип карточки в типовое решение, разрешите создание заданий.

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

npm run build

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

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

1_hideBlockByRefValueUIExtension.ts¶

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

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

Example

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

2_changeFieldOrRowUIExtension.ts¶

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

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

Example

Когда меняют значение флага Базовый цвет, то:

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

3_tableSectionChangedUIExtension.ts¶

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

Example

Когда изменяется секция Получатели, то в поле Тема добавляется строка.

4_hideFormUIExtension.ts¶

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

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

5_hideTaskBlockUIExtension.ts¶

Скрывать/показывать контрол с информацией о задании (в задании) в зависимости от наличия/отсутствия текста в комментарии.

Как тестировать

Example

Отправьте себе стандартную задачу через тайл на левой панели - “Поставить задачу”. Затем возьмите её в работу, нажмите “Завершить” и напишите любой текст в поле “Комментарий”.

6_simpleCardTileExtension.ts¶

На левую панель добавляет тайл с названием “Тайл карточки”.

Example

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

7_simpleViewTileExtension.ts¶

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

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

Example

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

8_requestTileExtension.ts¶

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

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

Example

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

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

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

9_additionalTableButtonUIExtension.ts¶

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

Example

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

10_dialogModeAutocompleteUIExtension.ts¶

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

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

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

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

Example

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

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

Пример работы (без диалога):

Пример работы (с диалогом):

11_customBPTileExtension.ts¶

Пример расширения, которое добавляет тайл, доступный в карточках. Тайл запускает бизнес процесс.

Example

При нажатии на тайл в “Info” карточки добавляется ключ .startProcess с значением WfResolution. После, карточка сохраняется и обновляется.

12_fileControlUIExtension.ts¶

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

13_hideTileExtension.ts¶

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

14_tableControlDoubleClickUIExtension.ts¶

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

15_showFormDialogUIExtension.ts, 16_showCustomDialogUIExtension.tsx¶

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

17_closeCardOnCompleteTaskExtension.ts¶

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

Example

Отправьте себе стандартную задачу через тайл на левой панели - “Поставить задачу”. Затем возьмите её в работу, нажмите “Завершить”.

18_additionalMetaExtension.ts¶

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

19_customThemeProp.ts¶

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

20_tabPanelButtonUIExtension.ts¶

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