Описание

Задачи добавления функционала в визуальную часть действующего проекта - частая просьба клиента. Например, просьба добавить кнопку в карточку задачи, группы или сотрудника. Для "1С-Битрикс: Управление сайтом" более приемлем классический способ копирования и кастомизации шаблона компонента. Кастомизация визуальной части проекта, реализованная с помощью JS, более практична для решения задач в коробочной версии Битрикс24, хотя может использоваться и в БУС тоже.

Использование для этих целей JS вместо кастомизации шаблона, имеет свои особенности:

1. Возможна задержка вывода контента при построении страницы.
2. Зависимость от обновлений визуальной части вендором.

В каждом конкретном случае разработчик самостоятельно решает какой способ добавления визуального функционала (JS или классический) предпочтителен.

Добавляемый JS-код хранится в рамках системы в нескольких местах, но при кастомизации визуальной части лучше использовать место для файлов по пути: /bitrix/js/<ваша уникальная папка>/file.js.

Кнопка в карточке задачи

Добавить кнопку в карточку задачи

Заказчик поставил задачу: Поставить кнопку Скачать в PDF в карточке задачи.

После выбора места для кнопки находим конкретного "соседа" к которому нужно привязаться при внедрении кнопки. В нашем примере место для кнопки - рядом с кнопкой Редактировать, значит ищем класс элемента-соседа:

Далее используем код:

//код исполняем, только когда DOM загружен 
BX.ready(function(){ 
	var editButton = BX.findChild(//найти пасынков... 
		BX('task-view-buttons'),//...для родителя 
			{//с такими вот свойствами 
			tag: 'a', 
		className: 'task-view-button edit' 
			}, 
			true//поиск рекурсивно от родителя 
			); 
	if (editButton)  
	{ 
		var href = window.location.href, matches, taskId; 
		//узнаем id задачи из URL 
		if (matches = href.match(/\/task\/view\/([\d]+)\//i)) { 
			taskId = matches[1]; 
	} 
	//создаем кнопку 
	var newButton = BX.create('a', { 
		attrs: { 
			href: href + (href.indexOf('?') === -1 ? '?' : '&') + 'task=' + taskId + '&' + 'pdf=1&sessid=' + BX.bitrix_sessid(), 
			className: 'task-view-button edit webform-small-button-link task-button-edit-link' 
		}, 
		text: 'Скачать как PDF' 
	}); 
	//вставляем кнопку 
	BX.insertAfter(newButton, editButton); 
	} 
});

//создаем кнопку 
var newButton = BX.create('span', { 
	html: 'Скачать как PDF' 
});

Добавление в меню

Аналогичную команду Скачать как PDF внедряем в меню Ещё карточки задачи.

Задача решается с помощью обработчика:

//код исполняем, только когда DOM загружен 
BX.ready(function(){ 
	BX.addCustomEvent('onPopupFirstShow', function(p) { 
		var menuId = 'task-view-b'; 
		if (p.uniquePopupId === 'menu-popup-' + menuId) 
		{ 
			var menu = BX.PopupMenu.getMenuById(menuId), 
				href = window.location.href,  
				matches, taskId;             
			//узнаем id задачи из URL 
			if (matches = href.match(/\/task\/view\/([\d]+)\//i)) { 
			taskId = matches[1]; 
		} 
			//добавляем пункт меню, полученному по id 
			menu.addMenuItem({ 
				text: 'Скачать как PDF', 
				href: href + (href.indexOf('?') === -1 ? '?' : '&') + 'task=' + taskId + '&' + 'pdf=1&sessid=' + BX.bitrix_sessid(), 
				className: 'menu-popup-item-create' 
			}); 
		} 
	}); 
});

Добавление пункта в меню предпочтительнее, чем использование кнопки. В этом случае при построении DOM не будет "миганий" и "дёрганий".

Узнать ID popup'а можно так:

Внедрение в меню - частный случай внедрения в popup. Общий пример выглядит так:

//код исполняем, только когда DOM загружен 
BX.ready(function(){ 
	BX.addCustomEvent('onPopupFirstShow', function(p) { 
		if (p.uniquePopupId === 'task-templates-popup-templateselector') 
		{ 
			p.contentContainer.innerHTML = 'blabla'; 
		} 
	}); 
});

Результат такого внедрения:

Замена действий

Например, при нажатии на кнопку Завершить должен появиться popup для введения обязательного комментария.

//метод, вызываемый при клике
	var completeAction = function(){ 
		var popup = new BX.PopupWindow('customComplete', BX.proxy_context, { 
			darkMode: true, 
			closeByEsc : true, 
			contentColor: 'white' 
		}); 
		popup.setContent('Введите сначала комментарий: <input type="text">'); 
		popup.show(); 
	}; 

//селектор места вставки
var completeButton = BX.findChild(//найти пасынков... 
	BX('task-view-buttons'),//...для родителя 
	{//с такими вот свойствами 
		tag: 'span', 
		className: 'task-view-button complete' 
	}, 
		true//поиск рекурсивно от родителя 
	); 

if (completeButton)  
	{ 
		//сначала вставляем свою кнопку 
		BX.insertAfter(BX.create('span', { 
			attrs: { 
				href: '#', 
				className: 'task-view-button complete webform-small-button webform-small-button-accept' 
			}, 
			events: { 
				click: BX.proxy(completeAction, this) 
			}, 
			text: 'Завершить' 
		}), completeButton); 
		//затем удаляем старую 
		BX.remove(completeButton); 
	} 

Серверный контроль

При изменении визуальной части необходим контроль со стороны сервера так как: DOM может не успеть подгрузиться, задачу закрыли из другого места, другие ситуации. Это необходимо предусмотреть и вывести ошибку. Сделайте, например, так:

<?php 
AddEventHandler('main', 'onProlog', function(){ 
	$request = \Bitrix\Main\Context::getRequest(); 
	if ($request->get('pdf_download')) 
	{ 
		// 
	} 
});