Главная › Информация › 35 ›

Как создать страницу битрикс 24

Как создать страницу битрикс 24

Для начала необходимо определить структуру страницы: используется ли компонентная архитектура или предпочтительнее простая PHP-вставка. В коробочной версии удобнее создавать страницу в каталоге /local/components/ с регистрацией компонента в init.php. В облачной версии потребуется использовать REST API и размещать интерфейс на внешнем сервере, подключая его через iframe в раздел «Приложения».

Рекомендуется: избегать прямого подключения файлов ядра Битрикс; использовать CMain::IncludeComponent() или шаблоны компонентов для загрузки контента; ограничивать доступ к странице через check_permission() или аналогичный механизм.

Если требуется интеграция с данными CRM, задачи или списками, используйте REST API с авторизацией через OAuth 2.0. Для работы с пользовательскими полями применяйте методы crm.deal.userfield.list и crm.deal.userfield.get. Отображение динамического контента удобно реализовать через JavaScript-фреймворки с AJAX-запросами к бекенду.

Отдельное внимание следует уделить безопасности: фильтрация входящих данных, CSRF-защита, проверка прав доступа. Также важно учитывать ограничения по CORS при работе с внешними ресурсами и iframe-интеграцией в облаке.

Подключение собственного компонента через структуру local

Подключение собственного компонента через структуру local

Создайте папку /local/components, если она отсутствует. Это альтернативное расположение компонентов, не затрагивающее ядро продукта.

Внутри /local/components создайте директорию с уникальным названием разработчика, например mycompany. В ней создайте папку компонента, например custom.page.

Структура должна выглядеть так:

/local/components/mycompany/custom.page/

Внутри этой папки создайте файл component.php и каталог templates/.default/. В component.php реализуется основная логика:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
$arResult["TEXT"] = "Контент компонента";
$this->IncludeComponentTemplate();
?>

В файле template.php внутри templates/.default/ добавьте HTML-разметку:

<?php if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?>
<div><?= $arResult["TEXT"] ?></div>

Для подключения компонента на пользовательской странице вызовите его так:

<?$APPLICATION->IncludeComponent(
"mycompany:custom.page",
"",
[],
false
);?>

Компоненты из /local/components не требуют регистрации и доступны сразу после размещения. Это упрощает разработку и обновление без риска потерять изменения при обновлении ядра.

Создание шаблона страницы с использованием ядра D7

Создание шаблона страницы с использованием ядра D7

Шаблон страницы в Битрикс24 на ядре D7 создаётся в рамках собственного компонента. Вначале необходимо зарегистрировать модуль, если он ещё не создан. Пример структуры:

/bitrix/modules/vendor.module/

/local/components/vendor/custom.page/

Создайте компонент с обязательными файлами: class.php, component.php, templates/.default/template.php. В файле class.php используйте пространство имён и наследование от \CBitrixComponent:

namespace Vendor\Component;
use CBitrixComponent;
class CustomPageComponent extends CBitrixComponent
{
public function executeComponent()
{
$this->includeComponentTemplate();
}
}

В component.php подключите автозагрузку:

if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
use Bitrix\Main\Loader;
Loader::includeModule('vendor.module');
$component = new \Vendor\Component\CustomPageComponent($this);
$component->executeComponent();

Файл шаблона template.php содержит HTML и обращение к данным. Если нужно получить параметры из URL, используйте \Bitrix\Main\Application::getInstance()->getContext()->getRequest(). Для подключения CSS и JS используйте Asset::getInstance()->addCss() и addJs() из \Bitrix\Main\Page\Asset.

use Bitrix\Iblock\ElementTable;
$result = ElementTable::getList([
'select' => ['ID', 'NAME'],
'filter' => ['IBLOCK_ID' => 10, 'ACTIVE' => 'Y'],
]);
while ($item = $result->fetch()) {
echo '<div>' . htmlspecialcharsbx($item['NAME']) . '</div>';
}

Для подключения компонента в шаблоне сайта используйте:

<?php
$APPLICATION->IncludeComponent(
"vendor:custom.page",
"",
[],
false
);
?>

Разметку шаблона можно адаптировать под любой дизайн, включая загрузку AJAX через initComponentTemplate() и includeComponentTemplate() в зависимости от условий. Использование ядра D7 позволяет обойтись без глобальных переменных и использовать типизированные методы.

Регистрация пользовательского маршрута в init.php

Регистрация пользовательского маршрута в init.php

Для подключения маршрута, обрабатывающего пользовательский URL, необходимо отредактировать файл /bitrix/php_interface/init.php. Этот файл выполняется при каждом хите и подходит для регистрации обработчиков событий и пользовательских правил маршрутизации.

Добавьте следующий код в init.php:


AddEventHandler("main", "OnBeforeProlog", function() {
if ($_SERVER["REQUEST_URI"] === "/custom-page/") {
define("CUSTOM_PAGE", true);
include_once($_SERVER["DOCUMENT_ROOT"] . "/local/php_interface/custom_page.php");
die();
}
});

Путь /custom-page/ – это пользовательский URL, который будет перехвачен до выполнения основного ядра. Файл custom_page.php должен находиться в /local/php_interface/ или в другом подключаемом месте. Использование die() необходимо для предотвращения дальнейшей обработки страницы Битриксом.

Если требуется поддержка ЧПУ с параметрами, используйте регулярные выражения:


AddEventHandler("main", "OnBeforeProlog", function() {
if (preg_match("#^/custom-page/([0-9]+)/?$#", $_SERVER["REQUEST_URI"], $matches)) {
$_GET["ID"] = $matches[1];
define("CUSTOM_PAGE", true);
include_once($_SERVER["DOCUMENT_ROOT"] . "/local/php_interface/custom_page.php");
die();
}
});

Такой подход позволяет извлекать параметры из URL и передавать их в скрипт без использования стандартных компонент. Обработка маршрутов через init.php применима в случаях, когда не используются ЧПУ-компоненты и необходимо точечное управление URL-структурой.

Получение данных из пользовательского списка через ORM

Для работы с пользовательскими списками в Битрикс24 через ORM используется пространство имён Bitrix\Lists и модуль lists. Сначала необходимо определить идентификаторы инфоблока и поля, с которым предстоит работать.

  • Убедитесь, что модуль lists подключён: \Bitrix\Main\Loader::includeModule('lists');
  • Определите ID нужного списка (инфоблока) и убедитесь, что он доступен.

Для получения данных используется ORM-интерфейс инфоблоков. Название ORM-класса формируется по шаблону: Bitrix\Iblock\Elements\Element[КодИнфоблока]Table.

Пример получения записей из пользовательского списка:

use Bitrix\Iblock\Elements\ElementCustomListTable;
$result = ElementCustomListTable::getList([
'select' => ['ID', 'NAME', 'PROPERTY_CUSTOM_FIELD'],
'filter' => ['ACTIVE' => 'Y'],
'order' => ['ID' => 'ASC'],
]);
while ($row = $result->fetch()) {
// Обработка результата
}

Если ORM-класс не создан автоматически, его можно сгенерировать вручную через bitrix:main.entity.generator или определить структуру вручную, используя Bitrix\Main\ORM\Data\DataManager.

Для получения значений полей типа «привязка к элементу» или «список» потребуется дополнительно использовать методы \CIBlockPropertyEnum::GetByID или ORM-запросы к связанным таблицам.

  1. Проверяйте типы полей перед выборкой.
  2. Используйте кэширование при работе с большими выборками.
  3. Избегайте вложенных запросов, если можно использовать runtime поля.

Обновление данных также возможно через ORM-класс:

ElementCustomListTable::update($id, [
'PROPERTY_VALUES' => [
'CUSTOM_FIELD' => 'Новое значение',
],
]);

Для удаления используйте метод delete() по ID элемента.

Использование UI компонентов Битрикс24 на собственной странице

Использование UI компонентов Битрикс24 на собственной странице

Для подключения UI компонентов Битрикс24 необходимо использовать пространство имён BX и библиотеку UI. Пример подключения:

BX.loadScript([‘/bitrix/js/ui/vue/vue2.min.js’]);
BX.loadScript([‘/bitrix/js/ui/buttons/ui.buttons.min.js’]);
BX.loadCSS(‘/bitrix/js/ui/buttons/ui.buttons.min.css’);

Для вставки кнопки из UI-библиотеки можно использовать следующий код:

new BX.UI.Button({

  text: ‘Отправить’,

  color: BX.UI.Button.Color.PRIMARY,

  onclick: function () {

    console.log(‘Кнопка нажата’);

  }

}).renderTo(document.getElementById(‘my-button-container’));

Все UI-компоненты требуют предварительной инициализации ядра:

BX.ready(function() {

  BX.UI.Hint.init(document.body);

});

Для использования Vue-компонентов из набора UI нужно подключить Vue2 и использовать компонент через BX.Vue.create:

BX.Vue.create({

  el: ‘#vue-app’,

  data: { message: ‘Пример компонента’ },

  template: ‘<div>{{ message }}</div>’

});

Чтобы исключить конфликты с другими библиотеками, размещайте кастомные скрипты после полной загрузки DOM и использования BX.ready. Не забывайте про проверку наличия нужных модулей в системе через \Bitrix\Main\Loader::includeModule.

Контейнеры, в которые рендерятся UI-компоненты, должны быть заранее размещены в верстке с уникальными идентификаторами.

Настройка доступа к пользовательской странице через .access.php

Настройка доступа к пользовательской странице через .access.php

Файл .access.php отвечает за управление правами доступа к пользовательским страницам в Битрикс24. Он должен находиться в директории пользовательского раздела и содержать массив с описанием ролей и групп, которым разрешён доступ.

  1. Создание файла .access.php
    • В корне папки пользовательской страницы создайте файл .access.php.
    • Формат файла – PHP-массив, возвращающий список групп и их прав.
  2. Структура массива
    • Ключи массива – уникальные идентификаторы групп (например, ‘admin’, ’employees’).
    • Значения – описание и права доступа в виде вложенного массива.
    • Пример минимального варианта:
    <?php
return [
'admin' => [
'title' => 'Администраторы',
'access' => ['view', 'edit', 'delete']
],
'employees' => [
'title' => 'Сотрудники',
'access' => ['view']
],
];
  3. Определение прав
    • 'view' – просмотр страницы.
    • 'edit' – возможность редактирования содержимого.
    • 'delete' – удаление данных.
  4. Подключение прав к странице
    • Система автоматически проверяет .access.php при загрузке страницы.
    • В PHP-коде пользовательской страницы можно получить текущую группу пользователя через API Битрикс24 и сверить с массивом прав.
  5. Рекомендации по безопасности
    • Не храните в .access.php данные с паролями или чувствительной информацией.
    • Регулярно обновляйте список групп и прав при изменении организационной структуры.
    • Проверяйте доступ при каждом запросе, чтобы избежать обхода прав через прямой URL.

Использование .access.php упрощает настройку разграничения доступа и помогает систематизировать права пользователей на уровне файловой структуры проекта.

Добавление страницы в левое меню интерфейса

Для интеграции пользовательской страницы в левое меню Битрикс24 необходимо использовать REST API и метод placement. Первым шагом создайте приложение через Разработчик > Приложения в вашем портале.

В манифесте приложения укажите раздел placements с параметром left_menu, задав уникальный идентификатор и название пункта меню, которое будет отображаться в интерфейсе.

Пример записи в манифесте:

«placements»: {«left_menu»: {«menu_id»: «custom_page», «text»: «Моя страница»}}

URL страницы указывается в параметре page_url, где должна размещаться ваша веб-страница. Адрес должен быть доступен по HTTPS и поддерживать авторизацию через OAuth токен.

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

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

Отладка и логирование при разработке пользовательских страниц

Отладка и логирование при разработке пользовательских страниц

Для отладки пользовательских страниц в Битрикс24 рекомендуется использовать встроенные инструменты разработчика браузера, такие как консоль JavaScript и инспектор элементов. Важно проверять ошибки скриптов и загруженные ресурсы непосредственно в момент разработки.

Для серверной части полезно применять функцию AddMessage2Log() – она записывает данные в системный журнал, что помогает отслеживать значения переменных и выполнение логики. Логирование нужно организовывать на ключевых этапах обработки данных, особенно при взаимодействии с API и базой данных.

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

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

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

Вопрос-ответ:

Как создать новую пользовательскую страницу в Битрикс24?

Для создания пользовательской страницы в Битрикс24 нужно зайти в раздел «Приложения» или «Веб-портал» (в зависимости от версии). Затем выбрать пункт создания новой страницы или приложения. После этого можно задать название, URL и выбрать шаблон страницы. Далее необходимо добавить нужные элементы и сохранить изменения. Важно проверить, что права доступа настроены правильно, чтобы нужные пользователи могли видеть страницу.

Можно ли добавить на пользовательскую страницу в Битрикс24 свои виджеты и как это сделать?

Да, добавление собственных виджетов возможно. Для этого используется встроенный редактор страницы или настройка через API. В редакторе можно вставить готовые виджеты из библиотеки или создать новый с помощью скриптов на JavaScript и HTML, если разрешено. Для программного добавления виджетов потребуется базовое понимание API Битрикс24 и навыки программирования. После добавления виджеты можно размещать и настраивать под конкретные задачи.

Как ограничить доступ к пользовательской странице определённым сотрудникам в Битрикс24?

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

Можно ли изменить внешний вид пользовательской страницы в Битрикс24 без программирования?

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

Какие ошибки часто возникают при создании пользовательской страницы в Битрикс24 и как их избежать?

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

Как можно добавить новую пользовательскую страницу в Битрикс24 без программирования?

В Битрикс24 есть возможность создавать простые пользовательские страницы с помощью конструктора приложений. Для этого в разделе «Приложения» выбирается пункт создания нового приложения, где можно добавить HTML-код и настроить внешний вид страницы. Такой подход позволяет сделать нужный интерфейс без знания языков программирования и быстро внедрить дополнительные функции для сотрудников.

Какие шаги необходимы для создания полноценной пользовательской страницы с использованием REST API в Битрикс24?

Для создания страницы с интеграцией через REST API сначала нужно зарегистрировать новое приложение в вашем аккаунте Битрикс24. После этого на сервере создаётся веб-страница, которая обращается к методам API для получения и отправки данных. Важно правильно настроить авторизацию и обработку ответов, чтобы обеспечить корректную работу. Такая страница может использоваться для отображения кастомной информации, взаимодействия с CRM или управления задачами, что расширяет стандартные возможности системы.

Оценка статьи:
1 звезда2 звезды3 звезды4 звезды5 звезд (пока оценок нет)
Загрузка...
Поделиться с друзьями:
Поделиться
Отправить
Класснуть
Ссылка на основную публикацию
Похожие публикации