CSS-вставки используются для статичных настроек, которые не меняются ни при каких условиях. CSS-вставки – это то, что обычно содержится в html-странице в теге <style>. Например, самая простая и распространенная CSS-вставка — которая скрывает кнопки "Делегировать" и "Установить срок" на карточке задачи.
JS-вставки используются для динамических настроек, т.е. когда поведение меняется в зависимости от определенных условий. JS-вставки – это то, что обычно содержится в html-странице в теге <script>. Например, скрытие\отображение одного поля в зависимости от значения другого поля, или выделение красным цветом поля со значением, выходящим за заданные границы.
При работе с карточкой задачи текст JS-вставки — это действия, вызываемые после загрузки окна с карточкой задачи, т.е. после события MTFMainLoadFinished.
(window).addEventListener('MTFMainLoadFinished', function() {
...
}
При переходе на новую карточку задачи (MTF) обязательно должно быть использовано событие MTFMainDestroyed, которое позволяет очищать память при изменении контекста задачи (закрытие задачи, переключение на другую задачу, смена taskId и т.д.):
(window).addEventListener('MTFMainDestroyed', onDestroy) {
...
}
При работе с карточкой новой задачи текст JS-вставки — это действия, вызываемые после загрузки окна с карточкой новой задачи, т.е. после события NewTaskLoadFinished.
(window).addEventListener('NewTaskLoadFinished', function() {
...
}
При переходе на новую карточку создания задачи (NTF) обязательно должно быть использовано событие NewTaskDestroyed:
(window).addEventListener('NewTaskDestroyed', onDestroy) {
...
}
При работе с порталом текст JS-вставки — это действия, вызываемые после загрузки портального блока (в примере ниже 123 = это ID портального блока).
(window.firstForma.portal.block(123)).onLoaded(function() {
...
}
Контекст внутри событий:
(window.firstForma.portal.block(123)).onLoaded(function() {
...
}
(window).addEventListener('MTFMainLoadFinished', function onMTFInit(e) {
const ctx = e.detail;
const taskInitId = ctx.taskId;
const rootEl = ctx.root;
Добавление блока в карточку задачи с произвольной версткой — позиция блока должна указываться и представлять из себя список значений (enum):
•'MainBlockAfter' — После блока системных параметров
•'MainBlockBefore' — Перед блоком системных параметров, после панели инструментов
•'SecondaryBlockBefore' — Перед блоками ДП и БИ
•'SecondaryBlockAfter' — После блоков ДП и БИ, перед комментариями
Пример встaвки произвольного HTML в карточку задачи:
window.addEventListener('MTFMainLoadFinished', function onMTFInit(e) {
const ctx = e.detail;
const taskInitId = ctx.taskId;
window.addEventListener('MTFMainDestroyed', function onMTFDestroy(e) {
const ctx = e.detail;
const taskDestroyId = ctx.taskId;
}, { once: true });
// встaвка произвольного html
ctx.insertHtmlBefore('mainparams', `<div class="test">test insertHtmlBefore mainparams</div>`);
const div = document.createElement('div');
div.textContent = 'test insertHtmlAfter mainparams'
ctx.insertHtmlAfter('mainparams', div);
ctx.insertHtmlBefore('extparams', `<div class="test">test insertHtmlBefore </div>`);
ctx.insertHtmlAfter('extparams', `<div class="test">test insertHtmlAfter extparams</div>`);
ctx.insertHtmlBefore('comments', `<div class="test">test insertHtmlBefore comments</div>`);
ctx.insertHtmlBefore('block:2490', `<div class="test">test insertHtmlBefore block:2490</div>`);
ctx.insertHtmlAfter('block:2490', `<div class="test">test insertHtmlAfter block:2490</div>`);
});
Отображение встaвки произвольного HTML в пользовательском режиме:
Отображение встaвки произвольного HTML в пользовательском режиме
Логика работы 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). Там же можно посмотреть не только имя, но и шрифты, цвета и другие свойства объекта.
Просмотр имени объекта в окне разработчика.
Полезные ссылки
