Перейти к содержанию

General includes

ℹ️ Обратите внимание: добавленные ранее вставки не будут корректно работать при переходе из старого МТФ/НТФ в новый в SPA.

Подробнее о правилах миграции JS-вставок со старой карточки задачи в SPA 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 в пользовательском режиме Вставка в категорию осуществляется в настройках категории. Если одну и ту же вставку нужно подключить к нескольким категориям, можно сделать это через БД, добавив нужные записи в таблицу SubcatIncludes.

Вставки для пользователей определенных групп настраиваются на странице рабочего места группы по кнопке JS/CSS.

JS и CSS вставки, которые используются в категории и на портале, можно сделать общими, т.е. доступными для использования в других категориях и порталах. Для этого их нужно добавить в список общих вставок и отметить контекст использования.

Для добавления новой вставки нажмите кнопку + Создать над списком, введите описание и тип вставки. После выбора Типа вставки: JS/CSS в нижней части окна отобразится поле для ввода соответствующего контента. Для создания вставки нажмите Сохранить.

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

Для удаления вставки нажмите кнопку Удалить в окне редактирования. При этом появится окно подтверждения.

ℹ️ Невозможно удалить вставку, если она используется в категории

Поддержка русскоязычных аналогов

При написании JS-вставок вы можете использовать русскоязычные аналоги методов и объявлять объекты сущностей (ДП) непосредственно по имени самого ДП в категории. Например, вместо создания объекта ExtParam с указанием идентификатора, достаточно вызвать имя ДП в категории.

Пример:

const test = new ExtParam(2454);

const test2 = new ExtParam(7500);

test.val() = test.val();

Аналог:

var test = ДП.Спринт();

var test1 = ДП.Сборка();

test.Значение() = test1.Значение();

Все доступные методы для работы с параметрами можно вызывать через экземпляры созданных объектов, используя русские аналоги методов:

Метод Аналог val() Значение() textVal() ТекстовоеЗначение() getAvailableValues() ВозможныеЗначения() change() ИзменитьЗначение() save() Сохранить() update() Обновить() isHidden() Скрыть() freeze() Заблокировать()

Подробнее о методах в разделе Синтаксис JS вставок и методы JS API.

Где посмотреть JS API

JS API доступен в документации разработчика. Список методов см. в js_syntax.md.

API 1F

Для работы с объектами "Первой Формы" разработан собственный API. Его можно использовать в дополнение к обычным возможностям JS. Например, для обращения к ДП используется метод ExtParam(ID ДП):

var ep123 = new ExtParam(123);\ ep123.change() {\ alert(\'Обратите внимание — значение параметра изменилось!\');\ } CSS-вставки используются для статичных настроек, которые не меняются ни при каких условиях. CSS8-вставки — это то, что обычно содержится в HTML-странице в теге