Developing a smart process interface using Vue.js for Bitrix24

Developing Smart Process Interfaces on Vue.js for Bitrix24

Smart processes in Bitrix24 are configurable CRM objects introduced to the API with version 21.800. Unlike standard deals and leads, smart processes are created for a specific business workflow: a leave request, contract approval, or technical incident. The standard smart process interface is the same CRM card. When a specific UI is required — non-standard step sequences, visual progress indicators, dependent fields with complex logic — a Vue application is connected via the placement mechanism.

Smart Process REST API

Smart processes operate through crm.item.* methods — a unified API for all custom types:

// Get smart process item list
const items = await callMethod('crm.item.list', {
  entityTypeId: 1040, // ID of your smart process
  select: ['id', 'title', 'stageId', 'assignedById', 'ufCrm_custom_field'],
  filter: { stageId: 'DT1040_1:NEW' },
  order: { id: 'DESC' }
})

// Create an item
await callMethod('crm.item.add', {
  entityTypeId: 1040,
  fields: {
    title: 'New Request',
    stageId: 'DT1040_1:NEW',
    ufCrm_1040_custom_date: '2024-01-15',
  }
})

// Update an item
await callMethod('crm.item.update', {
  entityTypeId: 1040,
  id: itemId,
  fields: { stageId: 'DT1040_1:IN_PROCESS' }
})

entityTypeId — the numeric identifier of the smart process. Retrieve it via crm.type.list.

Multi-Step Interface Architecture

A typical use case — an approval form with multiple steps, where each step corresponds to a stage of the smart process:

<!-- 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>

Working with Stages

Retrieving smart process stages and displaying them:

// composables/useStages.js
import { ref, onMounted } from 'vue'
import { useBx24 } from './useBx24'

export function useStages(entityTypeId) {
  const { callMethod } = useBx24()
  const stages = ref([])

  onMounted(async () => {
    const result = await callMethod('crm.status.list', {
      filter: { ENTITY_ID: `DYNAMIC_${entityTypeId}_STAGE` }
    })
    stages.value = result
  })

  function getStageColor(stageId) {
    const stage = stages.value.find(s => s.STATUS_ID === stageId)
    return stage?.COLOR || '#cccccc'
  }

  function getStageLabel(stageId) {
    const stage = stages.value.find(s => s.STATUS_ID === stageId)
    return stage?.NAME || stageId
  }

  return { stages, getStageColor, getStageLabel }
}

Custom Fields of Smart Processes

UF fields of smart processes have the prefix ufCrm_{entityTypeId}_:

// Retrieving UF field values
const item = await callMethod('crm.item.get', {
  entityTypeId: 1040,
  id: itemId
})

// UF fields in item.ufCrm_1040_*
const customDate = item.ufCrm_1040_1704067200   // type: date
const customSelect = item.ufCrm_1040_enumeration // type: enumeration

// Updating a UF field
await callMethod('crm.item.update', {
  entityTypeId: 1040,
  id: itemId,
  fields: {
    ufCrm_1040_1704067200: '2024-02-01',
  }
})

For working with enumerations — userfield.enumvalues.get returns the available values.

Approval and Access Control

Smart processes support roles and permissions. Checking permissions before an action:

async function checkPermission(entityTypeId, action) {
  const result = await callMethod('crm.type.get', { id: entityTypeId })
  const userRole = result.userPermissions?.[action]
  return userRole !== 'NONE'
}

// In the component
const canEdit = ref(false)
onMounted(async () => {
  canEdit.value = await checkPermission(1040, 'WRITE')
})

Business Processes and Automation

Starting a business process from the Vue interface:

// Start a BP for a smart process item
await callMethod('bizproc.workflow.start', {
  TEMPLATE_ID: templateId,
  DOCUMENT_ID: ['crm', 'CCrmDocumentDynamic', `${entityTypeId}_${itemId}`],
  PARAMETERS: {
    approver_id: selectedApproverId,
    deadline: deadlineDate,
  }
})

Status of a running process — bizproc.workflow.instances.

Displaying Change History

Stage history from crm.timeline.bindings.list and crm.activity.list:

<template>
  <div class="timeline">
    <div v-for="event in timeline" :key="event.id" class="timeline-item">
      <div class="timeline-date">{{ formatDateTime(event.created) }}</div>
      <div class="timeline-content">
        <span class="timeline-author">{{ event.authorName }}</span>
        {{ event.description }}
      </div>
    </div>
  </div>
</template>

Timeline

A smart process interface with a multi-step form, stage display, and history — 4–6 business days. A full-featured solution with custom approval, BP integration, and external systems — 2–4 weeks.