Коли стандартної адмінки Бітрікса недостатньо?
Ми часто стикаємося з ситуацією: бізнес-процес вимагає нестандартного інтерфейсу, а стандартна адміністративна панель Бітрікса не дає потрібної гнучкості. Кастомні сторінки через CAdminList і CAdminForm — це PHP з синхронними запитами та застарілим UI. Коли з'являються складні операції — багатокрокове створення сутності, drag-and-drop сортування, Kanban-дошки — продуктивність і UX страждають. Наш досвід розробки на Vue.js для Бітрікса показує, що реактивні компоненти в 2-3 рази скорочують час роботи операторів та виключають перезавантаження сторінки. Vue.js дозволяє будувати інтерфейси, які миттєво реагують на дії користувача, і легко інтегрується з REST API Бітрікса. Це особливо важливо для операторських панелей, де кожна секунда на рахунку.
Як вбудувати Vue в адміністративну частину Бітрікса?
Підхід 1: сторінка в /bitrix/admin/. PHP-файл реєструється як адміністративна сторінка, ініціалізує права через $APPLICATION->AuthForm(), підключає Vue-бандл:
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_admin_before.php"); if (!$USER->IsAdmin() && !$USER->IsInGroup(MANAGER_GROUP_ID)) { $APPLICATION->AuthForm("Нет доступа"); } require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_admin_after.php"); echo '<div id="vue-admin-app" data-csrf="' . bitrix_sessid() . '"></div>'; $APPLICATION->AddHeadScript('/local/dist/admin-panel.js'); Vue-застосунок монтується на #vue-admin-app. CSRF-токен передається через data-csrf для захисту AJAX-запитів.
Підхід 2: окремий SPA на піддомені. Повністю незалежний Vue-застосунок з Vue Router, авторизація через REST API Бітрікса (user.current, сесійний токен у cookie). Підходить для операторських інтерфейсів, які працюють на окремому пристрої (планшет на складі).
Підхід 3: Vue-компоненти всередині стандартного розділу. Сторінки розділу — PHP, окремі блоки (таблиці, форми) — Vue-компоненти. Гібридний підхід, коли повна заміна недоцільна.
Які компоненти потрібні для Vue-адмінки?
- DataTable з серверною пагінацією. Таблиця сутностей з сортуванням, фільтрами, пошуком. Bulk-операції: виділити кілька рядків → масова зміна статусу, видалення. Inline-редагування комірок для швидких правок.
- ResourceForm — форма створення/редагування. React Hook Form або VeeValidate, динамічні поля, вкладені сутності, автозбереження чернетки в localStorage кожні 30 секунд.
- Дерево категорій з drag-and-drop. Розділи інфоблоку як вкладене дерево, перетягування — PATCH-запит на зміну SORT і IBLOCK_SECTION_ID.
- Менеджер медіафайлів. Інтеграція з бітріксовим файловим менеджером через CFile API.
Порівняння підходів до впровадження
| Підхід | Коли використовувати | Продуктивність | Складність розробки |
|---|---|---|---|
| Сторінка в /bitrix/admin/ | Єдина панель для адмінів | Висока | Середня |
| Окремий SPA | Зовнішні оператори, планшети | Максимальна | Висока |
| Гібрид | Часткова заміна без втрати інтеграції | Середня | Низька |
Приклад з практики: панель управління контентом новинного порталу
Медійний проект на Бітріксі, редакція з 15 осіб. Стандартний адміністративний інтерфейс для інфоблоку статей не влаштовував: не можна швидко перемикатися між матеріалами, немає черги публікації, немає інструменту планування.
Розробили редакційну панель — окрема сторінка /bitrix/admin/editorial.php. Vue-застосунок з трьома видами:
- Редакційна черга — Kanban-дошка (чернетка → перевірка → відкладено → опубліковано). Картка статті — назва, автор, дата публікації, кількість переглядів з Яндекс.Метрики. Drag-and-drop зміни статусу через SortableJS.
- Список матеріалів — таблиця з фільтрами за автором, тегом, датою. Inline-редагування заголовку та дати публікації.
- Редактор статті — TinyMCE всередині Vue-компонента, збереження через
CIBlockElement::Update, історія змін.
Права доступу: головний редактор бачить всі матеріали, автор — лише свої. Перевірка в PHP-контролері через групи користувачів Бітрікса, у Vue — приховування/відображення UI-елементів на основі window.BX_STATE.permissions.
Розробка зайняла 6 тижнів: 2 тижні — проектування інтерфейсу та API, 4 тижні — реалізація. Економія часу редакції склала 40% при публікації матеріалів.
API-шар: контролери для Vue
Всі операції Vue-панелі йдуть через REST-контролери. Базовий клас Bitrix\Main\Engine\Controller дає:
- Автоматичний CSRF-захист через
bitrix_sessid() - Логування дій через
Bitrix\Main\Diag\Debug - Обробку винятків з поверненням JSON-помилок
Структура відповіді: {status: 'success', data: {...}} або {status: 'error', message: '...'}. Vue використовує єдиний api.js сервіс з axios-інтерцептором для обробки 401/403.
Як зазначено в офіційній документації Bitrix Framework, механізм REST API дозволяє будувати зовнішні інтерфейси будь-якої складності, зберігаючи повний контроль над безпекою. (Джерело: Dev.1c-bitrix.ru).
Що входить в роботу?
- Аналіз бізнес-процесів і проектування інтерфейсу (схеми екранів, user flow)
- Розробка REST-контролерів і Vue-компонентів
- Інтеграція з існуючою архітектурою (інфоблоки, HL-блоки, права доступу)
- Документація по API та інструкція для адміністраторів
- Навчання команди (2-3 години вебінару)
- Гарантійна підтримка 1 місяць після здачі
Чому обирають нас?
Ми працюємо з 2015 року, виконали понад 50 проектів з інтеграції Vue.js у Бітрікс. Сертифіковані спеціалісти (Bitrix Developer, Vue.js Certified). На кожен проект надаємо гарантію якості та дотримання строків. Оцінимо ваш проект за 1 день після брифу — просто напишіть нам. Орієнтовна вартість визначається після аналізу проекту.
Етапи та строки
| Масштаб панелі | Орієнтовний строк |
|---|---|
| Одна CRUD-таблиця + форма | 1-2 тижні |
| Спеціалізований інтерфейс (3-5 екранів) | 3-6 тижнів |
| Повноцінна кастомна адміністративна система | 8-16 тижнів |
Строки визначаються кількістю сутностей, складністю бізнес-логіки та вимогами до прав доступу. Зв'яжіться з нами для попередньої оцінки — це безкоштовно.
Для оцінки вашого проекту зв'яжіться з нашими інженерами — ми підготуємо архітектуру та строки протягом одного робочого дня. Отримайте консультацію щодо вашого кейсу вже сьогодні.