если в коде шаблона сайта используется функция setadditionalcss это означает что

Разработчик Bitrix Framework. Интеграция дизайна. Часть 1

1. Где определяется набор свойств для страниц и разделов сайта?

+ на странице настроек модуля Управление структурой
— в шаблоне сайта
— на странице настроек соответствующего сайта
— на странице настроек Главного модуля

2. Какое зарезервированное в системе свойство используется для задания заголовка окна веб-браузера?

— page_title
— SetTitle()
+ title
— description

3. Карта сайта строится на основе:

— содержимого файла sitemap.php
+ меню, используемых в системе
— элементов специального инфоблока

4. Какой (какие) из перечисленных ниже типов свойств по умолчанию используется для управления метаданными страниц?

— любой из перечисленных
— dir_keywords
+ keywords
— page_keywords
— page_keywords или dir_keywords

5. Где выполняется настройка кодировки для административного раздела сайта?

— на странице настроек модуля Управление структурой
— на странице настроек Главного модуля
— на странице настроек сайта (отдельно для каждого сайта)
+ в форме настроек языка (отдельно для каждого языка интерфейса)
— в форме настроек свойств корневого каталога сайта

6. Расположение включаемых областей для раздела или страницы определяется:

— параметрами раздела сайта
— контентом страницы
+ шаблоном дизайна сайта
— свойствами страницы

7. Основная работа по интеграции выполняется с файлами директории:

+ /bitrix/templates/
— /bitrix/tools/
— /bitrix/modules/
— /bitrix/

8. На отображение каких данных будет влиять формат даты и времени, заданный в настройках языка?

— на отображение даты и времени как в публичном, так и в административном разделе для конкретного языка
— на отображение даты и времени в публичном разделе сайта (для сайта на данном языке)
— на отображение даты и времени в административном разделе сайта (для всех языков)
+ на отображение даты и времени в административном разделе сайта (для конкретного языка интерфейса)
— на отображение даты и времени в публичном разделе сайта (для всех сайтов системы)

9. Основные таблицы каскадных стилей (CSS) подключаются в шаблоне сайта:

— в области с помощью функции ShowCSS()
— в рабочей области страницы с помощью функции ShowCSS()
— в рабочей области страницы с помощью функции SetAdditionalCSS()
+ в области с помощью функции ShowCSS()

10. API функция ShowTitle() используется для:

+ вывода заголовка страницы или окна веб-браузера
— для вывода заголовка страницы
— задания значения заголовка страницы
— задания значения заголовка окна веб-браузера

11. Где хранятся и для чего используются названия каскадных стилей (CSS)?

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

13. Где выполняется настройка кодировки для публичного раздела сайта?

— в форме настроек языка (отдельно для каждого языка)
— на странице настроек модуля Управление структурой
— в форме настроек свойств корневого каталога сайта
— на странице настроек Главного модуля
+ на странице настроек сайта (отдельно для каждого сайта)

14. Внешнее представление сайта в первую очередь определяется:

— контентом
+ шаблоном дизайна
— доменным именем
— языком интерфейса

15. Таблицы каскадных стилей (CSS), используемые для конкретного шаблона сайта хранятся:

+ /bitrix/templates/.default/page_templates/
+ /bitrix/templates/ /page_templates/
— /bitrix/templates/ /
— /bitrix/templates/ /components/page_templates/
— /bitrix/template/ /page_templates/

17. При загрузке по умолчанию шаблон дизайна сайта будет распакован и помещен в папку с именем, соответствующим имени загружаемого файла по следующему пути:

— /bitrix/site/templates/ /
— /bitrix/template/ /
+ /bitrix/templates/ /
— /bitrix/site/ /

18. API функция SetPageProperty() используется для:

— добавления значений метаданных в код страницы
— создания свойств страницы
— управления набором свойств, доступных для данной страницы
+ задания значений свойств страницы

19. Если PHP функция ShowTitle() используется с параметром false, то:

— заголовок окна веб-браузера не будет задан
+ в качестве заголовка окна веб-браузера будет использован заголовок страницы
— заголовок страницы не будет выводится
— в качестве заголовка окна веб-браузера будет использовано значение свойства title
— заголовок окна веб-браузера и страницы будет не задан

20. Если в коде шаблона сайта используется функция SetAdditionalСSS(), это означает:

— для текущей страницы сайта будут созданы собственные таблицы каскадных стилей (CSS)
— подключение основных каскадных стилей (CSS) будет выполнено без использования функции require()
— подключение дополнительных каскадных стилей (CSS) будет выполнено без использования функции require()
+ выполняется подключение дополнительных каскадных стилей (CSS)

21. Константа LANG_CHARSET используется для:

— установки кодировки в публичном и административном разделах сайта
— установки кодировки в административном разделе сайта
+ установки кодировки в шаблонах для публичного раздела сайта

22. В отношении дизайна сайта предусмотренный в системе механизм проверки прав доступа может быть использован в целях:

+ управления шаблоном сайта
+ управление отдельными элементами сайта
— управления структурой сайта
+ управления шаблоном меню
+ управления показом пунктов меню
— управления правами пользователей
+ управления элементами шаблона дизайна

23. API функция ShowMeta() используется для:

+ добавления значений метаданных в код страницы
— создания свойств страницы или раздела
— управления набором свойств (метаданных), доступных для страниц данного раздела
— задания значений свойств раздела или страницы

Источник

Если в коде шаблона сайта используется функция setadditionalcss это означает что

Битрикс. Правильное подключение файлов js и css в шаблоне

В данной статье мы рассмотрим как правильно подключать дополнительные файлы стилей и скрипты в шаблон сайта, чтобы корректно работа настройка сжатия файлов js и css.

Прямое подключение дополнительных файлов не рекомендуется

С появлением ядра D7 можно подключать так

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

Подключение js и css а шаблоне компонента

Для правильного подключения дополнительных файлов, подключаем их из шаблона компонента, а не прописывает в шаблон сайта.

В шаблоне компонента прописываем

Данные файлы тогда правильно объединятся с остальными.

Заполните форму

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

Продолжая использовать этот сайт, Вы принимаете условия политики конфиденциальности и даёте согласие на обработку пользовательских данных (файлов cookie), в том числе с использованием систем аналитики «Яндекс. Метрика» и «Google Analytics», (IP-адрес; версия ОС; версия веб-браузера; сведения об устройстве (тип, производитель, модель); разрешение экрана и количество цветов экрана; наличие программного обеспечения для блокирования рекламы; наличие Cookies; наличие JavaScript; язык ОС и Браузера; время, проведенное на сайте; глубина просмотра; действия пользователя на сайте; географические данные) в целях определения посещаемости сайта. Отказаться от обработки пользовательских данных и использования «cookie» можно, выбрав соответствующие настройки в браузере. Однако это может повлиять на работу некоторых функций сайта. Скрыть

Источник

Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки

Введение

Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.

В предыдущей части Хабраюзер Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.

Для данной статьи мы воспользуемся одним из форков репозитория на GitHub, приведённого в конце предыдущей статьи, поскольку в нём были исправлены некоторые баги.

Создание каркаса шаблона

Шаблон сайта с точки зрения 1С-Битрикс – это папка с набором определённых файлов внутри, поэтому шаблон может быть создан как через файловую структуру (инструментами 1С-Битрикс, по FTP или SSH), так и с помощью раздела.

(это будет пример рабочей страницы на котором мы будем проверять работоспособность нашей рабочей области) в котором помимо Html разметки мы добавим вызов header’а и footer’а (они создадутся автоматически, если создавать страницу средствами 1С-Битрикс):

Элементы 1С-Битрикс

Фактически мы создали статичный HTML каркас с минимальным набором элементов 1С-Битрикс, который уже работает.
Дальнейшая наша задача – перевод отдельных функциональных блоков на работу с компонентами 1С-Битрикс.

Компоненты 1С-Битрикс

В рамках данной статьи мы остановимся только на процессе интеграции вёрстки со стандартными компонентами 1С-Битрикс. Мы не будем создавать свои компоненты и не будем кастомизировать типовые.

Мы создадим отдельную страницу (например, 1.php) на которой будем размещать по 1 компоненту для упрощения работы средствами 1С-Битрикс.

Разместим компонента (например, форму поиска — bitrix:search.form) с помощью визуального редактора:

Используя включенный режим правки скопируем шаблон компонента в шаблон сайта. Для этого наведём курсор мыши на область с компонентом, дождёмся пока появится контекстное меню с шестерёнкой и нажмём на стрелку выпадающего списка:

В появившемся диалоге нам необходимо указать имя шаблона компонента и выбрать шаблон сайта в котором будет хранится шаблон компонента (в нашем случае это whitesquare-bootstrap):

В результате наших действий в Шаблоне компонента /bitrix/templates/whitesquare-bootstrap/ появилась ещё одна папка – components – в ней будут находиться шаблоны всех компонентов, используемых в рамках шаблона сайта.
Первый появившийся шаблон компонента будет расположен по адресу /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/
Опытные разработчики могут сразу создавать шаблон компонента, копируя его в шаблон сайта из компонента.

Иногда для дальнейшей работы больше подходит один из шаблонов компонента, поставляемых вместе с системой. Тогда имеет смысл посмотреть каждый из них в работе. Это можно сделать в визуальном редакторе по нажатию на кнопку шестерёнки:

Включаемые области (лого, копирайт, соц сети)

Компонент включаемой области позволяет вложить внутрь себя любой текст, HTML или php код, а так же другие компоненты и вывести этот контент для определённой страницы, раздела или везде, где вызывается включаемая область.
Для всех указанных выше объектов мы считаем рациональным использование включаемой области с целью вынести эти блоки из шаблона. Т.е. для их редактирования по прежнему необходимо будет владеть минимумом познаний в HTML.
Профессионалы могут возразить, что для блока с кнопками соц сетей следовало бы сделать свой компонент, однако нам это кажется не рациональным. Проще загнать этот блок за 10 минут во включаемую область и отредактировать при необходимости, ведь адрес сообщества Facebook не меняется каждый день!

Внутри файла включаемой области просто помещаем кусок HTML кода:

Мы не будем в данной статье рассматривать вопрос интеграции Twitter Ленты, поскольку самое простое решение – положить виджет твиттера во включаемую область, аналогично описанным выше решениям.
Так же в Marketplace 1С-Битрикс хватает компонентов, выводящих твиттер ленту, которыми вы так же можете воспользоваться.

Форма поиска

Мы воспользовались компонентом bitrix:search.form и скопировали suggest шаблон компонента в шаблон сайта.
HTML код шаблона компонента находится в файле /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php

Как видим, у нас не простой, а комплексный компонент (т.е. компонент в состав которого входят другие компоненты). В данном случае это сама форма в которую производится ввод поискового запроса.
Скопируем её шаблон в шаблон сайта.
К сожалению, это не очень красиво – в публичке мы используем 1 компонент, а шаблонов у нас 2. Воспользуемся обычной схемой для комплексных компонентов:

Комплексный компонент

Вернёмся к форме поиска

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

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

Верхнее меню

Теперь заменим блок верхнего меню в шаблоне на вызов компонента меню:

Левое меню

Заменим блок левого меню в шаблоне вызовом компонента:

Нижнее меню

Нижнее меню (в разделе SiteMap) отображается в 2 колонки. Можно конечно сделать универсальный компонент меню в шаблоне которого пункты будут делиться по столбцам (автоматически, либо по наличию какого-либо параметра, установленного для пунктов в режиме расширенного редактирования меню).
Однако, мы понимаем, что подвал – не самая часто редактируемая часть и нет смысла тратить значительные усилия на его разработку.
Поэтому мы пойдём по простому пути (за который любители идеального кода, вероятно, нас проклянут) – мы создадим 2 меню: bottomL и bottomR.
Несмотря на то, что меню будет 2 шаблон мы для них будем использовать 1.

Сайдбар – наши офисы

Теперь можно поместить вызов компонента сайдбара в шаблон сайта (если он должен выводиться на всём сайте, а лишь в определённых разделах, то достаточно обернуть его во включаемую область):

Теперь пришла пора взяться за рабочую область!

Список членов команды

Не забудем добавить значения в языковые файлы!

Сам шаблон тогда будет выглядеть так:

Мы не стали заморачиваться с выносом кода свойства в параметры, а так же с настройкой количества элементов в строке, чтобы не усложнять шаблон компонента.
Как видите, в нём практически ничего не осталось от первоначального шаблона списка новостей (и он гораздо легче громоздкого компонента каталога).

Не забудьте удалить ненужную более папку /bitrix/templates/whitesquare-bootstrap/images/team/ с картинками в шаблоне после перевода блока с персонами на инфоблок!

Текст страницы ABOUT

Поскольку у нас нет понимания какие функции выполняют остальные элементы страницы, должна ли появляться случайная цитата или, скажем, должны ли картинки вести в фотогалерею, мы пойдём по простому пути.
Весь контент останется статичным, мы лишь добавим несколько стилей, чтобы будущие редакторы могли работать со страницей с большим удобством.
Для этого воспользуемся файлом стилей сайта, приложенном к нашему шаблону /bitrix/templates/whitesquare-bootstrap/styles.css (или административным разделом):
Поскольку этот файл используется для применения CSS к контенту в том числе в визуальном редакторе, нам придётся «забыть» о каскадности CSS и прописать стили без учёта вложенности элементов.
Например, цитата станет выглядеть так:

Или через инструмент редактирования шаблона (вкладка «стили сайта»):

Наводим марафет

Вот собственно и всё!

Мы натянули готовую HTML вёрстку Bootstrap на 1С-Битрикс, сверстали страницу и получили полноценный шаблон!

Источник

Олег Постоев (Все сообщения пользователя)

. /bitrix/admin/stat_list.php?lang=ru

Создал субдомен на хостинге. В директории рядом с public_html есть папка cgi-bin.

В cgi-bin находится файл «php» с таким содержимым:

P.S. Нужно все это для mbstring.func_overload и mbstring.internal_encoding

нормальные пути для хранения кастомных стилей и скриптов?

Если их и размещать, то либо в папке с вашим шаблоном сайта или компонента, либо в корне «SITE_DIR/css/», «SITE_DIR/js».

Ну и проверку/оптимизацию БД сделать стоит

Всегда считал, что на такой странице нужно размещать компонент регистрации, но здесь его нет, как так?
То есть, незарегистрированные пользователи на этой странице видят форму регистрации! Но где она?

Вроде, не сложно.
Еще можно на стороне JS сделать проверку, находится ли курсор мыши области страницы, на случай, если посетитель переключил вкладку.

После submit’a эта функция ничего не возвращает. То есть компонент вызванный AJAX-ом в шаблоне не отдает инлайновый скрипт.

Получается, что скрипт генерируется по следующей цепочке:

Источник

Изменяем пользовательский интерфейс коробочного Битрикс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, в котором и открываются все страницы.

Источник