скрыть исходный код компонента битрикс

Управление структурой. Настройки модуля

Форма настроек модуля Управление структурой (Настройки > Настройки продукта > Настройки модулей > Управление структурой) предназначена для задания общесистемных параметров модуля. Для удобства работы форма разделена на закладки, на каждой из которых выполняется настройка определённой группы параметров модуля.

Настройки

Закладка предназначена для настройки общих параметров модуля.

Каждое название компонента или маска указывается с новой строки.

Заполнять поле может только администратор сайта.

Поле фильтрует только системные компоненты, т.е. задавать здесь пространство имен (namespace) не имеет смысла. Выведены будут только компоненты из пространства имен bitrix, компоненты из других пространств имен будут проигнорированы.

Не отображать раздел «Файлы и папки» в меню «Структура сайта»При отмеченной опции физическая структура сайта (раздел Файлы и папки) будет не доступен, отображаться будет только логическая структура.Включить возможность автоматического генерирования имени файлов и папок из названий при создании страниц и разделовПри отмеченной опции имена файлов или папок будут генерироваться из названий заголовков страниц или разделов.Использовать внешний сервис для автоматического генерирования имен файлов и папокПри отмеченной опции в качестве имен файлов или папок будет использован перевод названий заголовков страниц или разделов.

Внимание! Для работы с сервисом Яндекс.Перевод требуется подключение к сети интернет.

Журналировать действия пользователейПри отмеченной опции в Журнале событий (Настройки > Инструменты > Журнал событий) будет вестись журналирование действий над статическими страницами и разделами.Использовать редактор кода с подсветкой синтаксисаОпция позволяет включить режим подсветки синтаксиса в невизуальных режимах правки файлов Редактировать как текст и Редактировать как PHP. Также синтаксис будет подсвечивается на страницах Командная PHP-строка и SQL запрос ( Настройки > Инструменты ).Настройки для сайтовИспользовать индивидуальные настройки для каждого сайтаПри отмеченной опции для каждого из созданных в системе сайтов могут быть заданы индивидуальные Типы меню и Типы свойств.Настройки для сайтаВ выпадающем списке доступны все созданные в системе сайты. Выбор сайта доступен при отмеченной опции Использовать индивидуальные настройки для каждого сайта.Типы менюВ мини-форме указываются используемые на сайте типы меню и их описания.

Поле	Описание
Тип	Тип (мнемоническое имя) используемого на сайте меню. Обычно мнемонические имена типов меню назначаются, исходя из расположения меню на странице сайта (например, top, left и т.д.). Имя типа меню указывается латинскими буквами.
Название	Произвольное название (описание) типа меню.

Количество дополнительных параметров менюУказывается количество полей для задания значений параметров, обрабатываемых в шаблоне показа меню и влияющих на представление меню.Типы свойствВ мини-форме указываются свойства страниц сайта и их описания.

Поле	Описание
Тип	Тип (мнемоническое имя) свойства. Указывается латинскими буквами.
Название	Произвольное название (описание) свойства. Указанное название будет отображаться в форме задания значений свойств для папки или страницы.

Параметры поиска файловМаксимальный размер файлов по которым осуществляется поиск по содержимомуЗадается максимальный размер файлов, по которым будет осуществляться поиск по содержимому.Максимальное количество записей выводимых в результате поискаЗадается максимальное количество записей, которые будут выводиться в результате поиска. Для вывода неграниченного количества записей оставьте поле пустым.Время одного шага в многошаговом поиске файловЗадается время выполнения одного шага при многошаговом поиске в секундах. Используется при поиске большого количества файлов, тогда поиск будет происходить за несколько шагов. Результаты поиска будут выводиться в конце каждого шага.Значение поля «Имя файла или папки» в диалоге поиска файлов по умолчаниюУказывается значение поля «Имя файла или папки», которое будет отображаться по умолчанию в диалоге поиска файлов. Для удобства поиска по умолчанию поле содержит *.php.Параметры архивацииВремя одного шага при архивации (сек):Продолжительность каждого шага архивации.

Визуальный редактор

Закладка предназначена для настройки визуального HTML-редактора.

Поле	Описание
Использовать новый визуальный редактор	При отмеченной опции будет использоваться новый визуальный редактор.
Разрешить в визуальном HTML редакторе выводить стили без названий	При отмеченной опции при редактировании страницы с помощью визуального HTML-редактора будут выведены в списке доступных CSS стилей в том числе и те стили, для которых не заданы названия. Установить расширение и загрузить дополнительные словари можно с помощью ссылок Установка pSpell и Дополнительные словари.
Имя каталога для хранения пользовательских словарей	Необходимо указать путь к каталогу, хранящему пользовательские словари.
Использовать для каждого пользователя свой словарь	При отмеченной опции система будет запоминать настройки словаря отдельно для каждого пользователя.

Медиабиблиотека

Поле	Описание
Использовать медиабиблиотеку	При отмеченной опции станет доступным функционал Функционал Медиабиблиотеки: Размеры картинок предпросмотра в диалоговом окне медиабиблиотеки (Ш х В) Указывается ширина и высота картинок предпросмотра загруженных в медиабиблиотеку элементов. Другие разрешенные расширения медиафайлов (кроме перечисленных в типах медиабиблиотеки) В поле задаются расширения доступных медиафайлов. Максимальный размер загружаемых в медиабиблиотеку изображений (Ш х В) Указывается максимальная ширина и высота (в пикселях) загружаемых изображений в медиабиблиотеку. Использовать медиабиблиотеку по умолчанию при выборе медиафайлов При отмеченной опции по умолчанию при выборе медиафайлов будет использоваться медиабиблиотека. Медиабиблиотека, который позволяет создавать многоуровневую структуру коллекций элементов для дальнейшего использования загруженных элементов при редактировании страниц и инфоблоков. В меню административного раздела будет добавлен пункт Медиабиблиотека, где можно управлять коллекциями и элементами.
Типы содержимого медиабиблиотеки
Перечислены существующие типы содержимого медиабиблиотеки: Поле Описание Выводится название типа содержимого медиабиблиотеки. Для удаления выбранного типа содержимого медиабиблиотеки нажмите ссылку Удалить, а затем кнопку Сохранить. Название 2 Название типа содержимого медиабиблиотеки. *Символьный код 1 2 Символьный код типа содержимого медиабиблиотеки.. Список расширений файлов 1 Список расширений файлов, входящих в данный тип содержимого медиабиблиотеки. Описание Произвольное описание типа содержимого медиабиблиотеки. Кнопка Добавить позволяет создать свой тип содержимого. Доступ Закладка позволяет настроить права на доступ к модулю для всех имеющихся в системе групп пользователей. Данные группы используются при создании новых страниц или разделов из публичной части сайта, которые будут не видны другим пользователям, пока происходит формирование и наполнение контентом страницы или раздела. Права на просмотр таких страниц задаются опцией Ограничить доступ к странице (не публиковать), которая расположена в Мастере создания новой страницы/раздела. Для вызова мастера используйте кнопки Создать раздел или Создать страницу, расположенные в публичной части сайта.

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Источник

Изменяем пользовательский интерфейс коробочного Битрикс24

Всем привет!
Продолжаем учиться правильно кастомизировать Битрикс24

В изучении этой темы вам поможет исходный код примеров из статьи, а так же запись вебинара, на котором мы показали решения «в живую»:

Под катом подробная статья, слово коллегам из Интерволги:

[spoiler]

Отличие подходов к доработке Б24 и сайта на БУС

Считайте Битрикс24 сайтом, разработанным на БУС – платформа, технологии – те же. Битрикс24, как и любой другой сайт, включает шаблоны сайта, публичную часть (разделы и страницы), компоненты и шаблоны компонентов. Однако при установке обновлений публичная часть тоже обновляется. Поэтому публичную часть, шаблоны сайта и компонентов так же можно считать ядром Битрикс24.

Как известно, вносить изменения в ядро нельзя. В Битрикс24 это означает, что нельзя изменять не только файлы Bitrix Framework, но и публичную часть, шаблоны сайта и компонентов. Как минимум потому, что ваши изменения будут удалены при очередном обновлении.

С копированием шаблонов компонентов ситуация еще интереснее.

Во-первых, даже если вы скопировали шаблон в каталог local с тем же именем, что и оригинальный, система будет подключать его всегда, вне зависимости от обновлений. Это, как минимум, означает, что после очередного обновления клиент не увидит новых функций, а также не будут исправлены ошибки в этом шаблоне, если они есть. Но это не самое страшное.

Во-вторых, компоненты Б24 представляют собой целостную систему и их код написан исходя из предположения, что во всей системе используются оригинальные шаблоны. Это означает, что кастомизированные шаблоны не ожидаются системой. Кастомизированный шаблон может привести к информационной несовместимости с остальными частями системы и стать источником странных, трудноуловимых ошибок.

Контекстное меню сущности CRM в списке

Вкладка в карточке сущности CRM

Действие в ленте сущности CRM

Карточка звонка

Типы пользовательских полей
Также REST-приложения могут регистрировать собственные типы пользовательских полей. Они могут быть использованы везде, где есть возможность добавить такие поля.

Пример поля REST-приложения в карточке CRM. Просмотр:

Если вы посмотрите на код шаблона сайта (/bitrix/templates/bitrix24), то увидите некоторое количество вызовов ShowViewContent. Штатные компоненты системы используют эти отложенные области для встраивания своих элементов. Но и вы тоже можете добавлять свою верстку!

Важно! Это «недокументированная возможность». Названия областей могут измениться со временем без предупреждения.

В качестве примера добавим свою кнопку в строку заголовка [ пример на вебинаре ]. Следующий код можно запустить из init.php.

Кнопку мы создаем с помощью модуля UI-библотека (ui). Сначала подключаем расширения «стили кнопок» (ui.buttons) и «иконки для кнопок» (ui.buttons.icons) с помощью класса Extension главного модуля. После этого необходимые стили будут загружены браузером.

Саму кнопку «Отчет» формируем с помощью HTML. Она ничего не делает, цель — научиться встраивать элементы.

У нас получится следующее:

3. Типы пользовательских полей

Можно использовать возможность типов пользовательских полей встраивания в карточки сущностей. Не обязательно делать настоящее поле, можно вывести свою верстку.

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

Чтобы создать свой тип пользовательского поля в коробке, необходимо объявить класс этого поля и зарегистрировать его в системе с помощью события OnUserTypeBuildList [ пример на вебинаре ]

Наследовать класс своего поля от класса другого поля может быть удобно, однако вы рискуете получить неправильную форму наследования. Поэтому, рекомендуется наследовать свой класс от TypeBase — базового класса всех типов пользовательских полей.

Важно определить константу USER_TYPE_ID (именно с таким именем). Она используется системой для различения типов полей.

Метод GetUserTypeDescription должен возвращать описание поля для системы: ID типа поля, класс-обработчик поля, название в интерфейсе управления пользовательскими полями, методы визуализации поля. Этот метод должен являться обработчиком события OnUserTypeBuildList.

Метод GetDBColumnType используется при создании поля нашего типа в какой-либо сущности. Он возвращает физический тип данных для СУБД.

Нас интересуют методы GetPublicView и GetPublicEdit. С помощью них происходит визуализация поля в карточках сущностей в публичной части. Они оба должны возвращать HTML. Выведем кнопки разных цветов с помощью модуля ui.

Помните, что некоторые карточки сущностей не отображают поле в режиме просмотра, если оно не заполнено. Чтобы быть уверенным, что при сохранении данных поле оказалось заполненным, в методе GetPublicEdit также выводится скрытый input.

Обратите внимание, что CJSCore автоматически передает на клиент необходимые языковые строки в зависимости от текущего языка. Получить к ним доступ можно с помощью JS-функции BX.message.

Перезагрузите страницу, откройте панель инструментов разработчика в браузере и выполните следующий JS-код в консоли:

Вы должны увидеть приветственное сообщение.

Важно! Весь JS-код, добавленный с помощью классов CJSCore, Asset или функций AddHeadScript, SetAdditionalCSS, будет объединен в один файл, если это включено в настройках главного модуля. При этом удаление вызова CJSCore::Init не приведет к удалению вашего кода из файла с объединенным кодом. Это значит, что вы не можете управлять загрузкой вашего кода на сторону клиента путем вызова или не вызова CJSCore::Init. Следует применять другой подход.

В custom_stuff.js следует лишь объявить все необходимые функции и классы, которые вам понадобятся для решения задачи (например, «добавить кнопку», «показать диалог подтверждения»).

Если же необходим запуск каких либо функций при загрузке страницы, то следует добавить на страницу еще один небольшой скрипт, который это сделает. Добавить этот скрипт можно с помощью метода Asset::addString (на замену AddHeadString). Он не будет объединен с другим JS-кодом, таким образом, вы можете контролировать запуск кода из custom_stuff.js со стороны сервера.

Например, чтобы метод helloWorld автоматически вызывался после загрузки каждой страницы, нужно сделать следующее:

Теперь рассмотрим несколько примеров.

Пример 1. Кнопка «поблагодарить сотрудника» на странице профиля
[ пример на вебинаре ]

На странице профиля есть небольшой блок действий. Добавим в него пункт «Поблагодарить сотрудника», вот сюда

Для начала добавим в custom_stuff.js функцию, которая создает кнопку.

Здесь узел, представляющий кнопку, создается с помощью функции BX.create (тег a с соответствующим текстом). Также к нему сразу привязывается обработчик клика.

С помощью функции BX.findChildByClassName выполняется поиск узла DOM-дерева — блока действий на странице профиля, а, затем, в нем выполняется поиск контейнера (группы действий). Мы берем первый найденный контейнер и добавляем в него созданную кнопку с помощью метода appendChild.

Теперь добавим вызов написанной функции на странице профиля.

Здесь мы получаем шаблон пути (ЧПУ) к странице профиля из настроек модуля «Интранет» с помощью Option::get, а затем проверяем соответствие текущего URL данному шаблону с помощью CComponentEngine::parseComponentPath.

Посмотрим, что получилось.

Теперь реализуем обработчик клика по этому пункту. Выведем всплывающее окно с полем ввода текста.

На случай двойного клика по нашей кнопке мы убеждаемся, что нет открытых всплывающих окон (если есть — закрываем и уничтожаем). Затем создаем новое окно и выводим его.

Про параметры всплывающего окна можно узнать из записи вебинара.

Посмотрим, что получилось.

На событие клика по кнопке «Отправить начальнику» запускается функция helloWorld. При выполнении реальной задачи, вы, например, могли бы сделать AJAX-запрос, который выполняет настоящую отправку сообщения.

Пример 2. Создание документа на диске из шаблона
[ пример на вебинаре ]

При нажатии на кнопку «Создать документ» в диске появляется окно, в котором можно выбрать, создать документ на компьютере или в облачном сервисе. Добавим в это окно выбор шаблона документа.

В данном случае мы не можем добавить нужную верстку сразу после загрузки страницы, т. к. всплывающее окно появляется в DOM-дереве в момент его открытия. В этом случае мы можем проверить, существуют ли какие-нибудь события, связанные с открытием этого окна.

Выполните в консоли браузера следующий код.

Теперь нажмите кнопку «Создать документ». В консоли браузера должно появиться следующее.

Значит, существуют события, связанные со всплывающим окном, одним из которых мы воспользуемся.

На самом деле фрагмент DOM-дерева для всплывающего окна будет готов уже к моменту onPopupWindowIsInitialized. В целях демонстрации мы подпишемся на событие onAfterPopupShow, чтобы добавить верстку для выбора шаблона.

Создадим функцию в custom_stuff.js, которая регистрирует обработчик события onAfterPopupShow с помощью функции BX.addCustomEvent.

Обратите внимание, что обработчик события onAfterPopupShow будет вызываться при каждом открытии любого всплывающего окна. Поэтому в самом начале мы проверяем, обрабатываем ли мы открытие окна создания документа или нет. Узнать ID всплывающего окна можно из лога событий.

На этот раз HTML-код выбора шаблона довольно объемный. Получим его с сервера с помощью AJAX. Мы используем функцию BX.ajax.get, чтобы выполнить запрос.

Важно! Не забывайте передавать параметр sessid и проверять его в обработчике запроса. Это необходимо для предотвращения некоторых атак.

Полученный код добавим во всплывающее окно. Ссылка на узел DOM-дерева хранится в поле contentContainer объекта всплывающего окна.

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

Осталось сделать запускающий скрипт. Поскольку код на клиенте проверяет, открывается ли окно создания документа или другое. Значит мы можем подписываться на событие открытия окна на любой странице. Поэтому просто будем выполнять следующий код на каждом хите.

Теперь при открытии окна создания документа выводится список шаблонов.

Пример 3. Дополнительные поля в карточках ранней версии канбана
[ пример на вебинаре ]

Не так давно данный пример стал устаревшим, т. к. в канбане появились события. Тем не менее, описываемый подход полезно рассмотреть, на случай, если вы попадете в ситуацию, когда части страницы строятся динамически, а событий, за которые можно «зацепиться» нет. Например, при доработке свежей функциональности.

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

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

Реализуем функцию, которая выполняется через равные промежутки времени и проверяет наличие нужного нам элемента в DOM-дереве.

Таким образом, когда сетка канбана появится на странице, будет выполнена функция CustomStuff.addHelloWorldToKanban.

Существует и другой метод ожидания элемента DOM-дерева: с помощью MutationObserver.

Теперь реализуем функцию, которая добавит «Hello World!» в каждую карточку.

Функцию CustomStuff.extendKanbanOnFirstLoad будем вызывать, когда открывается любая страница раздела канбана лидов.

Посмотрим, что получилось.

Также нужно учитывать, что канбан имеет свойство обновлять свое состояние при изменениях на сервере. Например, при добавлении нового лида, его карточка появится без перезагрузки страницы. Чтобы дополнительные поля появились и в ней, момент ее добавления также придется обработать тем или иным образом.

Пример 4. Подтверждение на получение публичной ссылки в диске
[ пример на вебинаре ]

Существуют задачи, которые предыдущим способом делать либо дорого, либо вообще не возможно.

JS — особенный язык В нем позволяется заменить любую функцию или метод на свою реализацию.

Например, в контекстном меню объекта диска есть пункт «Получить публичную ссылку». Никаких событий при этом не происходит. Рассмотрим обработчик события клика по этому пункту меню.

Видим, что у некоторого объекта вызывается метод openExternalLinkDetailSettingsWithEditing, который создает публичную ссылку и показывает ее во всплывающем окне. Мы хотим запросить подтверждение на получение ссылки перед тем, как она будет показана. Для этого нам не надо знать реализацию метода получения ссылки. Мы заменим оригинальный метод на свой, который будет сначала запрашивать подтверждение, а потом просто вызывать оригинал.

Прежде всего нам нужно узнать, к какому классу относится метод и какая у него сигнатура.

Название класса поможет узнать следующий код, который нужно выполнить в консоли.

Далее можно сделать поиск по коду и узнать, что полное имя класса (с пространством имен) будет BX.Disk.FolderListClass. Ну или интуицию включить

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

Посмотрим, что получилось.

Теперь, если нажать на этот пункт меню, появится всплывающее окно для подтверждения. Публичная ссылка появится только если нажать «Да».

Бонус: работа с боковой панелью-слайдером
[ пример на вебинаре ]

В последнее время все чаще используется панель-слайдер в интерфейсе КП. Например, при создании задачи, открытии карточки CRM и т. п.

Дело в том, что клик по кнопке, которая открывает слайдер, обрабатывается не на этапе всплытия, а на этапе перехвата, при чем на элементе html. Это значит, что если понадобится выполнить какой-то код перед открытием слайдера, обработчик клика уже не подойдет.

В данном примере мы сделаем окно с подтверждением при создании новой группы соц. сети.

Открытие страницы в слайдере сопровождается событием, на которое мы подпишем свой обработчик и воспользуемся функцией отмены открытия страницы.

Определить, что в данный момент открывается именно страница создания группы можно только по URL. Далее, используем event.denyAction(), чтобы остановить открытие страницы в слайдере и вызываем окно подтверждения. Когда согласие будет получено, еще раз запускаем открытие страницы в слайдере с помощью BX.SidePanel.Instance.open(. ), но на этот раз не останавливаем открытие.

Код всплывающего окна почти не отличается от предыдущего примера.

Теперь при нажатии кнопки «Создать» на странице групп, сначала появляется такое окно.

Также, иногда бывает полезно узнать, открывается ли текущая страница в слайдере или нет. В этом случае достаточно посмотреть на параметр запроса IFRAME. Он будет равен Y, если страница открывается в слайдере.

Кстати, да, в слайдерах находится iframe, в котором и открываются все страницы.

Источник