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

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

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

Atlassian документация AUI

Документация API Jquery