Подробнее о правилах миграции JS-вставок со старой карточки задачи в SPA. |
---|
Примеры JS-вставок
Изменение значения одного ДП в зависимости от другого ДП
Новый МТФ Пример JS-вставки скрывающей ДП в зависимости от значения другого ДП ... var ep30601, ep72670; function check() { const ep30601Val = ep30601?.val(); console.log(ep30601Val) if (ep30601Val?.value == "test") { ep72670.show() } else { ep72670.hide() } }; // Срабатывает на открытии и обновлении МТФ function onLoad() { console.log('js') ep30601 = new ExtParam(30601); ep72670 = new ExtParam(72670);
check();
ep30601.change(() => check());
} // function onDestroy() { window.removeEventListener('MTFMainLoadFinished', onLoad); // Чтобы change не вызывался после нового открытия, // т.к. глобально в памяти ep30601 еще есть ep30601?.destroy(); ep72670?.destroy(); }
window.addEventListener('MTFMainLoadFinished', onLoad); window.addEventListener('MTFMainDestroyed', onDestroy);
} Старый МТФ Изменение значения одного ДП в зависимости от другого ДП обычно настраивается с помощью смартов. Но если такой пакет действий привязан к смарт-событию "После смены ДП", то он будет выполняться только в момент сохранения карточки задачи. Чтобы при изменении одного ДП пользователь мог сразу увидеть обновленное значение второго ДП, без необходимости лишний раз сохранять карточку задачи, можно настроить изменение с помощью приведенной ниже js-вставки. К дате, которая записана в ДП ID=123, надо прибавить 1 час и записать в ДП ID=456. (window).addEventListener('MTFMainLoadFinished', function() { var newFormatedDate = date1.format("dd.MM.yyyy H:mm").toString(); |
Вст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 в пользовательском режиме |
Отображение\скрытие поля в зависимости от условий
Новый НТФ Скрыть или отобразить значение ДП в зависимости от ДП Выпадающий список window.addEventListener('NewTaskLoadFinished', function() { var ep2725 = new ExtParam(2725); var ep2478 = new ExtParam(2478);
function toggleEp(epToHide = [], epToShow = []) { epToHide.forEach(id => { const ep = new ExtParam(id); ep.hide() })
epToShow.forEach(id => { const ep = new ExtParam(id); ep.show() }) }
function emp_visible(){ if (ep2725.val() && ep2725.val().text == 'Групповая') { toggleEp([2478], []); } else { toggleEp([], [2478]); } };
emp_visible(); ep2725.change(emp_visible); }) Скрыть или отобразить значение ДП в зависимости от ДП Lookup window.addEventListener('NewTaskLoadFinished', function() { let ep1248 = new ExtParam(1248); let ep1249 = new ExtParam(1249); let ep1861 = new ExtParam(1861);
function toggleEp(epToHide = [], epToShow = []) { epToHide.forEach(id => { const ep = new ExtParam(id); ep.hide() })
epToShow.forEach(id => { const ep = new ExtParam(id); ep.show() }) }
function ep1248_change() { if (ep1248.val().taskId == '234443') { toggleEp([], [1249, 1861]); } else { console.log('hide all'); toggleEp([1249, 1861], []); } };
ep1248.change( function () { ep1248_change(); });
//Вызываем только что привязанную функцию ep1248_change(); }) Старый МТФ Если значение ДП 123 равно "открыть", то ДП 456 отображается, иначе (по умолчанию) — скрывается. (window).addEventListener('MTFMainLoadFinished', function() |
Сообщение пользователю во всплывающем окне (alert)
Старый МТФ При изменении ДП 123 типа "выпадающий список" отображается сообщение с ID выбранного пользователя. (window).addEventListener('MTFMainLoadFinished', function() |
Изменение цвета отображения ДП в зависимости от значения
Старый МТФ Для большей наглядности в карточке задачи наиболее критичные ДП можно отображать разными цветами в зависимости от их значений. Пример 1 ДП "% предоплаты по договору" необходимо отображать зеленым цветом если его значение менее 20, желтым цветом если значение от 20 до 40, красным если свыше 40. Команда .replace(',','.').replace(/\s+/g,' ') приводит значение ДП к виду, который можно будет сконвертировать в float для сравнения с другими числами. function paintYellow ( a )
Пример 2 Изменение цвета ДП + запрет на ввод нового значения в зависимости от значения другого ДП. (window).addEventListener('MTFMainLoadFinished', function() // для карточки задачи |
Видимость ДП в зависимости от значения другого ДП
Старый МТФ В зависимости от значения ДП с ID=1234 (в данном случае, это ДП типа "Checkbox") скрыть\показать ДП с ID=5678 (в данном случае это ДП типа "Таблица"). $(window).on('MTFMainLoadFinished', function(){ //Получаем объект ДП с ID=1234 var ep1 = new ExtParam(1234);
// Создаем функцию с обработкой изменения ДП function f_change() { var ep2 = new ExtParam(5678); switch(ep1.val()) { case 'да': ep2.show(); break; case 'нет': ep2.hide(); break; default: ep2.show(); break; } }
//Привязываем функцию к событию Смены значения ДП с ID=1234 ep1.change( function () { f_change(); });
//Вызываем только что привязанную функцию, чтобы при загрузке ДП с ID=5678 был отображен в соответствии с требованиями условий. f_change(); }); Описанный выше пример отслеживает только "ручное" изменение ДП. Если надо отслеживать также автоматические изменения (в том числе сделанные смартами), то можно использовать следующую конструкцию: ... var show = true; ... ep1.change(function(fromAutomatization) { ... if(show && fromAutomatization) { ep2.show(); show = false; } else { ep2.hide(); show = true; } }); ... Здесь используется событие change(), которое возникает при автоматическом обновлении ДП (в результате работы смарта или других изменений на сервере). В функции, которая подписывается на событие change(), используется параметр fromAutomatization, который равен true при автоматическом обновлении и null при изменении ДП пользователем (однако в силу технических ограничений этот параметр не доступен для ДП типа Lookup или "Выпадающий список"). |
Видимость ДП в зависимости от значений нескольких ДП
Старый МТФ Отображение ДП с ID 237, 239, 249, 250 в зависимости от их значений. $(window).on('NewTaskLoadFinished', function() //оставить эту строчку для карточки новой задачи } function onDestroy() { window.removeEventListener('MTFMainLoadFinished', onLoad); ep249?.destroy(); ep239?.destroy(); ep237?.destroy(); ep250?.destroy(); }
window.addEventListener('MTFMainLoadFinished', onLoad); window.addEventListener('MTFMainDestroyed', onDestroy); |
Старый МТФ Если на карточке расположены два связанных ДП, доступных для редактирования, то при вызове обработчика change() для родительского ДП значение подчиненного ДП сбрасывается. Обойти это можно, если вместо обработчика change() вызывать собственную функцию. Пример Пусть на карточке задачи есть обычный ДП с ID = 11 и два связанных ДП — родительский с ID = 23 и подчиненный с ID = 34. (window).addEventListener('MTFMainLoadFinished', function() |
Скрытие основных полей и кнопок карточки задачи
Старый МТФ Cкрытие кнопок Делегировать, Установить срок, Маршрут, Вложить #btnAdvancedTaskInfo,#btnChangeDueDate,#btnDelegateTask,#ctl00_formInner_NewTaskUploadsButton_btnUploads{display:none} Скрытие кнопок От, Подписать, Уведомить, Вложить $(window).on('NewTaskLoadFinished', function() { Скрытие текста задачи #ctl00_formInner_newTaskText_TaskBlock{display:none} Скрытие блока комментариев #commentsAddDivContainer{display:none} |
Транслитерация текста, введенного в ДП
Старый МТФ Функция транслитерации (написания русских слов латинскими буквами) может применяться для автоматической генерации логина или e-mail сотрудника на основании его ФИО. Она полезна при автоматизации бизнес-процессов кадровой службы, связанных с приемом на работу новых сотрудников. Функция транслитерации реализуется с помощью следующей JS-вставки: function translite ( string ) |
Настройка скрывающегося блока ДП в карточке задачи
Старый МТФ Рассмотрим возможность настройки скрывающего блока ДП на примере из двух ДП, один из которых будет скрывать по нажатию кнопки (ссылки). ![]() Шаблон дизайна В Дизайне категории необходимо войти в режим отображения HTML (см. правое меню на предыдущем скриншоте) и найти первую строчку блока ДП: <div class="extparamsBlock"> В данном примере в блоке ДП есть 4 пары тегов <tr> ... </tr>, по две пары для каждого из двух ДП: одна пара на название ДП и другая на сам ДП. Надо разделить блок <div> на два таких же блока и прописать у каждого некоторые свойства. Между этими двумя блоками нужно вставить блок со ссылкой, при нажатии на которую будет вызываться js, скрывающий нижний блок ДП: <div style="padding: 4px 0px 0px 10px;"> Результат должен быть такой: <div class="extparamsBlock" style="" id="1"> На что стоит обратить внимание: •в первом блоке div добавлены свойства style="" и id="1"; •во втором блоке добавлены свойство style="display: none; " , которое скрывает этот блок по умолчанию, и id="2". После редактирования html-кода нажмите кнопку Сохранить. Теперь надо добавить js, который вызывается по нажатию на ссылку, добавленную выше отдельным блоком. В Дизайнере надо нажать кнопку Настроить вставки (js и css) (выделена на скриншоте выше) и добавить созданную js вставку: function ShowPanel(panelid) { |
Заполнение контактных лиц при выборе компании
Старый МТФ При выборе компании (ДП Lookup с ID=456) заполяется список контактных лиц (ДП Multilookup с ID=123, связанный с ДП 456). var ep123 = new ExtParam(123), |
Персонализированная подсказка в категории
Старый МТФ В карточке задачи можно выводить подсказки по работе с задачей. Подсказки настраиваются на вкладке "Примечания" для определенных статусов. Если вы хотите сделать текст подсказки персонализированным, можно выводить в нем имя пользователя. Подсказка для статуса "Новая" (в режиме HTML) ![]() Подсказка для статуса "Новая" в режиме HTML В данном примере имя пользователя хранится в скрытом ДП "Выбор пользователя" с ID=123. (window).addEventListener('MTFMainLoadFinished', function() { |
Проверка настройки повторений при создании повторяющихся задач
Старый МТФ В одной и той же категории часть задач может носить разовый характер, а часть — регулярно повторяющийся. Для повторяющихся задач включается флажок "Регулярно" (в данном примере этот ДП имеет ID=111). Важно, чтобы для повторяющихся задач было настроено повторение. Чтобы пользователи при создании таких задач не забывали настраивать повторения, добавляется проверка при нажатии кнопки "Поставить задачу": если на карточке создания новой задачи включен флажок "Регулярно", а настройки повторений не заданы, пользователю выдается предупреждение, задача не создается, и окно создания задачи остается открытым. Чтобы автоматизировать такую проверку, к карточке создания новой задачи можно добавить JS-вставку: $(window).on('load', function() { Чтобы иконка настройки параметров повторения на панели инструментов была доступна только при включенном флажке "Регулярно", можно добавить такую JS-вставку (на панели инструментов нужная иконка – 6-ая по порядку, с учетом разделителя): $(window).on('NewTaskLoadFinished', function() |
Замена стандартного окна предупреждения (alert) на SweetAlert
Старый МТФ Вместо стандартного окна предупреждения JS alert() можно использоватьфункцию swal() из Bootstrap Sweet-Alert. Начиная с версии 2.182 функция swal() не входит в поставку "Первой Формы", ее нужно предварительно загрузить: var scr = document.createElement('script');
|
Повышение приоритета задачи (вызов метода Valhalla)
Старый МТФ В портальном блоке по клику на кнопку задаче присваивается повышенный приоритет с помощью вызова метода веб-сервиса Valhalla.
var xhr = new XMLHttpRequest(); где вместо appFullPath надо подставить путь к приложению "Первая Форма". |
Вывод названия категории на панели инструментов
Старый МТФ Название категории отображается на панели инструментов карточки задачи, рядом с номером задачи. Текст JS-вставки без jQuery (window).addEventListener('MTFMainLoadFinished', function() { Текст JS-вставки с jQuery $(window).on('MTFMainLoadFinished', function() { |
Открытие задачи из виджета в модальном окне
Старый МТФ Данная JS-вставка используется для портала с виджетом SmartHtml с ID=123. В виджете выводится список задач с иконками для открытия задачи в модальном окне: Верстка для иконки использует определенный в блоке CSS-класс projects-btn: <a href="/MainTaskForm.aspx?TaskID={{taskID}}" target="_blank" class="projects-btn"><i class="fa fa-external-link" title="Открыть в новом окне"></i></a> Для портальной страницы используется JS-вставка, которая проверяет все элементы данного класса и по клику на элемент открывает ссылку (на карточку задачи) в модальном окне: (window.firstForma.portal.block(123)).onLoaded(function () {
Обновление виджета при закрытии модального окна Часто задача открывается в модальном окне для того, чтобы изменить отдельные параметры этой задачи. В зависимости от этих параметров может потребоваться обновление исходного списка задач в виджете. Например, в виджете отображается список задач со сроком выполнения "сегодня". По клику на задачу открывается ее карточка, и пользователь меняет срок задачи. После этого задача должна исчезнуть из исходного списка. В этом случае вместо стандартной процедуры radopen можно вызывать собственную процедуру, в которой настроен обработчик кнопки закрытия модального окна (эта кнопка имеет класс rwCloseButton). Обработчик выполняет перезагрузку виджета: function radwin(link) { }) ... // открытие ссылки в модальном окне radwin(el.href); Другие действия По клику на иконку могут быть настроены и другие действия, доступные с помощью настроек адресной строки. Например, чтобы по клику открывалась карточка создания новой задачи, в верстке блока для иконки должна быть ссылка: <a href="/NewTask.aspx?SubcatID={{subcatID}}" target="_blank" class="projects-btn"><i class="fa fa-external-link" title="Открыть в новом окне"></i></a> |
Пример работы с radwindow и iframe
Старый МТФ При открытии всплывающего окна radwindow для установки срока автоматически заполняется причины смены срока, а если причина пустая, выдается предупреждение. (window).addEventListener('MTFMainLoadFinished', function() { |
Пример AJAX-запросов, Promise и SweetAlert
Старый МТФ В портальном блоке Smart Html слева выводится список незавершеных задач из категории, а справа — список завершенных. По клику на задачу она переводится в статус "Завершено" и переходит из левого списка в правый. После этого страница перезагружается, чтобы отобразить обновленные данные. Если переход невозможен, выдается окно с предупреждением. ![]() Полезные ссылки Работа с блоком Smart Html описана здесь. Для обращения к данным, отбираемым с помощью смарт-выражений, используется шаблонизатор mustache. Описание шаблонизатора mustache на английском Описание шаблонизатора mustache на русском Решение Верстка блока <div class='block-wrapper'> {{#smart555}} <span data-state-id='{{stateID}}' data-task-id='{{taskID}}' class='task-item'>{{description}}</span> <i data-task-id='{{taskID}}' class="to-complete fa fa-arrow-right"></i> </div> {{/smart555}} </div> JS-вставка
//polyfill
(window.firstForma.portal.block(1234)).onLoaded(function() { // назначаем обработчик для события клика по кнопке создания задачи // для каждой задачи назначаем обработчик для события клика по тексту задачи // функция добавляет завершенные задачи в список в правой половине блока // функция удаляет завершенные задачи из списка в левой половине блока // переносим завершенные задачи из левой части в правую // назначаем обработчик для события клика для каждой кнопки завершения задачи |
Примеры CSS-вставок
Скрыть кнопку "Удалить все файлы"
CSS-вставка для удаления кнопки для удаления всех файлов: i[title="Удалить все файлы"] { display: none; } Кнопка "Удалить все файлы" |
CSS-вставка для увеличения текста задачи до 20px: #txTaskText {font-size: 20px; height:25px; padding-left:4px} |
Заблокировать ДП "Выбор пользователя" при создании
CSS-вставка для блокировки ДП "Выбор пользователя" на НТФ : .disabledparam64 { pointer-events: none; opacity: 0.4; } |
CSS-вставка для смены фона кнопки на красный: #e647d7af-64ee-41f6-be09-b811e717c6d5 > vh-menu-widget > button:nth-child(4) { background: red; } |
CSS-вставка, которая скрывает исполнителя, срок, начало работы, кнопки "Делегировать" и "Установить срок": #ctl00_formInner_Contenttd > div:nth-child(1) > table > tbody > tr:nth-child(1) > td:nth-child(1) > table > tbody > tr:nth-child(5) {display: none;} #ctl00_formInner_Contenttd > div:nth-child(1) > table > tbody > tr:nth-child(1) > td:nth-child(1) > table > tbody > tr:nth-child(7) {display: none;} #ctl00_formInner_Contenttd > div:nth-child(1) > table > tbody > tr:nth-child(1) > td:nth-child(1) > table > tbody > tr:nth-child(8) {display: none;}
#btnDelegateTask,#btnChangeDueDate {display: none;} |
CSS-вставка, которая скрывает блок "Используется": #ctl00_formInner_Contenttd > div:nth-child(11){display: none} |
Скрыть кнопку редактирования текста
CSS-вставка, которая скрывает кнопку "карандаш" для редактирования текста: #imgTaskTextEditID {display:none} |
Установить размер ресурсного планирования
CSS-вставка для установки размера ресурсного планирования: .mtfTaskResources-inner{max-width: 60%;} |