The standard Smart Process form in Bitrix24 is just a copy of the CRM form. It does not support dynamic steps, dependent fields, or visual progress. When a business requires multi-stage approvals with branching or custom validation, the standard interface falls short. Vue.js solves these problems: we create placement applications that completely replace the Smart Process form. Over 10 years, we have developed more than 50 interfaces for Bitrix24 — from simple single-step forms to complex CRM add-ons integrated with 1C, YooKassa, and CDEK. Each project starts with a business process audit and ends with documentation and administrator training. On average, development takes 4 to 20 working days, and the time saved on approvals reaches 40%. The cost of a basic interface starts at $4,000, and annual savings can reach $15,000. In this article, we'll break down how we design multi-step interfaces for Smart Processes: from retrieving stages to launching business processes, and why a custom Vue.js UI reduces modification costs by 2-3 times.
Problems we solve
- Non-standard step sequences. In the standard interface, stages are linear. For complex scenarios (leave request with branching, contract approval with multiple signatories), a dynamic step-by-step UI is required.
- Complex field logic. Dependent lists, conditional rendering, client-side validation — all go beyond the capabilities of UF field settings.
- Visual control. Clients want to see stage statuses, who approved, and which documents are attached. The standard interface does not provide this.
How Vue.js integration with Bitrix24 works?
Vue.js is an ideal choice for Bitrix24 placement applications. Lightweight framework, fast reactivity, and the ability to use components from the ecosystem. Unlike React, Vue is easier to embed in an iframe and does not require complex build configuration. The component architecture allows reusing form steps, and Pinia provides centralized state management.
A typical case is an approval form with multiple steps, each corresponding to a Smart Process stage:
<!-- 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: 'Initial Data', component: StepInitial }, { id: 'approval', label: 'Approval', component: StepApproval }, { id: 'documents', label: 'Documents', component: StepDocuments }, { id: 'completion', label: 'Completion', 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> Technical aspects: stages, fields, rights
Retrieving the list of stages for a Smart Process is done via crm.status.list with a filter for ENTITY_ID = DYNAMIC_{entityTypeId}_STAGE. Each stage has a color and name — these can be used for visual indication. For example, a progress indicator displays the current stage with its color.
UF fields of Smart Processes have a prefix ufCrm_{entityTypeId}_. To work with enumerations, userfield.enumvalues.get is used. Example of retrieving and updating a field:
// Getting and updating UF field const item = await callMethod('crm.item.get', { entityTypeId: 1040, id: itemId }) const customDate = item.ufCrm_1040_1704067200 // type date await callMethod('crm.item.update', { entityTypeId: 1040, id: itemId, fields: { ufCrm_1040_1704067200: '2023-01-01' } }) Checking permissions is done via crm.type.get. The userPermissions field shows which actions are available to the current user. A simple check is implemented in the Vue component:
async function checkPermission(entityTypeId, action) { const result = await callMethod('crm.type.get', { id: entityTypeId }) const userRole = result.userPermissions?.[action] return userRole !== 'NONE' } Automation and change history
Launching a BP from the interface is done via bizproc.workflow.start. The document is passed in the format ['crm', 'CCrmDocumentDynamic', '{entityTypeId}_{itemId}']. Template parameters are specified in PARAMETERS. The status of the running process is tracked via bizproc.workflow.instances.
await callMethod('bizproc.workflow.start', { TEMPLATE_ID: templateId, DOCUMENT_ID: ['crm', 'CCrmDocumentDynamic', `${entityTypeId}_${itemId}`], PARAMETERS: { approver_id: selectedApproverId, deadline: deadlineDate, } }) To build an event timeline, methods crm.timeline.bindings.list and crm.activity.list are used. Each event contains a date, author, and description — this data is displayed in a custom timeline component.
What's included in the work
- Business process audit and technical specification
- Prototyping of a multi-step form
- Vue application development (Vue 3, Pinia, Vite, TypeScript)
- Integration with Bitrix24 REST API (crm.item, crm.status, userfield)
- Setting up access rights and BP triggering
- Documentation and administrator training
- 3-month warranty support
Comparison: standard interface vs custom Vue.js
| Parameter | Standard Interface | Custom Vue.js |
|---|---|---|
| Step flexibility | Fixed sequence | Any logic, branching, conditional steps |
| Visual progress | Only stage list | Progress bar, indicators, animation |
| Dependent fields | Via UF settings (limited) | Full control via reactivity |
| BP integration | Via standard buttons | Custom triggers, BP call with parameters |
| Development time | 0 (out of the box) | 4–6 days (basic), 2–4 weeks (complex) |
| Cost savings | None | Up to $15,000 annually (40% faster approvals) |
Vue.js — one of the most popular frameworks for building reactive interfaces, confirming its reliability for enterprise solutions.
Example project structure for a Smart Process Vue application
-
src/-
components/— step components -
composables/— hooks for API work -
stores/— Pinia store -
api/— REST wrappers -
App.vue— root component -
main.js— entry point
-
Development process and timelines
Custom interface development goes through five stages:
- Analysis — study the business process, define stages, fields, and roles.
- Design — create a multi-step form prototype.
- Development — write the Vue application (Vue 3, Pinia, Vite, TypeScript), integrate with REST API.
- Testing — test on 20+ scenarios including edge cases.
- Deployment and training — deploy the placement application, hand over documentation.
Timelines:
- Simple interface (single-step form, basic logic) — from 4 to 6 working days.
- Complex solution (multi-step approval, BP, external integrations) — from 2 to 4 weeks.
Cost is calculated individually after project assessment. We guarantee code quality and adherence to deadlines.
| Stage | Duration |
|---|---|
| Analysis | 1–2 days |
| Design | 1–2 days |
| Development | 2–10 days |
| Testing | 1–2 days |
| Deployment | 0.5 day |
Why choose custom interfaces?
A custom Vue.js interface solves problems that standard CRM cannot handle: it adapts to unique business processes, reduces approval time 2-3 times faster, and decreases the workload on managers. Built-in analytics and visual progress improve transparency.
Our company has over 10 years of experience and 50+ successful projects. For Bitrix24 Smart Processes, Vue.js provides the best custom interface. Our custom Vue UI is 3 times more efficient than standard forms. Starting from $4,000, you get a solution that saves up to $15,000 annually. Compare that to standard forms — our custom Vue.js interface is 3 times more efficient. Contact us for a free project assessment in 1 business day.