JS и CSS вставки MTF/НТФ¶
В данном разделе можно подключить к категории JS и CSS вставки.
На странице Настройки JS и CSS вставок (NTF) добавляются вставки, которые будут работать только в карточке создания новой задачи.
На странице Настройки JS и CSS вставок (MTF) добавляются вставки, которые будут работать только в карточке уже созданной задачи.
Для выбора одной из существующих в системе вставок раскройте список над таблицей, выберите нужную вставку и нажмите кнопку Добавить вставку.
Для добавления новой вставки в систему нажмите кнопку Создать вставку.
В открывшемся окне заполните поле Описание произвольным названием, выберите тип (js или css) и внесите в поле Содержимое свой сценарий обработки событий. Затем нажмите кнопку Сохранить.
По кнопке Открыть настройки вставок (js и css) доступен список всех настроенных в системе вставок.
Если вы хотите создать новую вставку, нажмите кнопку Создать над списком. Если вы хотите отредактировать существующую вставку, кликните мышью по ее названию в таблице. В обоих случаях откроется окно редактора вставок JS\CSS.
ℹ️ Обратите внимание: добавленные ранее вставки не будут корректно работать при переходе из старого МТФ/НТФ в новый в SPA.
Подробнее о правилах миграции 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')
window.addEventListener('NewTaskLoadFinished', function(event) {
const ep = event.detail.extParam(123);
ep.hide();
})
Пример JS-вставки для карточки задачи (событие 'MTFMainLoadFinished')
window.addEventListener('MTFMainLoadFinished', function(event) {
const ep = new ExtParam(123, event.detail.cardGuid);
ep.hide();
})
Обращение к объектам
CSS и JS вставки могут обращаться к единичным объектам по их ID (например, к определенному ДП) или сразу ко всем объектам одного класса (например, ко всем кнопкам переходов).
Для обращения к единичному объекту используется символ #. Он идентичен обращению getElementById(). Например, эта вставка скрывает кнопки "Делегировать" и "Установить срок" на карточке задачи.
#btnDelegateTask,#btnChangeDueDate {
display:none;
}
Для обращения к классу используется символ . (точка). Например, эта вставка выравнивает все кнопки переходов по правому краю карточки задачи.
.tdStepButtons {
text-align: right;
}
Чтобы узнать имя нужного объекта или класса, используйте окно разработчика, которое вызывается в браузере клавишей F12.
Чтобы посмотреть конкретный объект, в контекстном меню этого объекта выберите пункт Исследовать элемент (Inspect). Там же можно посмотреть не только имя, но и шрифты, цвета и другие свойства объекта.
Переход к настройкам из пользовательского интерфейса¶
Перейти в настройки JS и CSS вставок можно из пользовательского интерфейса. Администраторам доступен пункт Настройки в контекстном меню при клике правой кнопкой мыши на панель инструментов карточки задачи. Выбор пункта откроет соответствующий раздел режима администрирования.
Описание настроек JS и CSS вставок в прежнем интерфейсе администрирования
Полезные ссылки