Кастомні CRM-картки на Vue.js для Бітрікс24

Проблема: дані з 1С не потрапляють у картку угоди

Клієнт звернувся із завданням: у картці угоди потрібно бачити статус відвантаження з 1С та кнопку відправлення рахунку. Стандартні поля не тягнули — їх потрібно було кастомізувати. Часто менеджери витрачають час на ручне перенесення даних, що призводить до помилок і затримок. Ми розробили Vue.js-застосунок, який вбудовується прямо в картку через механізм placement Бітрікс24. Працюємо під ключ, оцінимо проєкт за 1 день — зв'яжіться з нами для обговорення.

Як інтегрувати дані з 1С у картку?

Placement дозволяє вбудувати застосунок у будь-яку CRM-картку. Після ініціалізації BX24 ми отримуємо ID сутності та тип (угода, контакт, лід) і завантажуємо дані через REST API. Для інтеграції з 1С ми створюємо проксі-ендпоінт, який авторизується в 1С, отримує дані і повертає JSON. Vue.js з Pinia дає виграш у швидкості розробки приблизно в 2–3 рази порівняно з чистим JavaScript на BX24.

Архітектура та реалізація

Ініціалізація застосунку

import { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' window.BX24.init(async () => { const placement = await getPlacement() const auth = BX24.getAuth() const app = createApp(App) app.use(createPinia()) app.provide('entityId', placement.ID) app.provide('entityType', placement.ENTITY_TYPE_NAME) app.provide('auth', auth) app.mount('#app') }) function getPlacement() { return new Promise(resolve => BX24.placement.getInterface(resolve)) } 

Завантаження даних сутності

import { defineStore } from 'pinia' import { inject } from 'vue' export const useDealStore = defineStore('deal', { state: () => ({ deal: null, relatedContacts: [], externalData: null, loading: false, }), actions: { async loadDeal(id) { this.loading = true const [deal, contacts] = await Promise.all([ bx24Call('crm.deal.get', { id }), bx24Call('crm.deal.contact.items.get', { id }), ]) this.deal = deal this.relatedContacts = contacts this.loading = false }, async loadExternalData(dealId) { const res = await fetch(`/api/deals/${dealId}/external`) this.externalData = await res.json() } } }) 

Оновлення полів картки

Для оновлення полів угоди використовуємо crm.deal.update. Не оновлюйте поля по одному в циклі — це створює чергу запитів і сповільнює інтерфейс. Бач-запити кращі.

Відображення даних із зовнішніх систем

Типовий кейс — показати в картці угоди історію замовлень клієнта з 1С або ERP:

<template> <div class="external-orders"> <div v-if="store.loading" class="loader">Завантаження...</div> <table v-else> <thead> <tr> <th>Номер замовлення</th> <th>Дата</th> <th>Сума</th> <th>Статус</th> </tr> </thead> <tbody> <tr v-for="order in store.externalData?.orders" :key="order.id"> <td>{{ order.number }}</td> <td>{{ formatDate(order.date) }}</td> <td>{{ formatMoney(order.total) }}</td> <td> <span :class="statusClass(order.status)"> {{ order.statusLabel }} </span> </td> </tr> </tbody> </table> </div> </template> 

Користувацькі кнопки та дії

Додавання кнопки в тулбар картки через BX24.placement.bindEvent:

BX24.callMethod('placement.bind', { PLACEMENT: 'CRM_DEAL_DETAIL_TAB', HANDLER: 'https://my-app.example.com/', TITLE: 'Моя вкладка', DESCRIPTION: 'Розширення CRM-картки', }) 

Порівняння підходів: Vue.js vs чистий JavaScript

Порівняння placement-типів

Чому Vue.js ефективніший за чистий JavaScript?

Vue.js з Pinia забезпечує реактивне зв'язування даних та компонентну архітектуру. Це знижує час розробки на 40% і спрощує підтримку. На відміну від чистого JavaScript, де кожну зміну DOM потрібно писати вручну, Vue.js автоматично оновлює інтерфейс при зміні даних. При масштабуванні — додаванні нових вкладок або інтеграцій — код залишається читабельним і модульним.

Що входить у роботу з розробки кастомної CRM-картки?

• Аудит поточних процесів Бітрікс24 та зовнішніх систем.
• Проєктування архітектури застосунку та схем даних.
• Розробка Vue.js-застосунку з Pinia, включаючи завантаження та відображення зовнішніх даних.
• Налаштування методів actions та інтеграція з 1С через REST API.
• Тестування у всіх браузерах та режимах Бітрікс24.
• Деплой, налаштування placement та прав доступу.
• Документація та навчання менеджерів.
• Підтримка протягом місяця після запуску.

Покрокова інструкція з впровадження

1. Аудит поточних процесів та API вашого Бітрікс24.
2. Проєктування архітектури застосунку та схем даних.
3. Розробка Vue.js-картки з Pinia, включаючи завантаження та відображення зовнішніх даних.
4. Налаштування методів actions та інтеграція із зовнішніми системами через REST API.
5. Тестування у всіх браузерах та режимах Бітрікс24.
6. Деплой, налаштування placement та прав доступу.
7. Документація та навчання менеджерів.

Терміни орієнтовно

Проста вкладка — від 2 до 4 днів. Повноцінна з інтеграцією — від 1 до 3 тижнів. Вартість розраховується індивідуально після оцінки обсягу робіт.

Економія часу та бюджету: використовуючи готові шаблони та Pinia, ми скорочуємо час розробки на 40% порівняно з чистим JavaScript. Отримайте консультацію спеціаліста по вашому проєкту — оцінка за 1 день. Замовте консультацію прямо зараз.

Сертифіковані спеціалісти з 10+ роками досвіду та 50+ реалізованими проєктами на Бітрікс24 гарантують сумісність з останніми версіями платформи.

Докладніше про placement в офіційній документації: Бітрікс24 REST API та Vue.js