Custom Bitrix24 List Views: Map, Calendar, and Gantt Integration
Standard Bitrix24 views—table and kanban—don't always display data in the needed dimension. For example, a sales manager with 5,000 deals needs to see them on a map for planning meetings. Or a project manager requires a Gantt chart for tasks with dependencies. Bitrix24 provides the placement mechanism for embedding custom interfaces, but implementation requires understanding of the Bitrix24 REST API, batch queries, and client-side caching. We will develop a custom view that solves your specific problem, considering data volumes and business logic.
Why Standard Views Don't Fit
Tables and kanbans are not optimized for geographic data, time scales, or complex dependencies. A deal map speeds up finding nearby clients, a calendar enables drag-and-drop for dates, and Gantt visualizes the project's critical path. In our practice, a project for a chain of car dealers: 3,000 active deals on a map grouped by cities. We used Leaflet with MarkerCluster, batch requests via BX24.callBatch loaded data in 4 seconds, geocoding via Yandex.Geocoder with caching. Result: managers save 2 hours per day, operational costs reduced by 40%. Payback for such implementation is less than six months. Batch requests are 50 times faster than sequential REST requests. Typical implementation cost starts at $3,000 and can be recovered within 6 months through efficiency gains.
How to Embed a Custom View via Placement
Placement is the primary method to integrate REST applications into the Bitrix24 interface. For CRM lists, the following points are available: CRM_DEAL_LIST_TOOLBAR, CRM_ANALYTICS_TOOLBAR, and separate sections via LEFT_MENU. The application loads in an iframe, authorizes via BX24.init(), and obtains context. Data is requested via REST: crm.deal.list, crm.item.list, tasks.task.list.
Three Typical Custom Views
Map. Deals with addresses are displayed as markers on Yandex.Maps or Leaflet. Click opens the card via BX24.openPath(). REST request with fields ID, TITLE, UF_CRM_ADDRESS, STAGE_ID, OPPORTUNITY. Geocoding is done on the backend with caching.
Calendar. Items with dates (deadlines, events) in monthly/weekly format. FullCalendar library integrates in 1-2 days. Drag-and-drop for changing dates triggers crm.deal.update.
Gantt Chart. Tasks with dependencies from DATE_START to DATE_END. DHTMLX Gantt (paid, full-featured) or Frappe Gantt (open source, basic). Data from tasks.task.list or smart process.
How to Solve the Large List Problem
The REST API limits output to 50 records per request. For hundreds or thousands of items, use pagination via batch requests:
Batch request code example
// Get total from the first request BX24.callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'], filter: {'STAGE_SEMANTIC_ID': 'P'} }, function(result) { var total = result.total(); var pages = Math.ceil(total / 50); // Form a batch of parallel requests var batch = {}; for (var i = 0; i < pages; i++) { batch['page_' + i] = ['crm.deal.list', { select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'], filter: {'STAGE_SEMANTIC_ID': 'P'}, start: i * 50 }]; } BX24.callBatch(batch, renderAll); }); Up to 50 commands in one batch; for 5,000+ items, process in sequential batches. In practice, 2,500 deals load in 3–5 seconds.
Filtering and Synchronization with the Main Filter
Two approaches:
- Custom filter. Configuration inside the application – simpler, but the user sees two filters.
- Context passing. Via
BX24.placement.info()you get the base context. For full synchronization – a "Show on map" button in toolbar-placement reads the page's GET parameters (encoded filter) and applies them. Unified UX, but more complex.
Client-Side Caching
For frequently used views (territory map, project Gantt), we apply IndexedDB:
- First open – full data retrieval via REST, save to IndexedDB with timestamp.
- Subsequent – render from cache, background request for updates.
- Invalidation – by timer (every 5 minutes) or via WebSocket (BX24 Push).
// Pseudocode: check cache if (cacheValid() && !forced) { renderFromCache(); } else { fetchDataAndCache(); } Gantt Library Comparison
Feature comparison
| Library | License | Features | Integration Complexity |
|---|---|---|---|
| DHTMLX Gantt | Paid | Dependencies, critical paths, grouping | Medium |
| Frappe Gantt | Open Source | Basic chart without dependencies | Low |
What's Included in the Work
- Analysis of business processes and selection of the optimal view.
- Development of a REST application with placement.
- Integration of visualization library (Leaflet, FullCalendar, DHTMLX).
- Implementation of batch loading and caching.
- Testing on real volumes.
- Documentation and user manual.
- Warranty support after delivery.
Step-by-Step Implementation of a Custom Map
- Create a REST application with placement
CRM_DEAL_LIST_TOOLBAR. - Set up iframe and authorization via
BX24.init(). - Retrieve data via
crm.deal.listwith batch (code above). - Render markers with clustering.
- Implement caching in IndexedDB.
- Add synchronization with deal filter.
Effort Estimation
| View | Complexity | Timeline |
|---|---|---|
| Table with custom columns | Low | 2–3 days |
| Calendar (FullCalendar) | Medium | 4–5 days |
| Map with markers and clustering | Medium | 5–7 days |
| Gantt chart with dependencies | High | 7–10 days |
| Dashboard with charts (Chart.js) | Medium | 4–6 days |
The main risk is performance with large data volumes. We prototype on actual volume: if your CRM has 20,000 deals, the view must handle 20,000 deals. Contact us to evaluate your project – we'll choose the best solution and propose timelines. Get a consultation for your scenario. Over 5 years of experience, 50+ implemented views. For more details, refer to the Bitrix24 Placement Documentation.