В данном разделе можно подключить к категории JS и CSS вставки.
На странице Настройки JS и CSS вставок (NTF) добавляются вставки, которые будут работать только в карточке создания новой задачи.
На странице Настройки JS и CSS вставок (MTF) добавляются вставки, которые будут работать только в карточке уже созданной задачи.
Настройки JS и CSS вставок
Для выбора одной из существующих в системе вставок растройте список над таблицей, выберите нужную вставку и нажмите кнопку Добавить вставку.
Поле для выбора существующей вставки
Для добавления новой вставки в систему нажмите кнопку Создать вставку.
В открывшемся окне заполните поле Описание произвольным названием, выберите тип (js или css) и внесите в поле Содержимое свой сценарий обработки событий. Затем нажмите кнопку Сохранить.
Создание вставки
По кнопке Открыть настройки вставок (js и css) доступен список всех настроенных в системе вставок.
Список всех вставок
Если вы хотите создать новую вставку, нажмите кнопку Создать над списком. Если вы хотите отредактировать существующую вставку, кликните мышью по ее названию в таблице. В обоих случаях откроется окно редактора вставок JS\CSS.
Окно редактора вставок
Подробнее о правилах миграции 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). Там же можно посмотреть не только имя, но и шрифты, цвета и другие свойства объекта.
Просмотр имени объекта в окне разработчика
Переход к настройкам из пользовательского интерфейса
Перейти в настройки JS и CSS вставок можно из пользовательского интерфейса. Администраторам доступен пункт Настройки в контекстном меню при клике правой кнопкой мыши на панель инструментов карточки задачи. Выбор пункта откроет соответствующий раздел режима администрирования.
Переход к настройкам из пользовательского режима
Полезные ссылки
