JsIncluder — простые примеры


Плагин JsIncluder позволяет добавлять JavaScript на экраны создания, просмотра, редактирования и переходов между статусами.

Некоторые задачи нельзя решить без изменений в UI.

  • Автозаполнение полей на экранах.
  • Отображение полей на экранах в зависимости от выбранных опций в полях или роли пользователя.
  • Вывод баннеров с сообщениями.
  • Убрать none для выбора в списках.
  • Создать кнопки и ссылки для переходов на другие URL. Например ссылка на экран создания задачи с предопределенным полями.
  • Покрасить кнопку перехода.

Из коробки в Jira уже есть пара способов вызвать javascript.

  1. Announcement banner — глобальный и добавляется на ВСЕ страницы Jira.
  2. Через описание поля 

 

Первый способ как правило избыточен, а второго не всегда достаточно для решения т.к. описание поля загружается не на всех экранах. 

Поэтому, небольшие доработки в интерфейсе задач удобнее делать с помощью JsIncluder. В большинстве случаев пригодится jQuery.

Разберем как делать некоторые из задач.

Автозаполнение полей при создании в случае текстового поля

  1. На экране создания настраиваемые поля имеют id формата ‘customfield_XXXXX’, где XXXXX — числовой id поля.

Посмотреть id можно через консоль разработчика в браузере — Command+Option+C (Mac) / Control+Shift+C.

2) В AUI (Библиотека от Atlassian для создания интерфейсов) jQuery доступен через переменную AJS.$

Для установки текстового значения в поле получается вот такой код

function setFieldText(fieldId, text) {
    AJS.$('#' + fieldId).text(text)
}

setFieldText('customfield_XXXXX', 'TEXT')

Проверить код можно в консоле разработчика.

3. Теперь добавляем код в JsIncluder

Устанавливаем контекст создания для нужного проекта и типа issue. И все готово.

Вывод баннеров с сообщениями.

Для вывода пользовательских сообщение AUI предлагает использовать класс aui-message.

Добавляем с помощью jQuery текст на форму.

function showMessage(text){
  AJS.$('div.content').append('<div class="aui-message info"><p class="title"><strong>Внимание!</strong></p>'+text+'<p></p> </div>');
}

var text = `Текст сообщения!<br>
<b>Многострочный текст с какой-то ссылкой, <a href='` + '_' + `'>ссылкой</a>.</b>`

showMessage(text)

Полезные и часто используемые методы

В файле по ссылке методы/переменные которые мы часто используем.

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

JS_INCLUDER.params.userDetails.groupNames

или скрыть поле с формы.

function hideField(fieldId) {
    AJS.$('div.field-group:has(#' + fieldId + ')').hide()
}

С помощью JsIncluder можно быстро сделать интерфейс более функциональным.

Продолжение.

 


Like it? Share with your friends!

536
536 points
a.chuiko

Comments

comments

Powered by Facebook Comments