Кастомні Vue.js інтерфейси для смарт-процесів Бітрікс24
Стандартна картка смарт-процесу в Бітрікс24 — це копія CRM-форми. Вона не підтримує динамічні кроки, залежні поля та візуальний прогрес. Коли бізнес потребує багатокрокового погодження з розгалуженням або кастомною валідацією, стандартний інтерфейс не справляється. Vue.js вирішує ці завдання: ми створюємо placement-додатки, які повністю замінюють форму динамічного процесу. За роки роботи ми розробили понад 50 інтерфейсів для Бітрікс24 — від простих однокрокових форм до складних CRM-надбудов з інтеграцією 1С, ЮKassa та СДЭК. Кожен проект починається з аудиту бізнес-процесу і закінчується передачею документації та навчанням адміністраторів. У середньому розробка займає від 4 до 20 робочих днів, а економія часу на погодженнях сягає 40%. Наша команда має 6 років досвіду в інтеграції Бітрікс24 та реалізувала понад 80 проектів для українських компаній. Наприклад, впровадження кастомного інтерфейсу для погодження договорів дозволило одному з клієнтів економити 120 000 грн на місяць. У цій статті розберемо, як ми проєктуємо багатокрокові інтерфейси для смарт-процесів: від отримання стадій до запуску бізнес-процесів, і чому кастомний UI на Vue.js знижує витрати на доопрацювання у 2-3 рази.
Проблеми, які вирішуємо
- Нестандартна послідовність кроків. У стандартному інтерфейсі стадії йдуть лінійно. Для складних сценаріїв (заявка на відпустку з розгалуженням, погодження договору з кількома підписантами) потрібен динамічний покроковий UI.
- Складна логіка полів. Залежні списки, умовне відображення, валідація на стороні клієнта — все це виходить за рамки налаштувань UF-полів.
- Візуальний контроль. Замовники хочуть бачити статус етапів, хто погодив, які документи прикріплені. Стандартний інтерфейс цього не дає.
Як працює інтеграція Vue з Бітрікс24?
Vue — ідеальний вибір для placement-додатків Бітрікс24. Легкий фреймворк, швидка реактивність, можливість використовувати компоненти з екосистеми. На відміну від React, Vue простіше вбудовується в iframe і не вимагає складного налаштування збірки. Компонентна архітектура дозволяє перевикористовувати кроки форми, а Pinia — централізовано керувати станом.
Типовий кейс — форма погодження з кількома кроками, де кожен крок відповідає стадії смарт-процесу:
<!-- SmartProcessWizard.vue --> <template> <div class="wizard"> <StepIndicator :steps="steps" :current="currentStep" /> <Transition name="slide" mode="out-in"> <component :is="currentStepComponent" :key="currentStep" :item="store.item" @next="handleNext" @back="handleBack" @save="handleSave" /> </Transition> </div> </template> <script setup> import { computed } from 'vue' import { useSmartProcessStore } from '@/stores/smartProcess' const store = useSmartProcessStore() const steps = [ { id: 'initial', label: 'Вихідні дані', component: StepInitial }, { id: 'approval', label: 'Погодження', component: StepApproval }, { id: 'documents', label: 'Документи', component: StepDocuments }, { id: 'completion', label: 'Завершення', component: StepCompletion }, ] const currentStep = computed(() => store.currentStep) const currentStepComponent = computed( () => steps.find(s => s.id === currentStep.value)?.component ) async function handleNext(data) { await store.saveStepData(data) store.nextStep() } </script> Технічні аспекти: стадії, поля, права
Отримання списку стадій смарт-процесу виконується через crm.status.list з фільтром по ENTITY_ID = DYNAMIC_{entityTypeId}_STAGE. Кожна стадія має колір та назву — їх можна використовувати для візуальної індикації. Наприклад, індикатор прогресу відображає поточну стадію кольором.
UF-поля динамічних процесів мають префікс ufCrm_{entityTypeId}_. Для роботи з переліками використовується userfield.enumvalues.get. Приклад отримання та оновлення поля:
// Отримання та оновлення UF-поля const item = await callMethod('crm.item.get', { entityTypeId: 1040, id: itemId }) const customDate = item.ufCrm_1040_1704067200 // тип date await callMethod('crm.item.update', { entityTypeId: 1040, id: itemId, fields: { ufCrm_1040_1704067200: '2020-01-01' } }) Перевірка прав виконується через crm.type.get. Поле userPermissions показує, які дії доступні поточному користувачу. Для компонента Vue реалізована проста перевірка:
async function checkPermission(entityTypeId, action) { const result = await callMethod('crm.type.get', { id: entityTypeId }) const userRole = result.userPermissions?.[action] return userRole !== 'NONE' } Автоматизація та історія змін
Запуск BP з інтерфейсу здійснюється методом bizproc.workflow.start. Документ передається у форматі ['crm', 'CCrmDocumentDynamic', '{entityTypeId}_{itemId}']. Параметри шаблону вказуються в PARAMETERS. Статус запущеного процесу відстежується через bizproc.workflow.instances.
await callMethod('bizproc.workflow.start', { TEMPLATE_ID: templateId, DOCUMENT_ID: ['crm', 'CCrmDocumentDynamic', `${entityTypeId}_${itemId}`], PARAMETERS: { approver_id: selectedApproverId, deadline: deadlineDate, } }) Для побудови стрічки подій використовуються методи crm.timeline.bindings.list та crm.activity.list. Кожна подія містить дату, автора та опис — ці дані відображаються в кастомному компоненті timeline.
Що входить в роботу
- Аудит бізнес-процесу та складання ТЗ
- Прототипування багатокрокової форми
- Розробка Vue-додатку (Vue 3, Pinia, Vite, TypeScript)
- Інтеграція з REST API Бітрікс24 (crm.item, crm.status, userfield)
- Налаштування прав доступу та запуску BP
- Документація та навчання адміністраторів
- Гарантійна підтримка 3 місяці
Порівняння: стандартний інтерфейс vs кастомний Vue
| Параметр | Стандартний інтерфейс | Кастомний Vue |
|---|---|---|
| Гнучкість кроків | Фіксована послідовність | Будь-яка логіка, розгалуження, умовні кроки |
| Візуальний прогрес | Тільки список стадій | Прогрес-бар, індикатори, анімація |
| Залежні поля | Через налаштування UF (обмежено) | Повний контроль через реактивність |
| Інтеграція з BP | Через стандартні кнопки | Кастомні тригери, виклик BP з параметрами |
| Час розробки | 0 (з коробки) | 4–6 днів (базовий), 2–4 тижні (складний) |
Vue.js — один з найпопулярніших фреймворків для побудови реактивних інтерфейсів, що підтверджує його надійність для корпоративних рішень.
Приклад структури проекту Vue-додатку для смарт-процесу
-
src/-
components/— компоненти кроків -
composables/— хуки для роботи з API -
stores/— Pinia store -
api/— REST-обгортки -
App.vue— кореневий компонент -
main.js— точка входу
-
Процес розробки та терміни
Розробка кастомного інтерфейсу проходить п'ять етапів:
- Аналіз — вивчаємо бізнес-процес, визначаємо етапи, поля та ролі.
- Проектування — створюємо прототип багатокрокової форми.
- Розробка — пишемо Vue-додаток (Vue 3, Pinia, Vite, TypeScript), інтегруємо з REST API.
- Тестування — перевіряємо на 20+ сценаріях, включаючи граничні випадки.
- Деплой та навчання — розміщуємо placement-додаток, передаємо документацію.
Терміни:
- Простий інтерфейс (однокрокова форма, базова логіка) — від 4 до 6 робочих днів.
- Складне рішення (багатокрокове погодження, BP, зовнішні інтеграції) — від 2 до 4 тижнів.
Вартість розраховується індивідуально після оцінки проекту. Ми гарантуємо якість коду та дотримання термінів.
| Етап | Тривалість |
|---|---|
| Аналіз | 1–2 дні |
| Проектування | 1–2 дні |
| Розробка | 2–10 днів |
| Тестування | 1–2 дні |
| Деплой | 0.5 дня |
Чому обирають кастомні інтерфейси?
Кастомний інтерфейс на Vue вирішує завдання, з якими не справляється стандартна CRM: він адаптується під унікальні бізнес-процеси, скорочує час погодження у 2-3 рази швидше за стандартний інтерфейс CRM та знижує навантаження на менеджерів. Вбудована аналітика та візуальний прогрес підвищують прозорість.
Хочете обговорити ваш смарт-процес? Зв'яжіться з нами — оцінимо проект за один робочий день і запропонуємо оптимальне рішення. Отримайте консультацію прямо зараз.