Чтобы воспользоваться JS вставкой, нажмите кнопку Настроить вставки (js и css) в дизайнере форм. Откроется окно управления вставками:
Окно управления вставками
•Чтобы выбрать одну из существующих в системе вставок, нажмите кнопку Добавить вставку. Отобразится список для выбора. Выберите нужную вставку и нажмите кнопку Добавить вставку в категорию.
Поле для выбора существующей вставки
•Чтобы добавить новую JS вставку в систему, нажмите кнопку Открыть настройки вставки (js и css). При этом откроется таблица уже существующих в системе JS\CSS вставок.
Список существующих вставок
Если вы хотите создать новую вставку, нажмите кнопку Добавить. Если вы хотите отредактировать существующую вставку, кликните мышью по ее названию в таблице. В обоих случаях откроется окно редактора вставок JS\CSS. Заполните поле "Описание" произвольным названием, выберите тип (js или css) и внесите в поле "Содержимое" свой сценарий обработки событий. Затем нажмите кнопку Сохранить.
Окно редактора вставок
Область действия вставки
Область действия каждой вставки ограниченна. Она задается по клику на значок 
в соответствующей строке.
Выбор области действия вставки
Если вставка добавляется на вкладке Дизайн формы новой задачи, то область действия может быть только Форма задачи. Если вставка добавляется на вкладке Дизайн формы задачи, то можно выбрать одну или несколько областей действия:
Название |
Область действия |
|---|---|
Форма задачи |
Карточка задачи/карточка создания новой задачи |
Причины действия |
Окно запроса причины для переноса/установки срока, причины при вынесении резолюции по подписи, причины перехода, причины изменения ДП |
Запрос подписи |
Окно запроса подписей (Подписи — Запросить подпись) |
История ДП |
Окно просмотра истории изменения ДП (Прочее — История изменений ДП) |
Участники задачи |
|
Журнал подписей |
|
Вложения в задаче |
Окно просмотра всех вложенных в задачу файлов (Документы — Все вложения) |
Видеоурок, иллюстрирующий создание, настройку и подключение JS и CSS вставок:
JS и CSS вставки (16:37 мин.)
Подробнее о правилах миграции JS-вставок со старой карточки задачи в SPA. |
|---|
Логика работы JS-вставок в карточках задачи
Для каждой карточки задачи (как для карточки создания, так и для уже созданной задачи) генерируется уникальный GUID. После переключения между задачами устанавливается ActiveCardGuid, что помогает получить уникальный идентификатор для каждой отдельной карточки. Объект new ExtParam теперь смотрит на GUID активной карточки, а не на активный номер задачи, что позволяет избежать неправильного определения карточки, из которой берется ДП.
В событиях "MTFMainLoadFinished" и "NewTaskLoadFinished" есть метод extParam(id), который смотрит на GUID задачи, что помогает точно определить, в какой карточке должна отработать вставка. Также cardGuid — GUID карточки, в которой отрабатывает вставка. После закрытия карточки задачи записи с GUID уничтожаются.
GUID карточки можно узнать на элементе vh-task-card и vh-new-task-card в атрибуте data-card-guid.
Пример JS-вставки для карточки создания новой задачи (событие 'NewTaskLoadFinished')
Пример JS-вставки для карточки задачи (событие 'MTFMainLoadFinished')
Обращение к объектам
CSS и JS вставки могут обращаться к единичным объектам по их ID (например, к определенному ДП) или сразу ко всем объектам одного класса (например, ко всем кнопкам переходов).
Для обращения к единичному объекту используется символ #. Он идентичен обращению getElementById(). Например, эта вставка скрывает кнопки "Делегировать" и "Установить срок" на карточке задачи.
Для обращения к классу используется символ . (точка). Например, эта вставка выравнивает все кнопки переходов по правому краю карточки задачи.
Чтобы узнать имя нужного объекта или класса, используйте окно разработчика, которое вызывается в браузере клавишей F12.
Чтобы посмотреть конкретный объект, в контекстном меню этого объекта выберите пункт Исследовать элемент (Inspect). Там же можно посмотреть не только имя, но и шрифты, цвета и другие свойства объекта.
Просмотр имени объекта в окне разработчика
Полезные ссылки
