воскресенье, 24 февраля 2019 г.

JIRA: JS. инфо-блоки на экранах между полями с помощью JSincluder

Задача

Необходимо разграничить или просто добавить информационные блоки между полей, на различных экранах (View\Edit\Create)
Пример на скрине: 

Решение

Вариант описываемого тут решения, с помощью JavaScript. 
Первый способ - добавлять JS код в описание полей.
Но лучше всего, структурно использовать это в замечательном бесплатном плагине JSincluder
В данном случае, по требованиям, нам необходимо разместить инфо-блоки НАД требуемыми полями. Для этого необходимо узнать их ID. 
Поля имеют разный селектор

Одно и тоже поле имеет разный селектор. Поэтому на экране View оно будет отображаться как: #rowForcustomfield_12228 в то время, как на экране Edit это же поле будет #customfield_12228




Переходим в установленный JSincluder и создаем первый скрипт для View
В Bidings указываем необходимый проект, тип задач и View экран

А в тело скрипта прописываем все необходимые нам инфо блоки. 
В моем случае их 4: 
Скрипты для View экрана




AJS.$('#rowForcustomfield_12228').prepend('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Фаза ЭО</p></div>')
AJS.$('#rowForcustomfield_12231').prepend('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Фаза Предпроект</p></div>')
AJS.$('#rowForcustomfield_12236').prepend('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Фаза инициирование</p></div>')
AJS.$('#rowForcustomfield_12234').prepend('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Факт</p></div>')
Аналогичным образом создаем еще один скрипт, указываем параметры Bindings, только уже на Edit экран и прописываем необходимые инфо-блоки
Скрипты для Edit экрана




AJS.$('#customfield_12228').parent().before('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Фаза ЭО</p></div>')
AJS.$('#customfield_12231').parent().before('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Фаза Предпроект</p></div>')
AJS.$('#customfield_12236').parent().before('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Фаза инициирование</p></div>')
AJS.$('#customfield_12234').parent().before('<div class="aui-message kjjlf-message info"><span class="aui-icon icon-info"></span><p>Факт</p></div>')
Функции jQuery

Для разных экранов, функции Jquery отличаются. Необходимо смотреть документацию jQuery
В нашем случае, для view используется: .prepend а для Edit.parent().before

Теперь мы получим результат, указанный на первых скринах данной статьи!

Дополнительный материал

Комментариев нет:

Отправить комментарий