Кастомные 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